Java Development Tools

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.

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:

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.

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.

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

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.

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

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.

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

@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.

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

@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

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?

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

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

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.

I believe you drop definition should looks something like this:

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