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

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.