Raphael Line Charts

linechart-call.html

<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', w, 250); // init the raphael obj and give it a width plus height
      paper.lineChart({
         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
         colors: {
           master: '#01A8F0' // set the line color
         }
      });
   };
</script>

linechart-dance.js

// 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);

linechart-data-array.js

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']]
}

linechart-data-object.js

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']
}

linechart-data-table.html

<div id="line-chart-holder"></div>
<table id="d1" style="display: none;">
   <tfoot>
      <tr>
         <th>3/02</th>
         <th>3/03</th>
         <th>3/09</th>
         <th>3/16</th>
      </tr>
   </tfoot>
<tbody class="data">
   <tr>
      <td>70</td>
      <td>70</td>
      <td>210</td>
      <td>490</td>
   </tr>
</tbody>
<tbody class="line1">
   <tr>
      <td>70 Views</td>
      <td>70 Views</td>
      <td>210 Views</td>
      <td>490 Views</td>
   </tr>
</tbody>
<tbody class="line2">
   <tr>
      <td>Mar 2nd 2011</td>
      <td>Mar 3rd 2011</td>
      <td>Mar 9th 2011</td>
      <td>Mar 16th 2011</td>
   </tr>
</tbody>
</table>

linechart-include.html

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

linechart-opts.js

var opts = {
		data_holder: null, // table element holding the data to display
		data: null,        // or the data object itself
		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,
	// 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