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
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.
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 !
Suthish NairPosted Sep 11, 2013, 9:32 AM
am not sure, please explore the library. For DIV, style='overflow:auto; width:400px;height:400px;'
Tapas PatiPosted Sep 11, 2013, 7:33 AM
how we will set scrollbar on target chart div?
Suthish NairPosted Jul 28, 2012, 7:09 AM
Thank you very much, lemme give a try... :)
Rashmi SahuPosted Jul 26, 2012, 9:37 AM
Thanks for the article.this is a very nice and simple article. But i have a query...... How can we use jqChart with dynamic data? eg: I want to bring data from database according to month filter, and show the data in chart.So, how can i do it with jqChart??
Venkatesan JayakanthamPosted May 28, 2012, 4:35 AM
I've tried downloading the code. But looks like, most of the files were corrupted and I got only partial code Suthish. Let me check it out in some other machine. Nice article mate. Cheers, Venkatesan Prabu .J Head, Kaashiv InfoTech, Chennai. Free Ebooks - http://www.kaashivinfotech.com/Ebooks.aspx http://venkattechnicalblog.blogspot.in/
Lajapathy ArunPosted May 26, 2012, 1:29 PM
Thanks guys
Suthish NairPosted May 20, 2012, 2:55 PM
Thanks' Karthik...
Karthikeyan AnbarasanPosted May 18, 2012, 12:33 PM
Nice plugin and good presentation suthish
Suthish NairPosted May 16, 2012, 10:06 AM
yes, but still we can use the plugin for basic charts and even most of the chart types and features available in this plugin. Who know's in future Microsoft goes for this plugin :)
Anil KumarPosted May 15, 2012, 4:23 AM
Its so nice plugin but come with a cost!
Mahesh ChandPosted May 15, 2012, 1:19 AM
This is awesome chart Suthish. I have not used it but I love colors.