JavaScript charts | How to use
Implementation
-
Easy. We begin with the header of course.
There is only one Javascript file to be included, it contains the main code and canvas functions compatible with Internet Explorer 6, 7 and 8.
<script type="text/javascript" src="jscharts.js"></script>
Fig. 1 - Example of how to include the script files into the <HEAD> section of your pageJscharts.js contains the main library for the charts and code to easily "draw" text over the graphic chart and canvas functions required by Internet Explorer (implemented natively in Firefox, Opera or Safari).
-
Container
The second step is to prepare the container which will hold one chart. This can be a simple <DIV> tag. It is mandatory for this tag to have a unique ID set.
<div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div>
Fig. 2 - Container exampleThe container's content will be replaced by JSCharts.
-
First chart
Next, a three line Javascript code is needed for your first chart. First, the chart data are prepared, a simple array contains other arrays, each of two elements. Each of these two-element arrays will represent one point in a line graphic, or one bar in a bar chart, or a pie section in a pie chart. For the bar and pie chart, the array's elements are a unit name and a value, and for the line charts the elements represent two values.
This data is stored in the myData variable as in the following example.
<script type="text/javascript"> var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]); var myChart = new JSChart('chartcontainer', 'line'); myChart.setDataArray(myData); myChart.draw(); </script>Fig. 3 - A simple line chartSecond line initializes the chart by providing the container ID, the chart type (possible values are line, bar and pie).
Third line introduces the data to the JSChart object.
And finally the fourth line executes the chart drawing.
<script type="text/javascript"> var myData = new Array(['unit', 20], ['unit two', 10], ['unit three', 30], ['other unit', 10], ['last unit', 30]); var myChart = new JSChart('chartcontainer', 'bar'); myChart.setDataArray(myData); myChart.draw(); </script>Fig. 4 - Bar type chart; observe the data array format<script type="text/javascript"> var myChart = new JSChart('chartcontainer', 'bar'); myChart.setDataXML('data.xml'); myChart.draw(); </script>Fig. 5 – Pie type chart using an XML file for data inputAbove are two examples for bar and pie type charts. In the last example, an XML file was used to input the data intro the JSChart object.
The XML file must have an exact format:
<?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> </JSChart>
Fig. 6 – XML file exampleThe main node must be named JSChart. The child nodes can be dataset, colorset and optionset. In the above example only the dataset is used, since it is the only mandatory child node. The dataset must define the chart type (line in the above example) and must contain all the chart data. The unit and value correspond to the array pair in the previous example. Colorset and optionset are described in the Customization chapter.
For more details on public methods see Reference.