You are here
Documentation
Documentation available
- Quick start: First steps to use the library.
- Configuration API: Reference for all configuration keys.
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:
...
<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
<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).
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.