Javascript Charting Library




A Javascript charting library is a compilation of javascript code which helps you create charts in a browser. Here’s a list of 5 Javascript charting libraries that I had a chance to review :

(Each of the Javascript charting libraries reviewed below would offer its own custom functions to interact with the chart object. If a chart fits your need, you may want to read the chart library’s API documentation in greater detail. However, if you’re short on development time, this quick and dirty trick on how to update the charts using javascript irrespective of the charting library used may come in handy.)

Flotr Javascript Charting Library

Flotr is a javascript charting library structured on the Prototype Javascript Framework. Flotr makes attractive eye catching charts and is quite easy to use. There’s ample support for styling the chart. The charting library also provides interactive features like CSS styling, labels on axis, zooming and mouse movement tracking. Flotr is probably one of the best charting libraries out there.

javascript-charting-library-flotr

Put this in the HEAD

1
2
3
<!--[if IE]><script type="text/javascript" src="../flotr/lib/excanvas.js"></script>< ![endif]-->
<script type="text/javascript" src="../flotr/lib/prototype-1.6.0.2.js"></script>
<script type="text/javascript" src="../flotr/flotr-0.1.0alpha.js"></script>

Put this in the BODY

1
2
3
4
5
6
7
8
9
10
11
<div id="container" style="width:600px;height:300px;"></div>

<script type="text/javascript">
    var d1 = [];
    for(var i = 0; i < 14; i += 0.5)
    d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    var f = Flotr.draw($('container'), [ d1, d2 ]);
    });        
</script>

PlotKit Javascript Charting Library

javascript-charting-library-plotkitPlotKit is a Chart and Graph Plotting Library for Javascript. Supports HTML Canvas and SVG via Adobe SVG Viewer and native browser support. The PlotKit javascript charting library is quite simple to work with and a few lines of code will get you started.

Add this to the HEAD

1
2
3
4
5
</script><script type="text/javascript" src="/mochikit/MochiKit.js"></script>
<script type="text/javascript" src="/plotkit/Base.js"></script>
<script type="text/javascript" src="/plotkit/Layout.js"></script>
<script type="text/javascript" src="/plotkit/Canvas.js"></script>
<script type="text/javascript" src="/plotkit/SweetCanvas.js"></script>

Add this to the BODY

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function drawGraph() {
    var layout = new PlotKit.Layout("bar", {});
    layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
    layout.evaluate();
    var canvas = MochiKit.DOM.getElement("graph");
    var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
    plotter.render();
}
MochiKit.DOM.addLoadEvent(drawGraph);
</script><script>

Additional options will allow you to tinker around with the look and feel of the chart.

Google Javascript Chart Library

Probably the simplest of javascript charting libraries, the Google chart library needs just one single line of code.

Put this code anywhere in the BODY

Sample chart

1
2
3
4
5
6
<img class="alignright" src="http://chart.apis.google.com/chart?
chs=250x100
&amp;chd=t:60,40
&amp;cht=p3
&amp;chl=Hello|World"

alt="Sample chart" />

chs = Indicates the chart size in pixels
chd = Indicates the chart data points
cht = Is the chart type (Ex. p = pie chart, ls = line chart, bhs = bar chart, v = venn diagram)
chl = The chart label

JSCHART Javascript Charting Library

javascript-charting-library-jschartJS Charts is a free charting library based on JavaScript. JS Charts makes the task of drawing charts simple and easy, since you only have to use client-side scripting. No additional plugins or server modules are required. Just include our scripts, prepare your chart data in XML or JavaScript Array and your chart is ready!

Include this in the HEAD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
</script><script type="text/javascript" src="jscharts.js"></script>
[cc]

<div class="clear"></div>

<h3>Include this in the BODY</h3>
[cc lang="vb"]
<div id="chartcontainer"></div>
<script type="text/javascript">
    var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
    var myChart = new JSChart('chartcontainer', 'line');
    myChart.setDataArray(myData);
    myChart.draw();
</script>

Raphael Javascript Charting Library

Raphaël is a small JavaScript library that simplifies working with vector graphics on the web. If you want to create your own custom charts or want to crop images and rotate widgets, you can achieve it simply and easily with this library.

Add this to the HEAD

1
2
3
4
5
6
7
8
9
10
<script src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="analytics.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
            #holder {
                height: 250px;
                margin: -125px 0 0 -400px;
                width: 800px;
            }
</style>

Add this to the BODY

1
2
3
4
5
6
7
8
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

Yahoo YUI Library

YUI Library is another charting library which can help you create charts for web applications. However the charts are Falsh based chart and NOT pure Javascript. Just bear in mind that YVI charts are still experimental.

Add this to the BODY

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
YAHOO.example.monthlyExpenses =  
 [  
     { month: "January", rent: 880.00, utilities: 894.68 },  
     { month: "February", rent: 880.00, utilities: 901.35 },  
     { month: "March", rent: 880.00, utilities: 889.32 },  
     { month: "April", rent: 880.00, utilities: 884.71 },  
     { month: "May", rent: 910.00, utilities: 879.811 },  
     { month: "June", rent: 910.00, utilities: 897.95 }  
];  
   

 var myDataSource = new YAHOO.util.DataSource( YAHOO.example.monthlyExpenses );  
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;  
 myDataSource.responseSchema =  
 {  
     fields: [ "month", "rent", "utilities" ]  
};

Creating the chart

1
2
3
4
5
6
7
var mychart = new YAHOO.widget.LineChart( "chart", myDataSource,  
 {  
     xField: "month",  
     series: seriesDef,  
     yAxis: currencyAxis,  
     dataTipFunction: YAHOO.example.getDataTipText  
 });

How to make the javascript chart update without page refresh

Before we go in further, in most cases you would want the charts to get updated when the values change, either by user action or new data being available. You can play around with each of the charting libraries provided below and see which ones allow you to make changes to chart on the fly. However one simple fail-proof method is to simple use the document.getElementById(“chart_div”).innerHTML method. To use this method, just enclose the chart within a particular div (chart_div) in our case.

Here’s how you can change and update the chart values on the fly:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">

function refresh_chart()
{
'This will make the chart disappear
document.getElementById("chart_div").innerHTML = "";

'This will create a new the chart in the place of the older one
document.getElementById("chart_div").innerHTML = code_to_create_a_fresh_chart();
}


function code_to_create_a_fresh_chart()
{
     'Write code here which creates a new chart
}

</script>

where code_to_create_a_fresh_chart() is the function that will create a fresh new chart for you. You will have to fill this function with the same code that creates a new chart. This will typically be the same (or similar) code as what has been mentioned for the BODY tag of all the above chart libraries. You can add this function to your webpage and then call this function whenever you want the chart to refresh. If a charting library does not offer the ability to refresh the chart, this you can even add this function to the library itself and call it as and when you need it.


Excel Formula, Excel Chart, Excel Macro, Excel VBA, Pivot Table Excel, Excel Dashboard

What Do You Think ?


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Comments and Trackbacks

  1. Koolchart wrote:

    Where can I find a sample Chart data source implementation in Google chart library?

Subscribe

Keep up with the latest stories - Delivered right to your inbox
feedburner

Translate

English flagItalian flagKorean flagChinese (Simplified) flagPortuguese flagGerman flagFrench flagSpanish flagJapanese flagArabic flagRussian flagDutch flagHindi flagFilipino flagIndonesian flagThai flagTurkish flagPersian flag
treeemap software for excel


ARCHIVES