Fork me on GitHub

You are here

Documentation

Documentation available



Quick start

Step 1: Add required libraries

You should add all required libraries to HEAD section of pages where you want to use charting abilities.

This way:

<head>
...
  <script src="jquery.js" type="text/javascript"></script>
  <script src="raphael.js" type="text/javascript"></script>
  <script src="elycharts.js" type="text/javascript"></script>
  ...
</head>

Note: Include only libraries not in your previous HEAD section, and add to SRC attribute the correct path to locate javascript files in your installation.

Step 2: Basic usage

Let's start with a very simple example, just to to familiarize with the library.

Every chart must have an HTML element container (usually a <DIV> tag). This element defines the space and the dimensions of the graph.

With a call to the jQuery function "chart" you'll simply draw the chart

<div id="chart"></div>
<script type="text/javascript">
  $('#chart').chart({ type : 'line' /*HI*/, values : { serie1 : [1, 2, 3, 4], serie2 : [1, 2, 3, 4] } });
</script>

Step 3: Let's make it nice

We can add several configuration parameters to get a nicer chart, with colours, grid and labels printed.

And we can specify tooltips too (Note: tooltips can go outside the chart boundaries).

$('#chart').chart({ type : 'line', labels : [ 'a', 'b', 'c', 'd' ], tooltips : { serie1 : [ 'a', 'b', 'c', 'd' ], serie2 : [ 'a', 'b', 'c', 'd' ] }, values : { serie1 : [1, 2, 3, 4], serie2 : [1, 2, 3, 4]}, margins : [10, 10, 20, 50], series : { serie1 : { color : 'red' }, serie2 : { color : 'blue' } }, defaultAxis : { labels : true }, features : { grid : { draw : true, forceBorder : true } } });

Step 4: Use templates!

A template is only a set of options we should merge with current ones.

It can be used, for example, to separate chart layout definition and chart data.

$('#chart').chart({ template : 'line_basic', tooltips : { serie1 : [ 'a', 'b', 'c', 'd' ], serie2 : [ 'a', 'b', 'c', 'd' ] }, values : { serie1 : [1, 2, 3, 4], serie2 : [1, 2, 3, 4]}, legend : { serie1 : "Serie 1", serie2: "Serie 2" } });