JS Charts User Guide
Introduction
JS Charts is a Javascript class used to draw charts using entirely client-side scripting. No
additional plugins are necessary. Just include our scripts, prepare your chart data in XML or
Javascript Array, and your chart is ready.
JS Charts allows you to draw different types of charts, like bars, pie charts or simple lines, and it
is highly customizable.
Implementation
1. 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 page
Jscharts.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).
2. 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 example
The container's content will
be replaced by JS Charts.
3. 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.
These data are 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 chart
Second line is the constructor and 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.
