Forum Stats

  • 3,825,197 Users
  • 2,260,480 Discussions
  • 7,896,437 Comments

Discussions

APEX 20.1 Draggable Entries in Chart

2»

Answers

  • Oleh Tyshchenko
    Oleh Tyshchenko Member Posts: 716 Gold Trophy

    @hiddenonearth

    Do you also know what I need to change in the code to make the bar range chart draggable. Currently it doesn't work.

    Check your code. I guess there's a typo - an extra "e" char in the drag definition.

  • hiddenonearth
    hiddenonearth Member Posts: 93 Red Ribbon

    Any idea how to show the pattern on the y-axis (Like 0 to 10)? Currently only the value of the entries are shown, therefore I can't add the reference objects (target lines) since the number is not shown on the y-axis. The second line doesn't get displayed. See yellow marker.

    I changed the orientation of the axis by using apex.region("chrt").widget().ojChart({orientation: 'horizontal'});

  • Oleh Tyshchenko
    Oleh Tyshchenko Member Posts: 716 Gold Trophy

    @hiddenonearth

    Any idea how to show the pattern on the y-axis (Like 0 to 10)?

    You may try to set min/max values for the axis. Or add series 0 through 10 with null values.

    @hiddenonearth

    I changed the orientation of the axis by using apex.region("chrt").widget().ojChart({orientation: 'horizontal'});

    Cool, but it's officially undocumented for range chart

  • hiddenonearth
    hiddenonearth Member Posts: 93 Red Ribbon

    I found the orientation for the range chart in the sample chart application for bar range ( p.23). I already played with the options for the ticks but it didn't work properly. Is there a possibility to change them via JavaScript, something like  options.xAxis.tickLabel = ticks: 1?

  • Oleh Tyshchenko
    Oleh Tyshchenko Member Posts: 716 Gold Trophy
    edited Nov 11, 2020 1:12PM

    @hiddenonearth

    I already played with the options for the ticks but it didn't work properly. Is there a possibility to change them via JavaScript, something like options.xAxis.tickLabel = ticks: 1

    Of course you can do anything JET chart supports via JavaScript but I'm not sure what a problem this should solve.

    That's how my chart looks like when I set minimum (0) and maximum (10) values for X axis

    That's how my chart looks like when I add dummy data with nulls as values

    With the dummy data my query looks like this:

    SELECT pid, prj, lo, hi FROM ( -- both LO and HI are days since 2020-10-01
    SELECT 1 pid, 'Project 1'    prj,  21 lo,  25 hi FROM dual UNION ALL
    SELECT 2 pid, 'Project 2'    prj,  17 lo,  31 hi FROM dual UNION ALL
    SELECT 3 pid, 'Project 3'    prj,   6 lo,  19 hi FROM dual UNION ALL
    SELECT 0 pid, 'Project Stub 0' prj, null lo, null hi FROM dual UNION ALL
    SELECT 4 pid, 'Project Stub 4' prj, null lo, null hi FROM dual UNION ALL
    SELECT 5 pid, 'Project Stub 5' prj, null lo, null hi FROM dual UNION ALL
    SELECT 6 pid, 'Project Stub 6' prj, null lo, null hi FROM dual UNION ALL
    SELECT 7 pid, 'Project Stub 7' prj, null lo, null hi FROM dual UNION ALL
    SELECT 8 pid, 'Project Stub 8' prj, null lo, null hi FROM dual UNION ALL
    SELECT 9 pid, 'Project Stub 9' prj, null lo, null hi FROM dual UNION ALL
    SELECT 10 pid, 'Project Stub 10' prj, null lo, null hi FROM dual
    ) ORDER BY pid
    
    hiddenonearth
  • hiddenonearth
    hiddenonearth Member Posts: 93 Red Ribbon

    I joined another table to show the values on the x-axis. That did the trick. Thank you for your help.

  • hiddenonearth
    hiddenonearth Member Posts: 93 Red Ribbon

    Now I am trying to move bars in a chart using the drag-and-drop functionality. What I tried was following:

    function( options ){    

        options.selectionMode = "multiple";

        options.dragMode      = "on";

        options.dnd           = options.dnd || {};


        var onPlotAreaDrop1 = function (event, ui) {

            onPlotAreaDrop(event, ui, "#barchart_jet");

        };


        $.extend(

            options.dnd,

            {

                drag : {

                    series : { dataTypes : ["text/barchart"] },

                    groups : { dataTypes : ["text/barchart"] },

                    items  : { dataTypes : ["text/barchart"] }

                },


                drop: {

                    plotArea : {

                        series : { dataTypes : ["text/barchart"] },

                        groups : { dataTypes : ["text/barchart"] },

                        items  : { dataTypes : ["text/barchart"] },

                        drop      : onPlotAreaDrop1

                    }

            }

            }

        );

        

        return options;

    }

    The query for my sample chart:

    SELECT 1 label, 10 wert from dual union all

    select 2 label, 20 wert from dual union all

    select 3 label, 30 wert from dual union all

    select 4 label, null wert from dual union all

    select 5 label, null wert from dual union all

    select 6 label, null wert from dual union all

    select 7 label, null wert from dual union all

    select 8 label, null wert from dual union all

    select 9 label, null wert from dual union all

    select 10 label, null wert from dual union all

    select 11 label, null wert from dual union all

    select 12 label, null wert from dual union all

    select 13 label, null wert from dual;


    I can move a bar but not drop it to the selected area and save the changes afterwards.

  • Oleh Tyshchenko
    Oleh Tyshchenko Member Posts: 716 Gold Trophy

    I believe you drop definition should looks something like this:

    drop: {
        plotArea : {
            dataTypes : ["text/barchart"],
            drop      : onPlotAreaDrop1
        }
    }