JavaScript charts | How to use
Multiple data series for line charts
Multiple series of data can be used in line type charts only. In the example below the setDataArray method is called twice with different arrays of data.
<script type="text/javascript">
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myData2 = new Array([10, 10], [15, 5], [25, 25], [30, 20]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.setDataArray(myData2);
myChart.draw();
</script>
Fig. 7 – Line chart with two series of data
The setDataArray method must be called for every line in the chart. Optionally, a second argument can be passed to the setDataArray method representing the name or id of the data set (this can be usefull in customizing the chart – more about it in the Customization chapter).
If using setDataXML to load the data, the XML file must contain multiple dataset blocks like in the below example:
<?xml version="1.0"?> <JSChart> <dataset type="line"> <data unit="10" value="20"/> <data unit="15" value="10"/> <data unit="20" value="30"/> <data unit="25" value="10"/> <data unit="30" value="5"/> </dataset> <dataset type="line"> <data unit="10" value="10"/> <data unit="15" value="5"/> <data unit="25" value="25"/> <data unit="30" value="20"/> </dataset> </JSChart>Fig. 8 – XML for line chart with two series of data
The number of data series which can be added in the chart is not limited. Using ids with XML datasets is also explained in the following chapters.
For more details on public methods see Reference.