Manipulating Series with Javascript

It’s possible to manipulate a graph that has already been rendered using javascript.

In the following example, the javascript function updatePoint is called to update series in the chart based on user input such as which series, changing X and Y values.

The series is then redrew using the jqPlot drawSeries function. Sounds complicated, but actually it’s very simple. The phpChart simply does the rendering and draw the chart. The javascript is used to interactively manipulate the graph by the user.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form action="#" onsubmit="return updatePoint();">
    Series: <select name="seriesId">
        <option value="0">lions</option>
        <option value="1">tigers</option>
        <option value="2">bears</option>
    </select>
    Point: <select name="pointId">
        <option value="0">first</option>
        <option value="1">second</option>
        <option value="2">third</option>
        <option value="3">fourth</option>
        <option value="4">fifth</option>
    </select>
    X: <input type="text" size="3" name="xvalue" />
    Y: <input type="text" size="3" name="yvalue" />
    <input type="submit" name="submit" value="Update" />
</form>

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript" lang="javascript">
    function updatePoint() {
        var f = document.forms[0];
        var seriesIndex = f.seriesId.selectedIndex;
        var series = _plot1.series[seriesIndex];
        var data = series.data[f.pointId.selectedIndex];
        var xval = parseFloat(f.xvalue.value);
        var yval = parseFloat(f.yvalue.value);
        data[0] = xval;
        data[1] = yval;
        _plot1.drawSeries({}, seriesIndex);
        return false;
    }
   
    function updateSeries() {
        _plot1.series[2].data = [[1,4], [2,6], [3,4], [4,1], [5,7]];
        _plot1.drawSeries({}, 2);
        return false;
    }
</script>

PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$l1 = array(2, 3, 1, 4, 3);
$l2 = array(1, 4, 3, 2, 5);
$l3 = array(7, 9, 11, 6, 8);

$pc = new C_PhpChartX(array($l1,$l2,$l3),'plot1');
$pc->add_plugins(array('highlighter'),true);

$pc->set_legend(array('show'=>true));
$pc->add_series(array('label'=>'lions'));
$pc->add_series(array('label'=>'tigers'));
$pc->add_series(array('label'=>'bears'));
$pc->draw(600,400);

Live demo

No related content found.

Tags:

Top

Clicky