Real Time Graph Update/Replotting
The graph can also be updated automatically using javascript without user intervention. This is useful to potting charts for situation where data points come from a continuous source such as stock and weather. The key is to use standard javascript setInterval function to set re-plotting interval.
Javascript (partial source. Only to demonstrate how setInterval is used. See live demo for complete source):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | function UpdateGraph() { StopGraphLoop(); interval = parseInt($('#interval').val()); npoints = parseInt($('#npoints').val()); maxIterations = parseInt($('#maxIterations').val()); niters = 0; GraphUpdate = setInterval(runUpdate, interval); } function runUpdate() { if (niters < maxIterations) { BuildDataArray(); Graph.series[0].data = GraphData; Graph.replot({resetAxes:true}); niters++; } else { StopGraphLoop(); } } function StopGraphLoop() { clearInterval(GraphUpdate); } |
PHP (partial)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $pc = new C_PhpChartX(array($GraphData),'Graph'); $pc->add_plugins(array('canvasTextRenderer','canvasAxisTickRenderer','canvasAxisLabelRenderer','highlighter','canvasOverlay','cursor','pointLabels'),true); $pc->set_title(array('text'=>'Test Data Run')); $pc->set_cursor(array('show'=>false)); $pc->set_point_labels(array('show'=>false)); $pc->set_highlighter(array('show'=>false)); $pc->set_axes_default(array( 'pad'=>0.05, 'labelRenderer'=>'plugin::CanvasAxisLabelRenderer', 'tickRenderer'=>'plugin::CanvasAxisTickRenderer', 'labelOptions'=>array('fontSize'=>'13pt') )); $pc->set_axes(array( 'xaxis'=> array('label'=> 'Number'), 'yaxis'=> array('label'=>'Value') )); // should be the last method to call $pc->draw(800,500); |
If you have an array of series of known data that needs to be displayed in sequence, instead of real-time replotting, check out the dynamic replotting example below. Scroll to the bottom and click on “Start” buttons to run the example.
