TeeChart for Javascript. Getting Started Guide
First steps. Creating a Chart
1) Add the TeeChart script to your html page, preferabily at <head> tag:
<script src="http://steema.us/files/jscript/src/teechart.js" type="text/javascript"></script>
2) Add the html5 canvas tag to display the chart:
<canvas id="canvas" width="300" height="200">
This browser does not seem to support HTML5 Canvas.
</canvas>
3) Add code to create a Chart with sample data:
<script type="text/javascript">
function draw() {
Chart1=new Tee.Chart("canvas");
Chart1.addSeries(new Tee.Pie([5,3,2,7,1]) );
Chart1.draw();
}
</script>
4) Call the draw() function from the appropiate place, for example at body "onload" event:
<body onload="draw()">
The resulting output chart is:
The above code does the following:
- Creates a Chart object, passing the canvas "id" as a parameter.
- Calls the Chart addSeries method, passing a new "Pie" series object, filled with an array of data numbers.
- Calls the Chart draw() method to generate and display the chart into "canvas".
Notes:
- The "Tee." prefix refers to all contents inside TeeChart.js script. This prefix is necessary to avoid conflicts with potentially equal named global namespace objects.
- The canvas "id" parameter can also be a DOM object, for example: "new Tee.Chart(document.getElementById("canvas"))".
- In this limited version, available series styles are "Line", "Bar", "HorizBar", "PointXY", "Area", "HorizArea", "Pie", "Donut" and "Bubble".
- Many series can be added and mixed to the same chart, but mixing Pie or Donut with non-circular styles might not be visually pleasant.
Chart main properties and classes
For a complete reference of TeeChart API, please follow this link
The Chart object includes the following properties and sub-objects:
- Chart1.series, a list of Tee.Series derived objects, like Line, Bar, Pie, etc.
Series objects are used to group and display data values, and many of them can be added to the same chart.
Several ways to create a series using the Tee.Series constructor:
Empty series, passing Chart parameter: var Series1 = new Tee.Line(Chart1);
Create and fill with data: var Series1 = Tee.Line(Chart1, [1,2,3,4,5]);
- Chart1.title, to show text at the upper side.
- Chart1.footer, to show text at the bottom side.
- Chart1.legend, to show the list of series or a given series list of values.
- Chart1.axes, a sub-object with four axes: Left, Top, Right and Bottom.
- Chart1.panel, defines the chart background properties.
- Chart1.walls, a sub-object with four walls: Left, Bottom, Right and Back.
- Chart1.tools, a list of Tee.Tool derived objects, like CursorTool or Annotations.
- Chart1.zoom, properties to control mouse/touch drag, to zoom the chart axes.
- Chart1.scroll, properties to control mouse/touch drag, to scroll chart contents.
- Chart1.aspect, a sub-object with properties to control canvas parameters.