Raphael Analytics Line Chart with Multiple Data
Pull request Compare This branch is 52 commits ahead, 7 commits behind wes:master.
Latest commit c03d919 May 15, 2012 @n0nick upping a version, a year
Failed to load latest commit information.
css code cleanup. May 15, 2012
js upping a version, a year May 15, 2012
.gitignore .gitignore demo/ folder (contains gh-pages branch) May 24, 2011
GPL-LICENSE.txt updating gh-pages website May 24, 2011
MIT-LICENSE.txt upping a version, a year May 15, 2012
README.md add data_index option to settings Aug 8, 2011
index.html using raphael 2.1.0 from cdnjs, instead of github trunk May 15, 2012


Raphaël Line Charts Plugin

This plugin is a result of frustration from current client-side charting solutions.
I needed something simple that would draw a line chart in SVG based on a table in a page, be customizable enough and allow me to change the data set on demand. I couldn't find one.
So here goes.

This plugin relies heavily on the wonderful Raphaël JavaScript SVG library.
It is also a (quite extensive) fork of we's Beautiful Analytics Chart project.

To download and contribute (please do!), check out the project on GitHub.


The concept for the code is dervied from the Raphael Analytics example.

  • Draws a line chart with custom design for a given set of data.
  • Framework agnostic (only requirement is Raphael).
  • Semantic use of the document: data is loaded from a table element.
  • Ability to change data source (updating the chart).
  • Custom display of X & Y axis labels.



Include it.

<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/raphael/1.5.2/raphael-min.js"></script>
<script type="text/javascript" src="js/raphael_linechart.js"></script>

Give it data.

Provide the plugin with either:

  • A table element (the DOM element or just its id) using a specific structure:
<div id="line-chart-holder"></div>
<table id=&quot;d1&quot; style="display: none;">
    <tbody class="data">
    <tbody class="line1">
            <td>70 Views</td>
            <td>70 Views</td>
            <td>210 Views</td>
            <td>490 Views</td>
    <tbody class="line2">
            <td>Mar 2nd 2011</td>
            <td>Mar 3rd 2011</td>
            <td>Mar 9th 2011</td>
            <td>Mar 16th 2011</td>
  • A data object with four arrays: labels, values and info lines 1 & 2:
data = {
    labels: ['3/02', '3/03', '3/09', '3/16'],
    data: [70, 70, 210, 490],
    lines1: ['70 Views', '70 Views', '210 Views', '490 Views'],
    lines2: ['Mar 2nd 2011', 'Mar 3rd 2011', 'Mar 9th 2011', 'Mar 16th 2011']
  • A data object with the same structure, but with array lists for the values and info lines. The first list would be immediately used, and you can then switch data object to display by passing the array index (see Dance).
data = {
    labels: ['3/02', '3/03', '3/09', '3/16'],
    data: [[70, 70, 210, 490], [690, 320, 440, 415]],
    lines1: [['70 Clicks', '70 Clicks', '210 Clicks', '490 Clicks'], ['690 Views', '320 Views', '440 Views', '415 Views']],
    lines2: [['Mar 2nd 2011', 'Mar 3rd 2011', 'Mar 9th 2011', 'Mar 16th 2011'], ['Mar 2nd 2011', 'Mar 3rd 2011', 'Mar 9th 2011', 'Mar 16th 2011']]

Call it.

<script type="text/javascript">
   window.onload = function(){
      var w = 840; // you can make this dynamic so it fits as you would like
      var paper = Raphael('line-chart-holder', w, 250); // init the raphael obj and give it a width plus height
         data_holder: 'd2', // find the table data source by id
         width: w, // pass in the same width
         show_area: true, // show the area
         x_labels_step: 3, // X axis labels step
         y_labels_count: 5, // Y axis labels count
         mouse_coords: 'rect', // rect (uses blanket mode) | circle (pinpoints the points)
         colors: {
           master: '#01A8F0' // set the line color


If you'd like, you can tell the plugin to change the dataset it's displaying. You can either pass a new table element, a new data object or an index (if you used the objects array method). The chart would magically move to the new spot, using a configurable Raphaël animation.

// switch to the table with id = table1
paper.lineChart('setDataHolder', 'table1');

// switch to a DOM element
var elm = $('table1');
paper.lineChart('setDataHolder', elm);

// switch to a new data object
paper.lineChart('setData', data);

// switch to second item in previously given data array object.
paper.lineChart('setDataIndex', 1);


The lineChart() plugin will accept a list of arguments in a json style format.

var opts = {
        data_holder: null, // table element holding the data to display
        data: null,        // or the data object itself
        data_index: 0,     // index of initial data array to use
        width: 500,
        height: 250,
        // chart gutter dimension
        gutter: {
            top: 20,
            right: 0,
            bottom: 50,
            left: 30
    // whether to fill the area below the line
    show_area: false,
    // way to capture mouse events
    mouse_coords: "rect",
    // whether to display background grid
    no_grid: false,
    // X axis: either false or a step integer
    x_labels_step: false,
    // Y axis: either false or a labels count
    y_labels_count: false,
    // animation (on data source change) settings
    animation: {
        speed: 600,
        easing: "backOut"
    // color settings
    colors: {
        master: "#01A8F0",
        line1: "#000000",
        line2: "#01A8F0",
    // text style settings
    text: {
        axis_labels: {
            font: "10px Helvetica, Arial",
            fill: "#000000"
        popup_line1: {
            font: "bold 11px Helvetica, Arial",
            fill: "#000000"
        popup_line2: {
            font: "bold 10px Helvetica, Arial",
            fill: "#000000"

r.lineChart(opts); // draw the line chart in an initiated Raphael object


The plugin is dual-licensed under the GNU General Public License and the MIT License.