DragTool: Points can be moved only vertically

[Rolf Fankhauser]

Hi

I am new in using the JavaScript version of TChart. So far I have used the VCL version. I would like to transfer a dynamic chart from VCL to JavaScript. The following picture shows the chart. The green point can be moved by the cursor. The coordinates of the position and some calculated values are displayed in separate boxes next to the chart.


As a test I created a chart with a PointXY series, added two points and a DragTool. That worked so far but the points can be dragged only vertically. What must I add that they can be dragged in all directions? And how can I avoid that other series can be dragged too? drag.series = [Chart1.series.item[0]] ?

Code: Select all

type="text/javascript"></script>
    <script type="text/javascript">
      function draw() {
        Chart1 = new Tee.Chart("canvas");
        s1 = Chart1.addSeries(new Tee.PointXY());
        Chart1.axes.bottom.setMinMax(0, 50);
        Chart1.axes.left.setMinMax(0, 200);
        s1.data.values = [10, 100];
        s1.data.x = [10, 20];
        drag = Chart1.tools.add(new Tee.DragTool(Chart1));
        //drag = new DragTool(Chart1);
        //drag.series = 
        Chart1.series.items[0].pointer.style = "ellipse";
        Chart1.legend.visible = false;
        Chart1.panel.format.gradient.visible = false;
        Chart1.panel.format.fill = "White";
        Chart1.title.text = "Test to drag a point";
        //Chart1.panel.format.fill = "rgb(230,230,230)";
        Chart1.draw();
      }

Another problem is that ticks of the bottom axis are set very strangely: not 0, 10, 20, 30, 40, 50 as expected but 0.00, 2.93, 5.86, etc.. For the left axis it's OK with an increment of 20.

Thanks for any hints!
Rolf

PS. I found some examples in the demos (intro/gantt.htm, series/area/smootharea.htm, basic\canvasalign.htm) but in all only vertical drag is possible. So, I guess it's by design only vertically. Possibly there is another solution to move interactively a single point in the chart (Point class?).

[Marc]

Hello Rolf,

The JS DragTool is thought of for one plane movement only (normally Y).

It's not too complicated to code it from scratch though, using mousedown, up and move.

I've put an example up here:

areadragpointsxy.htm

Right mouse - view source on the page to see how it's done.

Regards,
Marc Meumann

[Rolf Fankhauser]

Hello Marc

Many thanks for your example!
I will try it in my example with one point.
Why do I need the same event handlers in Chart1 and series a1?

Best regards
Rolf

[Marc]

Hello Rolf,

Re.

Why do I need the same event handlers in Chart1 and series a1?

I think you probably don't. I moved a little quickly, with over-caution, as there are some mouse events/behaviours that one might want to trap when not over a Series. In this case I don't think that will be necessary and the chart events can be removed.

Regards,
Marc

[Rolf Fankhauser]

Hello Marc

Thanks for your answer!
I implemented your code in my example and it works very well!
When I remove the chart events I note a strange behaviour: the point remains attached to the cursor. So, I stay with the chart event handler. If I have time, I will check which handlers are necessary.

Another problem I mentioned is that ticks of the bottom axis are set very strangely: not 0, 10, 20, 30, 40, 50 as expected but 0.00, 2.93, 5.86, etc.. For the left axis it's OK with an increment of 20. I am surprised about that because normally it selects very reasonable values (as for the y-axis). Do you know a solution for this?

Best regards
Rolf

[Marc]

Hello Rolf,

You may find this demo useful for reference:

https://www.steema.com/files/public/tee ... o/bars.htm

There are a few axis related properties of interest:

This may resolve the scaling-start you have seen.

Code: Select all

Chart1.axes.bottom.labels.roundFirst=true;

You can adjust the increment in this way:

Code: Select all

//here for left axis
Chart1.axes.left.increment=3;

There are other techniques that the demo uses for axis labels, including that of taking the labels added with the data:

Code: Select all

bar1.data.labels =  [ "jan","feb","mar","apr","may","jun","jul" ];

This demo adds information for the setting of custom labels:
https://www.steema.com/files/public/tee ... labels.htm

Regards,
Marc