Beautiful Analytics Chart

Ever wanted a really great line chart that is simple and unobtrusive?
There are many options out there, this is just another option.

Leave your comment on the blog post.

Check out the project on github.

About

This is derived from a raphael example, rewritten to use prototype and support a few more configurations. My overall goal with this line chart was to create a simple and easy to use library that can create great looking line charts. After seeing raphael's example, I knew this was the perfect place to start.

Requirements

Installation and Usage

Step 1.
You must first include prototype, raphael and the analytics library. 

				
<script type='text/javascript' src='js/lib/prototype.js'></script>
<script type='text/javascript' src='js/lib/raphael.js'></script>
<script type='text/javascript' src='js/analytics.js'></script>

Step 2.
Create your holding div and table data templates as below or see example download. 

				
<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>

Step 3.
Call the drawLine() function to create your line chart. 

				
<script type='text/javascript'>
	Element.observe(window,'load', function(){
		var w = 840; // you can make this dynamic so it fits as you would like
		var linechart = Raphael('line-chart', w, 250); // init the raphael obj and give it a width plus height
		drawLine({ // call the drawLine function
			holder: linechart, // pass through the raphael obj
			data_holder: 'd2', // find the table data source by id
			mastercolor: '#01A8F0', // set the line color
			spewidth: w, // pass in the same width
			showarea: true, // show the area
			mousecoords: 'rect' // rect (uses blanket mode) | circle (pinpoints the points)
		});
	});
</script>

Documentation

The drawLine() function will accept a list of arguments in a json style format.

			
var opts = {
	holder: '', // id of div holder
	data_holder: '', // id of table data holder
	mastercolor: '', // line color ex: #ff0000
	spewidth: '', // width in pixels
	showarea: '', // bool to show the area of the line
	linecolor1: '', // color of the line1 in popup
	linecolor2: '', // color of the line2 in popup
	mousecoords: '', // selection of mouseover | rect (default), circle 
	nogrid: '' // bool hide grid override.. grid be drawn once for every line chart holder
}

drawLine(opts); // draw the line chart

Download

Download Analytics JS File (8kb) Min

Download Full Example (225kb) Zipped

Extras

You can add a little css to give the charts depth and page like feel.

				
.box {
margin: 0;
padding: 0;
clear: both;
overflow: hidden; 
}

.rotate_r { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); }
.rotate_l { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); }

.box .inner {
list-style-type: none;
margin: 0 30px 30px 0;
padding: 14px 0 0 15px;
width: 850px;
height: 250px;
border: 0;
position: relative;
float: left;
background: #fafafa;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(100, 100, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

Then make sure it has some html wrapping the holding container.

				

<div class='box rotate_l'>
	<div class='inner'>
		<div id='line-chart'></div>
	</div>
</div>

Thanks!

I just wanted to say thanks to Dmitry Baranovskiy at Raphael JS, for supplying such an awesome example. Also Nic Knight for helping me test and abstract the changes overall.