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

PHP Charts & Graphs
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.