|
Multichart + Track Line chart |
Posted by mephy on May-01-2015 16:44 |
|
Hello!
I'm trying to make TrackLine work with multichart.
But, despite the fact I'm giving multi_viewer object to JS - methods
c.getPlotArea() and getLayerCount() return values of first chart in the row.
How can I make it work with whole multi chart?
My code (PHP):
//this part works fine
$m = new MultiChart(600, 300);
$m->addChart(0, 0, $c_total);
$m->addChart(0, 100, $c_msgi);
$m->addChart(0, 200, $c_skl);
$viewer_multi = new WebChartViewer("chart_multi");
$chartQuery_multi = $m->makeSession($viewer_multi->getId());
$viewer_multi->setImageUrl("getchart.php?".$chartQuery_multi);
$viewer_multi->setChartModel($m->getJsChartModel());
//js - as in example
JsChartViewer.addEventListener(window, 'load', function() {
var viewer = JsChartViewer.get('<?php echo $viewer_multi->getId()?>');
// Draw track cursor when mouse is moving over plotarea. Hide it when mouse leaves
plot area.
viewer.attachHandler("MouseMovePlotArea", function(e) {
trackLineLabel(viewer, viewer.getPlotAreaMouseX());
viewer.setAutoHide("all", "MouseOutPlotArea");
});
});
function trackLineLabel(viewer, mouseX)
{
// The chart and its plot area
var c = viewer.getChart();
var plotArea = c.getPlotArea().getBottomY(); //<---- returns 100px, not 300px!
Thank you.
Best regards, mephy |
Re: Multichart + Track Line chart |
Posted by Peter Kwan on May-02-2015 03:49 |
|
Hi mephy,
In a MultiChart, you can have multiple chart types and they can be at various positions.
For example, you can have a line chart at the top-left, a bar chart at the bottom-right
with different x-axis scale, a pie chart as the top-right and a meter at the bottom-left.
So there are two issues: The charts can also overlap.
(a) Which region will trigger the "MouseMovePlotArea" event?
By default, the entire MultiChart surface (even the regionthat are empty) will trigger the
MouseMovePlotArea event. You can specify the plot area of one of the charts to trigger
the MouseMovePlotArea by using MultiChart.setMainChart. Setting
MultiChart.setMainChart to the MultiChart itself will cause the bounding box of the plot
areas of all the charts to trigger the MouseMovePlotArea event. The last method is used
by ChartDirector in the financial charts.
(b) How to get the charts?
Because each chart can be at different positions and have different x-axis scale, the API
does not assume a single vertical line can be used for all the charts. Instead, the
viewer.getChart(N) (where N = 0, 1, 2, 3, ....) should be used to get the charts
individually to draw on them. Also, a the chart within the MultiChart is at an offseted
position, you need to use c.getAbsOffsetX() and c.getAbsOffsetY() to get their x and y
offsets and add them to the coordinates.
The "Finance Chart Track Line" sample code is an example on how to draw track lines in a
MultiChart. (The FinanceChart is a MultiChart.) May be you can use it as a reference.
Hope this can help.
Regards
Peter Kwan |
|