Getting Started with jqChart jQuery Plugin

After Visual Studio MSChart control, I came across this jQuery plugin named jqChart. 

This plugin used for drawing superb, high performance client-side charts and graphs using HTML 5 canvas. 

Also, jqChart version for ASP.Net MVC  also available for download.

You can reach the offical site of jqChart here :

Major browsers supports:

Internet Explorer - 6+ (needed an extra js file for the support canvas graphics)


Google Chrome



Key Features

HTML5 Canvas rendering support with high performance, fast responses etc...

Major browser support.

Mobile devices supports iOS, Android.

Multiple Chart Type supports like Bar, Column, Pie etc..

Real-Time Charts, Stock, Financial Charts etc..

Sample screen shots
Chart with multiple axes


Pie Chart


Chart with images


Chart with tool-tips


More Chart features available here : 

Lets start creating a simple chart

I used Visual Studio 2010 here, which is not necessary to create these samples. 

Using a html file along with plug-ins can easily create the charts and graphs. But for MVC, we required Visual Studio.

Download the jQuery plugins from

Add the plugins and style sheets into the head tag in order as below.


The first file is "jquery-1.5.1.min.js" - this is the official jQuery library on which jqChart is built upon.

The second file you need is the "excanvas.js" javascript file. It is used from the versions of IE, which dosn't support canvas graphics.

The third one is the jqChart javascript code itself, located in "jquery.jqChart.min.js.

The last one contains the Css file that the jqChart needs.

Now just use below code into script tag, later you can play with the scripting code.


Now run the page, That's it simple and fast.

Hope you all liked this article, comments appreciated. Sample project attached for reference.

Post your queries to our forums. Thank you !