JS Charts 3.0 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, JSON 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.
I. 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.
<script type="text/javascript" src="jscharts.js"></script>
Fig. 1.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. 1.2 - Container example
The container's content will be replaced by JS Charts.
3. First chart
Next, a few lines 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.
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. 1.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). The chart type here is overwritten by the settings found in the XML or JSON files if those are used.
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');
剩余27页未读，继续阅读
- 1
- 2
前往页