13 Best Web Chart Libraries

Few days ago, I got a project that requires to generate a lot of charts as output. And my client needs charts with a great visual. I knew some chart libraries but the visual is not so well so I thought my client wouldn’t be satisfied with it.

So I began to search and try another chart libraries and I was surprised coz I found so many libraries out there. Some of them are free, some are shareware. Don’t worry if you’re looking at the best free library coz there are several free libraries that are good enough. They have good UI and very simple/easy script to use. Check them here:

• Open Flash Chart (Free) - This chart library is fairly easy to setup and has classes written in PHP, Perl, Python, Java, Ruby on Rails, and .Net to connect to the Chart.

Output: SWF Flash
Animation: Yes
Javascript Control: Yes
Charts: Line, Bar, 3D Bar, Glass Bar, Fade Bar, Sketch Bar, Area, Pie, Scatter, CandleStick

• Flot (Free) - Flot is a pure Javascript plotting library for jQuery. The focus is on easy usage , attractive plots and interactive features. With Flot you can interact with the data, look at specific data by zooming in, plot a time series, and other various options.

Output: Canvas
Animation: No
Javascript Control: Yes
Charts: Line, Bar, Area

• Flotr (Free) - Flotr is a javascript plotting library based on the Prototype Framework version 1.6.0.2. Flotr lets you create graphs in modern browsers with features like legend support, negative value support, mouse tracking, selection support, zoom support, event hooks, CSS styling support and much more.

Output: Canvas
Animation: No
Javascript Control: Yes
Charts: Line, Bar, Area

• JFreeChart (Free) - JFreeChart is an open source Java chart library that makes it easy for developers to display quality charts in their applications. The JFreeChart project was founded seven years ago, in February 2000, by David Gilbert and is used by approximately 40,000 to 50,000 developers. JFreeChart supports many different output types that includes JPEG, GIF, PDF, EPS and SVG. This is a great resource for Java developers.

Output: JPEG, GIF, PDF, EPS, SVG
Chart: Line, Bar, Pie, Area, Scatter, Gauge

• Visifire (Free) - Visifire (Powered by Silverlight) is a set of open source data visualization components. With Visifire you can create charts with ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails. The charts can be just simple HTML or animated Silverlight Charts.

Output: JPEG, Silverlight
Animation: Yes (Silverlight)
Charts: Line, Bar, 3D Bar, Funnel, CandleStick, Area, Pie, Stock

• ExtJS 3.0 (Free) - Since version 3, ExtJS includes chart library in its package. ExtJS supports some basic charts which can be configured via JSON.

Output: SWF Flash
Animation: Yes
Javascript Control: Yes
Charts: Line, Bar, Pie, Stacked Bar

• PlotKit (Free) - PlotKit is a Chart and Graph Plotting Library for Javascript. PlotKit works with MochiKit javascript library. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit also has great documentation.

Output: Canvas, SVG
Animation: No
Charts: Line, Bar, Pie, Area

• JpGraph (Free & Commercial) - JpGraph is a Object-Oriented Graph creating library for PHP. The library is completely written in PHP and ready to be used in any PHP scripts (both CGI/APXS/CLI versions of PHP are supported).
  Output: JPEG, SGS
  Charts: Line, Bar, Pie, Ring, Field, Splines, Geo Map, Stock, Polar, Radar, Gantt, Impuls, Error, Scatter, Ballon, Canvas, Contour

• AmCharts (Proprietary) - AmCharts are animated interactive flash charts. The charts include Pie Charts, Line Charts, Scatter/Bubble Charts, Bar/Column Charts, and even a stock chart. AmCharts can extract data from simple CSV or XML files, or they can read dynamic data generated with PHP, .NET, Java, Ruby on Rails, Perl and ColdFusion. All the charts are free but they have a link to AmCharts on the upper left.

Output: SWF Flash, WPF
Animation: Yes
Javascript Control: Yes

• Emprise JavaScript Charts (Shareware) - Emprise JavaScript Charts is a 100% Pure JavaScript Charting Solution that requires no JavaScript frameworks. Emprise JavaScript Charts include charts with zooming, scaling and scrolling ability. Tested and works with all major browsers.

Output: Canvas
Animation: No
Javascript Control: Yes
Charts: Line, Area, Scatter, Pie, Bar

• XML/SWF Charts (Shareware) - XML/SWF Charts is simple yet powerful tool to create attractive web charts and graphs from dynamic data. You can use any server-side script to gather the data and put it into XML. It supports many charts types,. These Charts have some great features like Animated transitions, Printable charts, and more.

Output: SWF Flash
Animation: Yes
Charts: Line, Column, Stacked column, Floating column, 3D column, Stacked 3D column, Parallel 3D column, Pie, 3D Pie, Bar, Stacked bar, Floating bar, Area, Stacked area, Candlestick, Scatter, Polar, Mixed, Composite and Joined

• Fusion Charts (Proprietary) - FusionCharts is a cross-browser and cross-platform flash charting component that can be used with ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages or even PowerPoint Presentations.

Output: SWF Flash
Animation: Yes

• FlyCharts (Shareware) - FlyCharts is a set of Adobe Flash (SWF) files that gives you outstanding possibility to visualize your data. Using FlyCharts you can create compact, interactive and good-looking charts.
  Output: SWF/Flash
  Charts: Column/Bar, Line/Pipe, Pie, Area

Charts that use SWF is more preferred because they offer great visual and animation though every browser on client must has Flash Player installed. So it’s yours to decide which one is fit your needs.

If you know of any other charts, please post below. Read more...

5 Minutes To Master JSON (JavaScript Object Notation)

To follow this tutorial, you don’t have to be experienced with Javascript. But it’ll be preferred if you have at least a little bit knowledge about Object Oriented Programming. Put all the scripts below inside the body element enclosed by script tag.

Minute 1 - Intro to Object

var myFirstObject = {};

It may not look like much, but those squiggly braces have the potential to record every bit of information humanity has ever gathered, and express the most complex programs computer scientists can dream up. In fact, Javascript itself is stored inside a set of squiggly braces just like that, as are all of its primitive data types -- strings, numbers, arrays, dates, regular expressions, they're all objects and they all started out just like myFirstObject.

Minute 2 - Creating A New Object

The old way to create a new object was to use the new keyword.
var myJSON = new Object();
The above method has been deprecated now in favor of simply defining an empty object with squiggly braces.
var myJSON = {};

Objects as Data
var myJSON = { "firstName": "Barrack", "lastName": "Obama", "age": 44 };

This myJSON object has 3 properties or name/value pairs. The name is a string -- in our example, firstName, lastName, and age. The value can be any Javascript object (and remember everything in Javascript is an object so the value can be a string, number, array, function, even other Objects) -- In this example our values are “Barrack”, “Obama”, and 44. “Barrack” and “Obama” are strings but age is a number and as you can see this is not a problem.

This data format is called JSON for JavaScript Object Notation. What makes it particularly powerful is that since the value can be any data type, you can store other arrays and other objects, nesting them as deeply as you need.

Minute 3 - Accessing Data In JSON

The most common way to access JSON data is through dot notation. This is simply the object name followed by a period and then followed by the name/property you would like to access.

document.writeln(myJSON.firstName); // Outputs Barrack
document.writeln(myJSON.lastName); // Outputs Obama
document.writeln(myJSON.age); // Outputs 44

If your object contains an object then just add another period and name
var myAnimals = { “cat”: { “name”: “mojo”, “color”: “white” }, “dog”: { “name”: “twister”, “color”: “gray” } };

document.writeln(myAnimals.cat.name); // outputs mojo
document.writeln(myAnimals.dog.name); // outputs twister

Minute 4

Array as A Value

If your object contains an object with a type of Array, just specify the index of data after object name. This example will show you how to use a value with type of array
var myAnimals = { “cat”: { “name”: “mojo”, “color”: “white” }, “dogs”: [{ “name”: “twister”, “color”: “gray” }, { “name”: “sweety”, “color”: “brown” }] };

document.writeln(myAnimals.cat.name); // outputs mojo
document.writeln(myAnimals.dogs[0].name); // outputs twister
document.writeln(myAnimals.dogs[1].name); // outputs sweety


Function as A Value

The other power of Javascript is that you can assign a function to a variable directly. This example will create a message box that is called by show function
var myIdentity = { “name”: “joe”, “age”: 23, show: function(){alert(this.name + ‘ ’ + this.age)} };
myIdentity.show();

Minute 5 - Receiving JSON via AJAX

In this minute, if you’ve known a little about AJAX, you’ll figure out that using JSON as data format is much easier than XML.

Remember that JSON data is simply string received from the server. Suppose that responseText contains string from server that is called by XMLHttpRequest.
var responseText = "fruits = { ‘name’: ‘apple’, 'color' : 'red' }"; // example of what is received from the server.
eval(responseText); // Execute the javascript code contained in responseText.

document.writeln(apple.color); // Outputs ‘green’

eval() function is just a built-in Javascript string compiler which can run very fast.

I think that’s all the essence of JSON. I suggest you to go to json.org to learn some more advance concept.

Don’t forget to leave a comment so I know that this post is useful to you.
Read more...