Forum Stats

  • 3,824,756 Users
  • 2,260,414 Discussions
  • 7,896,306 Comments

Discussions

APEX 20.1 Draggable Entries in Chart

hiddenonearth
hiddenonearth Member Posts: 92 Red Ribbon

Hello,

is it somehow possible to drag and drop the shown entries (for instance in an Bar Range Chart) in order to change to start and end date, similar to the calendar in APEX. The objective is to extend the running time of an project without need of manual changes.

Thanks.

Best Answer

«1

Answers

  • Oleh Tyshchenko
    Oleh Tyshchenko Member Posts: 716 Gold Trophy

    I'm not 100% sure a drag and drop is what you need. It seems you want to resize bars and that functionality is not supported by JET charts (but JET GANTT do). In case I miss your point and everything you need is just to move bars on the chart then have a look at my example. Also here is a documentation on JET chart drag and drop API you may want to look through.

  • hiddenonearth
    hiddenonearth Member Posts: 92 Red Ribbon
    edited Nov 3, 2020 8:16AM

    I want to resize the bars in my chart when extending the date, so the user has the chance to do this directly in the chart by dragging it to the right. I need to create an combinaton of charts with the bar ranges and two line charts. Is it possible to drag and drop the fix lines to the top and bottom where the value stays the same for the whole x-axis. Or is there a possibility to make the changes manually by any update queries (User needs to make the changes then). Furthermore, I need to option the change the names of the axis. Thanks.

    Wished outcome should look somehting like that:



  • Oleh Tyshchenko
    Oleh Tyshchenko Member Posts: 716 Gold Trophy

    Sorry but to be honest, I find it hard to follow your answer. Probably I need a more detailed explanation. So I will try to comment on the individual cases.

    @hiddenonearth

    I want to resize the bars

    You can't resize bars (make them taller or narrower etc) but you can move the hole bar to the new location.

    @hiddenonearth

    Is it possible to drag and drop the fix lines

    Yes, you can move lines by drag and drop

    @hiddenonearth

    is there a possibility to make the changes manually by any update queries

    Not sure I get the idea. Clicking on individual line or bar you may open a modal dialog with a form of some kind of "properties" of the clicked object (i.e. Y value for a line). When the dialog is closed and the changes are submitted to a database then just refresh the whole chart.

  • hiddenonearth
    hiddenonearth Member Posts: 92 Red Ribbon

    Thanks for the answer. Unfortunately I can't import your sample application due to compatibilty problems (using newer APEX versio on my side). Could you please provide some sample code on how to implement the javascipt drag-and-drop functionality on the page. Thanks.

  • Oleh Tyshchenko
    Oleh Tyshchenko Member Posts: 716 Gold Trophy

    Requested a free workspace at apex.oracle.com. This way you will have no problem importing my samples.

  • hiddenonearth
    hiddenonearth Member Posts: 92 Red Ribbon

    Is it possible to select dates for the low and max in the bar range chart or in any other chart besides gantt since I can' put there my target lines.

  • Oleh Tyshchenko
    Oleh Tyshchenko Member Posts: 716 Gold Trophy

    You want to see dates as values on Y axis, am I get your right? If so read this topic - Scatter chart with date axis

  • hiddenonearth
    hiddenonearth Member Posts: 92 Red Ribbon

    I need to display the start and end dates of the single projects similar to a gantt chart. Unfortunately I can't add the target lines in a gannt chart. Any idea how implement the timeline between start and end dates like a line, bar or range with the x-axis being the dates or any other time attribute. The Scatter chart with date axis reference didn't helped me a lot.

  • hiddenonearth
    hiddenonearth Member Posts: 92 Red Ribbon

    Thank you very much Oleh. Thats brilliant. Exactly what I was looking for. Do you also know what I need to change in the code to make the bar range chart draggable. Currently it doesn't work.

    My code:

    // Add Reference Object as straight target line

    function( options ){

      $.extend(

        options.xAxis,

        {

          referenceObjects:[

            { id: 'Reference Object 1', text: 'Reference Object 1', type: 'line', value: "00", color : 'red', displayInLegend: 'on', lineWidth: 3, location: 'back', shortDesc: "" },

            { id: 'Reference Object 2', text: 'Reference Object 2', type: 'line', value: "01", color : 'red', displayInLegend: 'on', lineWidth: 3, location: 'back', shortDesc: "" }

          ]

        }

      );


    // Enable drag and drop functionality   

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

       

       var onPlotAreaDrop1 = function (event, ui) {

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

      };

       

      $.extend(

        options.dnd,

        {

          drag : { items : { dataTypes : ["text/barrangeechart"] }},

          drop : {

            plotArea : {

              dataTypes : ["text/barrangechart"],

              drop   : onPlotAreaDrop1

            }

          }

        }

      );

       

      options.dataFilter = function( data ) {

        for (var i = 0; i < data.series.length; i++ ) {

          for (var j = 0; j < data.series[i].items.length; j++ ) {

            data.series[ i ].items[j].markerSize = Math.round(Math.random() * (55 - 15)) + 15;

          }

        }

        return data;

      };

       

    // Convert date to number

       

      this.baseDate = new Date(2020,10,1);


      this.toDates = { 

        format: function(value) {

          var theDate = new Date(baseDate);

          theDate.setDate(theDate.getDate() + value);


          return theDate.toLocaleDateString();

        }

      }


      return options;

    }