Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

APEX 20.1 Draggable Entries in Chart

hiddenonearthNov 2 2020

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.

This post has been answered by Oleh Tyshchenko on Nov 5 2020
Jump to Answer

Comments

Oleh Tyshchenko

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

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:

image.png

Oleh Tyshchenko

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

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

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

hiddenonearth

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

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

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.

Oleh Tyshchenko
Answer

Based on your sketch posted above I guess your are looking for something like this
1.pngDemo application

Marked as Answer by hiddenonearth · Nov 9 2020
hiddenonearth

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;
}

Oleh Tyshchenko

@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

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.
image.pngI changed the orientation of the axis by using apex.region("chrt").widget().ojChart({orientation: 'horizontal'});

Oleh Tyshchenko

@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

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

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
1.pngThat's how my chart looks like when I add dummy data with nulls as values
2.pngWith 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

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

hiddenonearth

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

I believe you drop definition should looks something like this:

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

Post Details

Added on Nov 2 2020
18 comments
952 views