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

Message ListMessage List     Post MessagePost Message

  Multi-Chart example
Posted by Mark on Mar-19-2008 23:42
| Reply | Monitor
I want to stack two charts having the same x-axis (BarChart on top and an XYChart
underneath).  For this I use MultiChart, but I'm having trouble and the only examples I can
find are for FinanceChart, which is quite different.  Where can I find some example code
on how to *properly* use the MultiChart capabilities?

Mark

  Re: Multi-Chart example
Posted by Peter Kwan on Mar-20-2008 12:19
| Reply | Monitor
Hi Mark,

An MultiChart example is like:

//create a container 800 x 600 in size
MultiChart m = new MultiChart(800, 600);

//insert first XYChart at (0, 0)
m.addChart(0, 0, xyChart1);

//insert second XYChart at (0, 300)
m.addChart(0, 300, xyChart2);

//output chart as usual
viewer.setImage(m.makeImage());

As you can see above, there is nothing special in using the MultiChart.

In your case, I think the key step is to ensure your two XYChart objects are what you need. For example, the top chart should be configured with the x-axis hidden, like:

XYChart xyChart1 = new XYChart(800, 300);
xyChart1.setPlotArea(50, 50, 720, 250, ........);

Note that the entire chart is 300 pixels high, and the plot area top is at y = 50, and its height is 250. So the x-axis, which is below the plot area, it outside the chart.

Similarly, the bottom chart should be configured with the plot area starts at y = 0, so that it touches the top chart (if this is what you want).

Also, if the two charts touch each others, you may want to add margins to the y-axis, otherwise the bottom y-axis label of the top chart will overlap with the top y-axis label of the bottom chart.

xyChart1.yAxis().setMargin(10, 10);
xyChart2.yAxis().setMargin(10, 10);

Needless to say, if you want the two charts to have the same x-axis scale, it needs to use the same x-axis labels or x coordinates, even if the x-axis is not really visible for the top chart.

Finally, if the top chart is a bar chart, which is with an "indented" axis, and the bottom chart is a line or area chart, you may need to set the x-axis to indented explicity:

xyChart2.xAxis().setIndent(true);

Hope this can help.

Regards
Peter Kwan

  Re: Multi-Chart example
Posted by Mark on Mar-21-2008 02:28
| Reply | Monitor
Awesome!  These are exactly the kinds of tips I was looking for!  Some of these tips are
not obvious, so if you could convert your previous response to me into an example in your
documentation, it would help others in the furture without the need to contact you
directly...

Thanks for the help!

Mark

  Re: Multi-Chart example
Posted by Peter Kwan on Mar-21-2008 13:17
| Reply | Monitor
Hi Mark,

Thanks a lot for your valuable suggestion. We will consider this in the next version of ChartDirector.

Regards
Peter Kwan