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

Message ListMessage List     Post MessagePost Message

  2 X-axis on an XY chart, associated with 2 datasets.
Posted by Richard Newmark on Jul-19-2012 17:46
| Reply | Monitor
Hi,
I'm wanting (using .jsp) to compare last months dataset (value / datetimes) with this months dataset (values / datetimes)  by using a XY chart with a Y axis on the left, an X axis along the bottom with last months datetimes and a X axis along the top with this months datetimes.

Is this possible? I've looked at the dual X-axis documenation / and similar questions on the forum ... but they don't seem to cover what I'm looking for... (they tend to look at enumerated datasets, rather than datetimes)

Can you give me a pointer as to what to do?  Many thanks?

  Re: 2 X-axis on an XY chart, associated with 2 datasets.
Posted by Richard Newmark on Jul-19-2012 18:39
| Reply | Monitor
This is as far as I have got... but obviously it doesn't work as I don't know know to associate dates3 with the top X-axis


<%@page import="ChartDirector.*" %>
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.util.*,java.text.*"%>
<%

double[] data2 = {1700, 3900, 2900, 4000};
SimpleDateFormat dateFormat  = new SimpleDateFormat("dd/MM/yyyy");

Date[] dates2 = new Date[] {
    dateFormat.parse( "01/01/2010" ),
    dateFormat.parse( "02/01/2010" ),
    dateFormat.parse( "03/01/2010" ),
    dateFormat.parse( "04/01/2010" )
};


double[] data3 = {500, 550, 670, 990};

Date[] dates3 = new Date[] {
    dateFormat.parse( "01/02/2010" ),
    dateFormat.parse( "02/02/2010" ),
    dateFormat.parse( "03/02/2010" ),
    dateFormat.parse( "04/02/2010" )
};


XYChart c = new XYChart(310, 310);
c.setPlotArea(50, 50, 200, 200);


c.yAxis().setTitle("").setAlignment(Chart.TopLeft2);
c.yAxis().setColors(0xcc0000, 0xcc0000, 0xcc0000);
LineLayer layer1 = c.addLineLayer(data2, 0xcc0000, "");
layer1.setXData (dates2);

c.xAxis().setDateScale(dateFormat.parse( "01/01/2010" ), dateFormat.parse( "04/01/2010" ));
c.xAxis2().setDateScale(dateFormat.parse( "01/02/2010" ), dateFormat.parse( "04/02/2010" ));



String chart1URL = c.makeSession(request, "chart1");


%>
<html>
<body style="margin:5px 0px 0px 5px">

<hr color="#000080">

<img src='<%=response.encodeURL("getchart.jsp?"+chart1URL)%>'
    usemap="#map1" border="0">

</body>
</html>

  Re: 2 X-axis on an XY chart, associated with 2 datasets.
Posted by Peter Kwan on Jul-20-2012 04:19
| Reply | Monitor
Hi Richard,

Based on your existing code, the fastest solution is to use dates2 as the x-coordinates for everything. For example, for data3, you may use something like:

LineLayer layer2 = c.addLineLayer(data3, 0x0000ff, "");
layer2.setXData (dates2);


I think for your chart type, you may consider to use the "day of month"  (a number from 1 to 31) as the x-coordinates instead of dates2 or dates3. You can imagine the chart have many lines, one for each month. You can use a legend box to identify the line (say, the legend box can be used to show that the "red line" is for Jan 2010, the "blue line" is for Feb 2010, and so on). Of course, you can also add multiple axes for the purpose of identifying the lines.

In general, people plot multiple lines in the same plot area so as to compare them. Therefore, the lines must share a common coordinate system (defined as the x coordinate in ChartDirector), otherwise there is no basis to compare them. In your case, the common coordinate system for is the day of month.

If I were to create a similar chart using the axes to identify the lines (instead of using a legend box), I may modify the code as follows:

double[] data2 = {1700, 3900, 2900, 4000};
double[] data3 = {500, 550, 670, 990};

XYChart c = new XYChart(310, 310);
c.setPlotArea(50, 50, 200, 200);

c.yAxis().setTitle("").setAlignment(Chart.TopLeft2);
c.yAxis().setColors(0xcc0000, 0xcc0000, 0xcc0000);
LineLayer layer1 = c.addLineLayer(data2, 0xcc0000, "01/2010");

LineLayer layer2 = c.addLineLayer(data3, 0x0000ff, "02/2010");

c.xAxis().setLineraScale(0, 3, 1);
c.xAxis().setLabelFormat("{={value}+1}/01/2010");

c.xAxis2().setLineraScale(0, 3, 1);
c.xAxis2().setLabelFormat("{={value}+1}/02/2010");

String chart1URL = c.makeSession(request, "chart1");

Hope this can help.

Regards
Peter Kwan

  Re: 2 X-axis on an XY chart, associated with 2 datasets.
Posted by richard.newmark on Jul-20-2012 16:03
| Reply | Monitor
Thanks for your answer, Peter, but for the example I used, I simplified the data too much..
In actuality, the data is a list of samples taken at random times ... sometimes 5x a day, sometimes more.  My customer is wanting to compare all last weeks data, with  all this weeks data,  or last Monday with this Monday etc.

I think I am going to have to massage the data to achieve this, so that the 2nd set of data has had their times adjusted to use the same X-axis

Had there been a statement like
layer2.setXData2 (dates3);

to match
layer1.setXData (dates2);
I would have been laughing!

Regards, Richard

  Re: 2 X-axis on an XY chart, associated with 2 datasets.
Posted by Peter Kwan on Jul-21-2012 00:38
| Reply | Monitor
Hi richard,

I assume dates3 and dates2 are both take at random times, so they are not synchornized and they may even contain different number of points. If I use numbers as examples (instead of dates), the dates2 can be [1, 4, 34, 7, 66], and dates3 can be [854.83, 3355.6, 12384.6]. But given these two series, there is no method to know how they can be matched. (I cannot assume the first and last points of the two series will match, as they are taken at "random times".)

So there must be an additional parameter to indicate how the series should match. In your case, this parameter is "a week". It means if dates3 is subtracted by 1 week, it would match with dates2. In ChartDirector, this can be represented as:

layer1.setXData (dates2);

//dates3 substract by 1 week is used to match with dates2
layer2.setXData(new ArrayMath(Chart.CTime(dates3)).sub(86400 *7).result());

(The ArrayMath is a utility and can be used to subtract a number from all elements in an array. The number being subtracted in the above code is 86400 * 7, which represents 7 days. 86400 is the number of seconds in 1 day.)

Hope this can help.

Regards
Peter Kwan

  Re: 2 X-axis on an XY chart, associated with 2 datasets.
Posted by richard.newmark on Jul-21-2012 14:59
| Reply | Monitor
Thanks Peter, that is what I will do. I'll be able to annotate the top X-axis with vc.xAxis2().setDateScale to reflect the actual time values of the adjusted second data set (and maybe I can get the trace tooltip to work to show value/unadjusted time.. I haven't tried to see how that behaves yet)