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 : http://www.jquerychart.com

Major browsers supports:

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

Firefox

Google Chrome

Opera

Safari

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

1.jpg

Pie Chart

2.jpg

Chart with images

3.jpg

Chart with tool-tips

4.jpg

More Chart features available here : http://www.jquerychart.com/samples 

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 http://www.jquerychart.com/Download.aspx

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

5.jpg

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.

6.jpg

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 !

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now