|
 Zooming Auto-Scaled Dynamic Data Set |
| Posted by Steven on Feb-19-2013 22:10 |
|
I am having an issue with an XYChart that graphs a dynamic set of data (time based) that is controlled via a custom attribute.
I am using ChartDirector ColdFusion and attempting to use partialUpdates since I would like asynchronous reloads.
When my initial page loads, the data is loaded for 12 hours worth of data. Using the examples, I enabled zooming and tracking and the viewport works properly. The problem arises when I modify my custom attribute to cause 24 hours of data to load. The graph does not change (presumably preserving my current viewport). I cannot get the graph to update unless I eliminate the syncDateAxisWithViewPort call or set a range for the viewer using setFullRange. I can get this to work, but would prefer to use the autoscaling that ChartDirector provides.
Here is the code that does not work:
...
c.xAxis().setAutoScale(0,0,0);
c.yAxis().setAutoScale(0.2,0.2,0);
viewer.syncDateAxisWithViewPort("x", c.xAxis());
viewer.syncLinearAxisWithViewPort("y", c.yAxis());
chart1URL = c.makeSession(GetPageContext(), viewer.getId(), cd.PNG);
// Set the chart URL to the viewer
viewer.setImageUrl("getchart.cfm?" & chart1URL);
// Output Javascript chart model to the browser to support tracking cursor
viewer.setChartModel(c.getJsChartModel());
viewer.setChartMetrics(c.getChartMetrics());
The following code allows the chart to change its overall data range, but zooming does not function (for obvious reasons):
...
c.xAxis().setAutoScale(0,0,0);
c.yAxis().setAutoScale(0.2,0.2,0);
//viewer.syncDateAxisWithViewPort("x", c.xAxis());
//viewer.syncLinearAxisWithViewPort("y", c.yAxis());
chart1URL = c.makeSession(GetPageContext(), viewer.getId(), cd.PNG);
// Set the chart URL to the viewer
viewer.setImageUrl("getchart.cfm?" & chart1URL);
// Output Javascript chart model to the browser to support tracking cursor
viewer.setChartModel(c.getJsChartModel());
viewer.setChartMetrics(c.getChartMetrics());
The following code works fully, but does not take advantage of the autoscaling feature:
viewer.setFullRange("x", minMax.lowDate, minMax.highDate);
totalVal = (minMax.highValue-minMax.lowValue)/0.60;
extVal = totalVal-(minMax.highValue-minMax.lowValue);
halfExtVal = extVal/2;
viewer.setFullRange("y", minMax.lowValue-halfExtVal, minMax.highValue+halfExtVal);
viewer.syncDateAxisWithViewPort("x", c.xAxis());
viewer.syncLinearAxisWithViewPort("y", c.yAxis());
chart1URL = c.makeSession(GetPageContext(), viewer.getId(), cd.PNG);
// Set the chart URL to the viewer
viewer.setImageUrl("getchart.cfm?" & chart1URL);
// Output Javascript chart model to the browser to support tracking cursor
viewer.setChartModel(c.getJsChartModel());
viewer.setChartMetrics(c.getChartMetrics());
Any insight into the issue would be greatly appreciated! |
| Re: Zooming Auto-Scaled Dynamic Data Set |
| Posted by Peter Kwan on Feb-20-2013 00:25 |
|
Hi Steven,
The syncDateAxisWithViewPort means ChartDirector should set the axis scale as the region that the user has selected. To do this, ChartDirector must know the "full range". If the "full range" has not yet been defined, ChartDirector will use auto-scaling and the current data to determine what the "full range" should be.
For example, if initially your code provides 4 hours of data to ChartDirector, and configures the view port width to be 0.25 (25%), then ChartDirector will assumes 4 hours is 25% of the data, and the full range must be 16 hours. If the view port width has never been configured, it defaults to 100%, which means ChartDirector will assume the full range is 4 hours.
If you want ChartDirector to forget about the previous established full range, you may use:
viewer.setFullRange("x", 0, 0);
ChartDirector will then act as if the "full scale" has not yet been defined, and use auto-scaling and the current view port configuration to determine the "full scale".
I am not too sure what you want your user interface to behave. One possible method is like (in pseudo code):
if (... full data range is changed) {
// reset the full scale and the view port
viewer.setFullRange("x", 0, 0);
viewer.setViewPortWidth(1);
viewer.setViewPortLeft(0);
}
Personally, if the "full range" keeps changing, using your own code to set the full range should be an acceptable method. Some of the sample code in ChartDirector also use this method.
If you would like obtain the max/min by auto-scaling, one method is to create another dummy chart, feeds in the same data, calls BaseChart.layout, and use Axis.getMinValue and Axis.getMaxValue to obtain the resulting scale. You can then use the scale in your real chart.
Hope this can help.
Regards
Peter Kwan |
| Re: Zooming Auto-Scaled Dynamic Data Set |
| Posted by Steven on Feb-20-2013 00:29 |
|
| That worked perfectly! Thanks for your quick response. |
| Re: Zooming Auto-Scaled Dynamic Data Set |
| Posted by Steven on Feb-20-2013 04:06 |
|
I spoke slightly pre-maturely. This seems to work okay at first glance - you can zoom properly and then change the dataset and the auto-scaling updates perfectly. However, if you call the viewer.setFullRange("x", 0, 0) function once in a partial update, the zooming functionality no longer works ever again until a full page refresh is done.
Ideas? |
| Re: Zooming Auto-Scaled Dynamic Data Set |
| Posted by Steven on Feb-28-2013 19:28 |
|
I've still not figured out how to accomplish this without keeping two copies of the graph. Is
that the only solution? |
| Re: Zooming Auto-Scaled Dynamic Data Set |
| Posted by Peter Kwan on Mar-01-2013 00:40 |
|
Hi Steven,
Sorry. I forgot to respond to your last enquiry.
After some testing myself, I found the same result as your case, that is, zooming and scrolling no longer works after setFullRange("x", 0, 0) in partialUpdate. To solve the problem, I have to add the following code after the makeSession line:
if (... full data range is changed ...)
// Set the full range to the auto-scaled range
viewer.setFullRange("x", c.xAxis().getMinValue(), c.xAxis().getMaxValue());
I have attached my test code for your reference, which is based on the "Simple Zooming and Scrolling" sample code, modified so that the user can switch between 1000 and 2000 days of full range.
Hope this can help.
Regards
Peter Kwan
|
|
Forum Home
Search
Message List
Post Message
(Peter Kwan)