JavaScript charts | How to use


Implementation | Multiple data | Customization | Reference | Line charts | Bar charts | Pie charts

Multiple data series

Multiple series of data can be used in line and bar type charts only. In the example below the setDataArray method is called twice with different arrays of data. The second argument is optional and can be used to target customization options (described in the Customization chapter). 

<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, 'line_1');
	myChart.setDataArray(myData2, 'line_2');
	myChart.draw();
</script>
Fig. 2.1 - Line chart with two series of data

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" id="line_1">
		<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" id="line_2">
		<data unit="10" value="10"/>
		<data unit="15" value="5"/>
		<data unit="25" value="25"/>
		<data unit="30" value="20"/>
	</dataset>
</JSChart>
Fig. 2.2 - XML for line chart with two series of data 
{
	"JSChart" : {
		"datasets" : [
			{
				"id" : "line_1",
				"type" : "line",
				"data" : [
					{
						"unit" : "10",
						"value" : "20"
					},
					{
						"unit" : "15",
						"value" : "10"
					},
					{
						"unit" : "20",
						"value" : "30"
					},
					{
						"unit" : "25",
						"value" : "10"
					},
					{
						"unit" : "30",
						"value" : "5"
					}
				]
			},
			{
				"id" : "line_2",
				"type" : "line",
				"data" : [
					{
						"unit" : "10",
						"value" : "10"
					},
					{
						"unit" : "15",
						"value" : "5"
					},
					{
						"unit" : "25",
						"value" : "25"
					},
					{
						"unit" : "30",
						"value" : "20"
					}
				]
			}
		]
	}
}
Fig. 2.3 - JSON for line chart with two series of data

The setDataArray method must be called for every line in the chart. When using multiple series in a bar chart, the new data is added in the following way: 

<script type="text/javascript">
	var myData = new Array(['Unit_1', 20, 10], ['Unit_2', 10, 11], ['Unit_3', 30, 35], ['Unit_4', 10, 25], ['Unit_5', 5, 15]);
	var myChart = new JSChart('chartcontainer', 'bar');
	myChart.setDataArray(myData);
	myChart.draw();
</script>
Fig. 2.4 - Bar chart with multiple bars per unit 
<?xml version="1.0"?>
<JSChart>
	<dataset type="bar">
		<data unit="10" value="20,10"/>
		<data unit="15" value="10,11"/>
		<data unit="20" value="30,35"/>
		<data unit="25" value="10,25"/>
		<data unit="30" value="5,15"/>
	</dataset>
</JSChart>
Fig. 2.5 - XML for previous bar chart

The number of data series which can be added in the chart is not limited.

For more details on public methods see Reference.