ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Multiple charts, one scrollbar and track cursor
Posted by Giulio on Sep-27-2012 16:18
| Reply | Monitor
Hi,

I'm thinking of purchasing ChartDirector for Java, for professional use, because I love its versatile features.
I have to draw a few XYCharts in different areas (each of those with own axes) one below the other, but I'd like to use only a scrollbar to move them together and only a cursor that can track all of them.
Is it possible? If so, how could I do?
Thank you.

  Re: Multiple charts, one scrollbar and track cursor
Posted by Giulio on Sep-28-2012 00:16
| Reply | Monitor
Please, I need to know if a vertical cursor can track a multichart as the one I described before.

  Re: Multiple charts, one scrollbar and track cursor
Posted by Giulio on Sep-28-2012 00:16
| Reply | Monitor
Please, I need to know if a vertical cursor can track a multichart as the one I described before.

  Re: Multiple charts, one scrollbar and track cursor
Posted by Peter Kwan on Sep-28-2012 01:25
| Reply | Monitor
Hi Giulio,

For drawing track lines for multiple charts, I think you can just draw them one by one. The exact code depends on whether you are writing a web application, or Java SWING application or using other GUI frameworks.

For example, consider the sample code "Track Line with Legend (Windows)". In the original sample code, the track line is drawing when the mouse move with something like:

    private void chartViewer1_MouseMovedPlotArea(MouseEvent e)
    {
        ChartViewer viewer = (ChartViewer)e.getSource();
        trackLineLegend((XYChart)viewer.getChart(), viewer.getPlotAreaMouseX());
        viewer.updateDisplay();
    }

You can change the above code to draw the track line for all the charts:

    private void myChartViewer_MouseMovedPlotArea(MouseEvent e)
    {
        ChartViewer viewer = (ChartViewer)e.getSource();

        trackLineLegend((XYChart)myViewer0.getChart(), viewer.getPlotAreaMouseX());
        myViewer0.updateDisplay();

        trackLineLegend((XYChart)myViewer1.getChart(), viewer.getPlotAreaMouseX());
        myViewer1.updateDisplay();

        trackLineLegend((XYChart)myViewer2.getChart(), viewer.getPlotAreaMouseX());
        myViewer2.updateDisplay();
   }

You can set up myChartViewer_MouseMovedPlotArea to be the mouseMovedPlotArea handler of all your chart viewer objects, so that the track line will get updated no matter when the mouse is the plot area in any one of the charts.

Similarly, for scrolling, you can freely update all the charts when the scrollbar moves. For example, in the "Zooming and Scrolling with Track Line (1) (Windows)" sample code, when the scrollbar moves, the chartViewer1 is updated in the hScrollBar1_ValueChanged event handler. You can repeat the code so it updates other chart viewer objects as well.

You may also note the "Finance Chart Track Line" sample code. A financial chart contains multiple XYChart objects positioned vertically, so it is quite similar to your case. The FinanceChart is constructed by using a MultiChart object to contain all the XYChart objects. In this way, instead of having a MouseMovedPlotArea event for each XYChart, there is only is one MouseMovedPlotArea event for the entire MultiChart. Also, only one ChartViewer is needed. For your case, you may also use one MultiChart to contain all the XYChart objects if they are stacked directly on top of each others. This may simplify the code as it does not need to handle so many event handlers or chart viewers.;

Regards
Peter Kwan

  Re: Multiple charts, one scrollbar and track cursor
Posted by Giulio on Sep-28-2012 17:24
| Reply | Monitor
I'll purchase the license immediately.
Your software and support are really powerful.
Thank you.

  Re: Multiple charts, one scrollbar and track cursor
Posted by Giulio on Sep-28-2012 18:50
| Reply | Monitor
Hi again Peter,

I found the "Finance Chart Track Line" chart in the gallery on your website, but I couldn't find it inside the free trial archive. What's the path to find it?

Another question:
How can I use the license key, when I purchase it? Will I able to download another version of the ChartDirector software, different from the free trial?

thank you.

  Re: Multiple charts, one scrollbar and track cursor
Posted by Peter Kwan on Sep-29-2012 04:38
| Reply | Monitor
Hi Giulio,

You can locate the sample code by looking up  "Finance Chart Track Line" from the ChartDirector documentation index. The JSP version is at jspdemo/trackfinance.jsp. The Java SWING version is at javademo/trackfinance.java. See:

http://www.advsofteng.com/doc/cdjava.htm#trackfinance.htm
http://www.advsofteng.com/doc/cdjava.htm#trackfinanceweb.htm

Hope this can help.

Regards
Peter Kwan

  Re: Multiple charts, one scrollbar and track cursor
Posted by Giulio on Oct-09-2012 14:52
| Reply | Monitor
Hi again Peter,

now I'm trying to add only a horizontal scrollbar to move together the multiple charts (I'm
using Java/Swing components, but not the Multichart one)
I don't succeed in performing this function. Moreover, as I have created a real time chart
(like the one in your code, realtimetrack.java), I'd like that the charts continue to draw new
lines when the knob is dragged at the "far right" of the scrollbar.
Could you help me, please?
Thank you.

  Re: Multiple charts, one scrollbar and track cursor
Posted by Peter Kwan on Oct-10-2012 02:15
| Reply | Monitor
Hi Guilio,

I assume you already know how to add a scroll bar to your user interface and configure the scroll bar. (See http://docs.oracle.com/javase/1.4.2/docs/api/javax/swing/JScrollBar.html)

Basically, in your chart drawing code, instead of using all the data to draw the chart, you just use the data within the range specified by your scroll bar. For example, if you scroll bar specifies that only the latest 10% data be visible (based on JScrollbar.getVisibleAmount, JScrollbar.getValue, JScrollbar.getMinimum and JScrollbar.getMaximum), then your charting code should only use the lastest 10% of the data.

In the AdjustmentListener of your scroll bar, you just need to update the view port. (I assume your code has a similar structure as the Realtime Chart sample code in which the chart can be updated by calling chartViewer1.updateViewPort.) In this way, when the user moves the scroll bar, the chart will be updated to reflect the scroll bar position.

Hope this can help.

Regards
Peter Kwan

  Re: Multiple charts, one scrollbar and track cursor
Posted by Giulio on Oct-10-2012 16:20
| Reply | Monitor
Attachments:
Hi Peter,

Could you take a look at the attached code (Interface.java), please? It performs multiple
dynamic charts.
How should I modify it to combine realtime function with the scrolling function?
I don't succeed in working out this problem.
Thanks a lot.
Interface.java
Interface.java
22.01 Kb

  Re: Multiple charts, one scrollbar and track cursor
Posted by Peter Kwan on Oct-11-2012 03:01
| Reply | Monitor
Hi Giulio,

In your code, your scrollbar is configured so that the visible amount is the same as the entire scroll bar, so there is nothing to scroll. If you want to have something to scroll, please set the visible amount to be less than the entire scroll bar. For example:

scorri=new JScrollBar(JScrollBar.HORIZONTAL,0,50000000,0,100000000);

Your charting plotting code is using all the data, not just the data specified by your scroll bar. Please only use the data specified by your scroll bar. For example:

//the array index for the visible part according to the scroll bar
int startIndex = (int)(scorri.getValue() * (long)kms0.length / scorri.getMaximum());
int endIndex = (int)((scorri.getValue() + (long)scorri.getVisibleAmount() - 1) * kms0.length / scorri.getMaximum());

//get the visible data
double[] visibleX = new double[endIndex - startIndex + 1];
double[] visibleData = new double[endIndex - startIndex + 1];
for (int i = 0; i < visibleX.length; ++i) {
    visibleX[i] = kms0[startIndex + i];
    visibleData[i] = data0[startIndex + i];
}

//plot the visible data
ll0.setXData(visibleX);
ll0.addDataSet(visibleData, 0x000000).setDataSymbol(Chart.GlassSphere2Shape, 5);


Also, I see that in your code, you are setting the axis scale based on the dimsamples, like:

ax.setLinearScale(0,(dimsamples-1)*0.25,1,4);

Please modify the code so that the axis scale is based on what is visible, not on the dimsamples.

Hope this can help.

Regards
Peter Kwan

  Re: Multiple charts, one scrollbar and track cursor
Posted by Giulio on Oct-12-2012 00:19
| Reply | Monitor
Hi Peter,

Your tips came really in useful to me. I worked out the problem.
I should need another help, this one about the zoom function, please.
How should I modify your code (zoomscrolltrack.java) to call the "zoom function" of all the
charts together (you know they are multiple XYChart objects positioned vertically), no
matter where the mouse is in any one of the charts.
Thanks a lot again.
Kind regards.

giulio

  Re: Multiple charts, one scrollbar and track cursor
Posted by Peter Kwan on Oct-13-2012 02:54
| Reply | Monitor
Hi Giulio,

In the ViewPortChanged event handler of cv0 (that is, cv0_viewPortChanged), copy the view port settings of cv0 to other charts (using ChartViewer.getViewPortLeft, ChartViewer.setViewPortLeft, ChartViewer.getViewPortWidth, ChartViewer.setViewPortLeft, ....). In this way, when the user zooms in cv0, the view port of other charts will be updated too. Then in the  cv0_viewPortChanged you can redraw all three charts.

You can repeat the above for cv1 and cv2.

Hope this can help.

Regards
Peter Kwan

  Re: Multiple charts, one scrollbar and track cursor
Posted by Giulio on Oct-16-2012 14:33
| Reply | Monitor
A thousand times, thank you, Peter :)
Due to your support, I've got multiple dynamic charts with track line, scrolling and zooming
function.
I've still some things to do, but I hope "the worst is over".
Thank you, again.

giulio

  Re: Multiple charts, one scrollbar and track cursor
Posted by Giulio on Oct-25-2012 21:33
| Reply | Monitor
Hi again Peter,

I have to create the x-axis with values sorted in descending order (for example, the x
coordinates are: 10, 9.75, 9.5, 9.25, 9, 8.75, etc.).
How should I modify my code (that I developed starting from your code,
zoomscrolltrack.java), that sets multiple dynamic charts with scrolling, zooming and tracking
function, please?
Thank you again.

Giulio

  Re: Multiple charts, one scrollbar and track cursor
Posted by Peter Kwan on Oct-25-2012 23:52
| Reply | Monitor
Hi Giulio,

For the zoomscrolltrack.java sample code, simply adding the line:

c.xAxis().setReverse();

will reverse the x-axis scale.

Hope this can help.

Regards
Peter Kwan

  Re: Multiple charts, one scrollbar and track cursor
Posted by giulio on Oct-26-2012 01:47
| Reply | Monitor
Thanks, Peter.

I have two more questions about the "c.Axis().setReverse()" method.

1) what must be the order of the x values in the array that is the argument of the
layer.setXData(double[]  xData) method, if I want to use setReverse and see 10, 9.75, 9.5
,9.25 on the x-axis? descending or ascending?
2) Since I have to draw dynamic charts from the left side to the right side of the plot area(
like in your code realtimetrack.java), will this method change the direction of drawing? I'd
prefer the direction doesnt' change.
Could you help me, please?
Kind regards.

Giulio

  Re: Multiple charts, one scrollbar and track cursor
Posted by Peter Kwan on Oct-26-2012 18:25
| Reply | Monitor
Hi guilio,

1. The order of the x values does not matter. You can order them in anyway you like. For example, you can use:

x = 10, 7, 9.5, 8, 8.5, 7.5

ChartDirector will just plot the points according to the x-coordinates. For a line chart, it will join the points with lines according to the ordering you provide.

2. If your x-axis is from 10 (left side) to 0 (right side), and your x values are from 10, 9, 8, 7, then the line will be draw on from the left side to the right side.

Hope this can help.

Regards
Peter Kwan

  Re: Multiple charts, one scrollbar and track cursor
Posted by Giulio on Oct-29-2012 18:38
| Reply | Monitor
Sorry Peter,
but I'm afraid it doesn't work.
If I set the x-values in descending order, scrolling and zooming fail because, with reference to zoomscrolltrack.java, startIndex is greater than endIndex.
And, if I set the x-values in ascending order (for example, 1 2 ....9, screen width=4) and then I use c.Axis().setReverse(), the effect on the screen is this, when I move the scrollbar from the right to the left side:
           9 8 7 6
         8 7 6 5
      7 6 5 4
    6 5 4 3
  5 4 3 2
4 3 2 1

Instead the desired effect is:
                4 3 2 1
             5 4 3 2
          6 5 4 3
       7 6 5 4
    8 7 6 5
9 8 7 6
Could you help me, please?
Thank you.

Giulio

  Re: Multiple charts, one scrollbar and track cursor
Posted by Peter Kwan on Oct-30-2012 03:14
| Reply | Monitor
Hi Giulio,

I can see the issue now.

Instead of using c.xAxis().setReverse(), I have tried the following method on zoomscrolltrack.java, and it seems to work and scroll according to your requirement:

(a) Reverse the axis scale in setFullRange. Change the original code:

viewer.setFullRange("x", timeStamps[0], timeStamps[timeStamps.length - 1]);

to

viewer.setFullRange("x", timeStamps[timeStamps.length - 1], timeStamps[0]);

After the above, the axis scale should be reversed.

(b) Reverse the startIndex and endIndex in the data selection code, so that it can obtain the correct data. Original code is:

int startIndex = (int)Math.floor(Chart.bSearch(timeStamps, viewPortStartDate));
int endIndex = (int)Math.ceil(Chart.bSearch(timeStamps, viewPortEndDate));

Please change to:

int endIndex = (int)Math.floor(Chart.bSearch(timeStamps, viewPortStartDate));
int startIndex = (int)Math.ceil(Chart.bSearch(timeStamps, viewPortEndDate));

Hope this can help.

Regards
Peter Kwan

  Re: Multiple charts, one scrollbar and track cursor
Posted by Giulio on Oct-30-2012 17:42
| Reply | Monitor
Sorry again Peter,

As regards your changes, no data is displayed in the plot area because the value of the
noOfPoints variable becomes negative, although the display of the labels of  the x-axis is
correct when I move the scrollbar from the right to the left side.
Could you help me, please?
Thank you.

  Re: Multiple charts, one scrollbar and track cursor
Posted by Peter Kwan on Oct-31-2012 01:01
| Reply | Monitor
Attachments:
Hi Giulio,

I have attached my test code, which is based on the original zoomscrolltrack.java sample code, with the changes I mentioned in my last message, and it works normally in my computer (with the x-axis reversed, and all data are visible).

Would you mind to try the attached code to see if it works in your case?

Regards
Peter Kwan
zoomscrolltrack.java
zoomscrolltrack.java
21.36 Kb

  Re: Multiple charts, one scrollbar and track cursor
Posted by giulio on Nov-03-2012 15:37
| Reply | Monitor
Hi again Peter,

Thank you for the reply.
I sent you an email at pkwan@advsofteng.net to illustrate my problem better.
Could you help me, please?
Kind regards.

Giulio

  Re: Multiple charts, one scrollbar and track cursor
Posted by Peter Kwan on Nov-05-2012 04:53
| Reply | Monitor
Attachments:
Hi Giulio,

Thanks for the email. I have already received and tried it.

I see that you are trying to create a realtime chart that can scroll and zoom and with track cursor, and the x-axis is reversed.

Because your code is quite complicated, it is hard for me to diagnose the code. Instead, I have created an example for something similar as attached.

The example is a realtime chart. You can scroll at any time by dragging on the chart. You can zoom at any time by using the mouse wheel (or you using the zoom in/out buttons). There is track cursor and the x-axis is reversed. If the chart is scrolled to the far right, then the chart will automatically scroll when new data points come in.

The key points to creating such a chart are:

(a) Create arrays to store your realtime data. Append new data to the arrays. If you have a lot of data, you would need to create large arrays.

(b) If you need to scroll the chart automatically when new data points come in, you may move the view port. Do not use "shiftData".

(c) It seems your data points are always 0.0005 units apart. In this case, you can just use 0, 1, 2, 3, .... as the x-coordinates, and use label formatting to display them as 3.0000, 2.9995, 2.9990, etc.. In the attached sample code, the label formatting is:

c.xAxis().setLabelFormat("{=(" + (timeStamps.length - 1) + "-{value})*0.0005|4}");

Hope this can help.

Regards
Peter Kwan
realtimezoom.java
realtimezoom.java
21.96 Kb

  Re: Multiple charts, one scrollbar and track cursor
Posted by giulio on Nov-21-2012 01:33
| Reply | Monitor
Hi again Peter,

regarding x-coordinates of data points, now I have to display negative x-values set in
descending order (0,-0.0005,-0.001,-0.0015,-0.002...)
If I use the following label formatting

c.xAxis().setLabelFormat("{=" + primo + "-{value}*0.0005|4}");
//where primo usually is 0, while value corresponds to 0,1,2,3...

the chart display positive x-values.
could you help me, please?
thank you.

  Re: Multiple charts, one scrollbar and track cursor
Posted by Peter Kwan on Nov-22-2012 00:46
| Reply | Monitor
Hi giulio,

In my last message, there is a "realtimezoom.java" sample code. I change the line:

c.xAxis().setLabelFormat("{=(" + (timeStamps.length - 1) + "-{value})*0.0005|4}");

to:

double primo = 0;
c.xAxis().setLabelFormat("{=" + primo + "-{value}*0.0005|4}");

and it works normally, showing negative x-axis labels.

If you think c.xAxis().setLabelFormat("{=" + primo + "-{value}*0.0005|4}"); is not working, is it possible to provide an example (such as by modifying the realtimezoom.java  code I attached) so I may know your exact chart configuration?

Regards
Peter Kwan

  Re: Multiple charts, one scrollbar and track cursor
Posted by giulio on Dec-04-2012 03:25
| Reply | Monitor
Hi Peter,

It was my fault.
I couldn't see the minus sign character because the yellow banner hid it.
Now the company I'm working for has bought the license, and finally I can see it.
Kind regards.