Nowadays presenting a complex graphical data in the web is never been easy with the help of charting libraries available in the web for free. Flash, Applet, Silverlight and especially Javascripts and a server side language like PHP, ASP, etc offers a free and quality solutions in creating web based charts.
Here I list down the most promising Free javascript charting libraries and plugins.
1 . Flot
Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.
The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.
The plugin is known to work with Internet Explorer 6/7/8 (IE8 only in development version), Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+. If you find a problem, please report it. Drawing is done with the canvas tag introduced by Safari and now available on all major browsers, except Internet Explorer where the excanvas Javascript emulation helper is used.
Syntax:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function () { 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]]; // a null signifies separate line segments var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; $.plot($("#placeholder"), [ d1, d2, d3 ]); }); |
Go here for more iformation and samples.
2. fgCharting
fgCharting by Filamentgroup provides the easy solution of web data visualization. It uses jQuery and provides several types of graphs, such as Pie, Line, Area, and Bar.
Syntax:
Its placeholder uses a canvas html element.
|
1 |
<canvas id="chart1" class="fgCharting_src-dataTable_type-pie"></canvas> |
Once we have jQuery and our charting library attached, we can convert our canvas elements into charts with the following line of javascript:
|
1 |
$.fgCharting(); |
3. jQuery Sparklines
This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9 and Internet Explorer 6, 7 & 8.
Each example displayed below takes just 1 line of HTML or javascript to generate.
The plugin was written by Gareth Watts for Splunk Inc and released under the New BSD License.
Syntax:
|
1 |
$(selector).sparkline(values, options); |
Values can either be an array of numbers or “html” which causes the values to be read from from the selected tag:
|
1 2 3 4 5 |
<span class="sparklines">1,2,3,4,5,4,3,2,1</span> <span id="ticker"">Loading..</span> $('.sparklines').sparkline('html'); $('#ticker').sparkline([1,2,3,4,5,4,3,2,1]); |
Options is an object that specifies the type of sparkline to draw, colours to use, etc
|
1 |
$('#barchart').sparkline(myvalues, { type:'bar', barColor:'green' }); |
4. jqPlot
jqPlot is a jQuery plugin to generate pure client-side javascript charts in your web pages.
jqPlot requires jQuery (tested with 1.3.2 or better). jQuery 1.3.2 is included in the distribution. To use jqPlot include jquery, the jqPlot jQuery plugin, jqPlot css file and optionally the excanvas script for IE support in your web page:
Basic Syntax:
Add a container (target) to your web page where you want your plot to show up. Be sure to give your target a width and a height:
|
1 |
<div id="chartdiv" style="height:400px;width:300px; "></div> |
Sample js code:
|
1 2 3 4 5 |
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]], { title:'Exponential Line', axes:{yaxis:{min:-10, max:240}}, series:[{color:'#5FAB78'}] }); |
5. TufteGraph
TufteGraph is another jQuery charting plugin which claims to be different from other javascript charting libraries because fo the following reasons:
- Configuration is by dynamic functions, allowing for really compact API (very few options)
- Non-core layout is done via CSS rather than code
See here for more details.
6. jQuery Google Charting
A jQuery plugin that sets a division to request a Google chart.
Sample Code:
|
1 2 3 4 5 6 7 8 9 10 11 |
$('#defaultChart').gchart(); $('#removeChart').toggle(function() { $(this).text('Re-attach'); $('#defaultChart').gchart('destroy'); }, function() { $(this).text('Remove'); $('#defaultChart').gchart(); } ); |
7. Protochart
ProtoChart is an opensource library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries.
Features:
- Line, bar, pie, curve, mix, and area charts available
- Multiple data series on same graph
- Highly customizable legend support
- Customizable grid, grid border, background
- Customizable axis-tick values (both x and y)
- Supports: IE6/7, FF2/3 and Safari
- Even works on an iPhone!
Go to ProtoChart homepage for more details.
8. JSXGraph
JSXGraph is a cross-browser library for interactive geometry, function plotting, graphs, and data visualization in a web browser. It is implemented completely in JavaScript and uses SVG and VML.
JSXGraph is easy to embed and has a small footprint: only about 55 KB if embedded in a web page. No plug-ins are required! JSXGraph uses the JavaScript libraries/frameworks Prototype or jQuery.
Features:
- Euclidean Geometry: Points, lines, circles, intersections, perpendicular lines, angles
- Curve plotting: Graphs, parametric curves, polar curves, data plots
- Turtle graphics
- Lindenmayer systems
- Interaction via sliders
- Animations
- Polynomial interpolation, spline interpolation
- Tangents, normals
- Initial support for charts
- Vectors
9. Protovis
Protovis is a visualization toolkit for JavaScript using SVG. It takes a graphical approach to data visualization, composing custom views of data with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position. For example, this simple bar chart visually encodes an array of numbers with height:
|
1 2 3 4 5 6 7 8 |
new pv.Panel().width(150).height(150) .add(pv.Bar) .data([1, 1.2, 1.7, 1.5, .7, .3]) .bottom(0) .width(20) .height(function(d) d * 80) .left(function() this.index * 25) .root.render(); |
More information about Protovis.
10. PlotKit
PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.
Sample Syntax:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function demo() { var hasCanvas = CanvasRenderer.isSupported(); var opts = { "pieRadius": 0.4 }; var data1 = [[0, 5], [1, 4], [2, 3], [3, 5], [4, 6], [5, 7]]; var data2 = [[0, 2.5], [1, 2], [2, 1.5], [3, 2.5], [4, 3], [5, 3.5]]; var data3 = [[0, 1.25], [1, 1], [2, 0.75], [3, 1.25], [4, 1.5], [5, 1.75]]; if (hasCanvas) { var pie = new EasyPlot("pie", opts, $('canvaspie'), [data1]); var line = new EasyPlot("line", opts, $('canvasline'), [data1, data2, data3]); var bar = new EasyPlot("bar", opts, $('canvasbar'), [data1, data2, data3]); } } |
I know there is still a lot of JS charting libraries out there that I didn’t know. So feel free to drop me a comment for your suggestions and I am glad to try it.
Subscribe to my RSS feeds for more info that might usefull to you.
Tags: 
Pingback: Librerías para generar gráficas con Javascript | aNieto2K
Pingback: Librerías para generar gráficas con Javascript : Blogografia
Pingback: uberVU - social comments
Pingback: links for 2010-03-14 - Marco Gabriel