Tag Archives: Real Time

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);

Live demo

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.

https://phpchart.com/phpChart/examples/dynamicplot.php

Top

Clicky