ChartDirector Support Forum Home   Search
Multipoint graphs with uneven X data points
Posted by Saqib Mahmood on Feb-02-2024 01:51
Hi
I m using Multipoint chart to show 2 graphs.
The first graphs shows 24 hours of data regarding the store temperature.
In this graphs, I have reading every 5 mins, making total 288 reading in 24 hours.
The X axis shows the time and Y shows the temperature reading.

The second graph shows when the reading was acknowledged in 24 hours and it has only 26 readings at random times of the day.

When I draw both graphs, my second graph shows all the readings in left side of the graph instead of showing on the right time according to the first graph  (in 24 hour range)

The 2, X axes are not in sync. Hw can I sync the 2 graphs X axes?

Re: Multipoint graphs with uneven X data points
Posted by Peter Kwan on Feb-02-2024 14:27
Hi Saqib Mahmood,

For "Multipoint graphs", do you mean one chart containing multiple line series?

In any case, to plot the two series at the correct position, you just need to provide the x-coordinates for the data points. The API is Layer.setXData.

The following is an example that does not use x-coordinates:

The following is an example that uses x-coordinates.

If you do not use Layer.setXData, the x-coordinates are assumed to be the array index 0, 1, 2, 3 ... If the x-axis is configured with labels (Axis.setLabels), the labels will be assumed to be at 0, 1, 2, 3, ... too. So the data points will match the labels.

If you data points are not evenly spaced like in the second example above, you need to provide x-coordinates for all of your data series. Furthermore, you cannot use Axis.setLabels. (The labels are just names with no meaning to the computer, so they cannot be used as coordinates, and their coordinates will be assumed to be 0, 1, 2, 3 ...) You can choose not to configure the x-axis, in which case the x-axis will be automatically scaled and labelled similar to the y-axis. Alternative, you can configure the x-axis using Axis.setLinearScale, Axis.setLogScale or Axis.setDateScale.

Best Regards
Peter Kwan

Re: Multipoint graphs with uneven X data points
Posted by Saqib Mahmood on Feb-05-2024 22:14
Hi Peter,
I m talking Multi chart as this one

Not multi point line or multi line series in single chart.

So if x points are uneven in the charts, how to align the x axis to be matched in all charts?

Re: Multipoint graphs with uneven X data points
Posted by Peter Kwan on Feb-05-2024 23:10
Hi Saqib,

The example you quoted in your message demonstrates how to synchronize the x-axis among charts. The code it uses is:

c.xAxis().copyAxis(xAxisScale);

The above code synchronize the x-axis of chart c with another axis (the xAxisScale is an Axis object), and in the sample code the other axis is the x-axis of the first chart.

In your code, it may be like secondChart.xAxis().copyAxis(firstChart.xAxis());

Hope this can help.

Regards
Peter Kwan

Re: Multipoint graphs with uneven X data points
Posted by Peter Kwan on Feb-05-2024 23:15
Hi Saqid.

Note that in any case, you would need to provide x-coordinates for your data (Layer.setXData should be used), and the x-axis must not be configured using labels (Axis.setLabels should not be used). You can let ChartDirector auto-scale the x-axis, or you can configure the x-axis scale of the first chart using Axis.setLinearScale or Axis.setDateScale.

Best Regards
Peter Kwan

Re: Multipoint graphs with uneven X data points
Posted by Max on Feb-06-2024 14:15
Attachments:
Even setting the c.xAxis().setDateScale(mindate, maxdate) didnt fix the problem.
The 2 scales are off and not aligned. See attached.
The second graph should be aligned to the first one.

Re: Multipoint graphs with uneven X data points
Posted by Peter Kwan on Feb-07-2024 03:21
Attachments:
Hi Max,

If your code is based on the Real-Time MultiChart sample code, I found out there is a bug in the sample code. It does not affect the original sample code, but affect certain modification of the sample code.

In the original sample code, there are the following lines:

if (xAxisScale == null) {
// If xAxisScale is given, then use it to synchronize with other charts.
c.xAxis().copyAxis(xAxisScale);
......

It should be:

if (xAxisScale != null) {
// If xAxisScale is given, then use it to synchronize with other charts.
c.xAxis().copyAxis(xAxisScale);
......

With the original code, the chart scales may not be synchronized correctly.

Attached please find my test code (based on ASP.NET Web Forms) and the resulting chart. The first chart contains 5 minute data for 24 hours. The second chart are randomly spaced data points.

Best Regards
Peter Kwan
 multichart_test.aspx5.97 Kb

Re: Multipoint graphs with uneven X data points
Posted by Max on Feb-07-2024 09:18
That worked. I also wondered if the code was correct.
And it seems we also dont need c.xAxis().setDateScale