Bar chart using jqPlot
In this article, I will try my best to explain about drawing bar charts using jqplot in MVC3.
jqPlot is a jQuery plugin to generate pure client-side javascript charts in your web pages. It is an powerful jQuery extension to generate graphs like line, bar, bubbles, etc. on client/web browser side based on JavaScript.
jqPlot
In this article I will take an example of bar chart to display static as well as dyanamic data. So lets begin with plotting static data first on bar chart.
As we know it is an jQuery plugin we need to download js libraries for plotting. You can visit official site for downloads. Once you have downloaded the plugins and libraries, unzip it and there you will find all the resource required. Static Data
View
Add a view and name it according to your wishReferences
Add following script reference in view
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../../Content/jqPlot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../../Content/jqPlot/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../../Content/jqPlot/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../../Content/jqPlot/jqplot.pointLabels.min.js"></script>
This will work fine if your browser is Mozilla, chrome or IE9 and above. But for IE8 you need to add two more references
<script type="text/javascript" src="../../Content/jqPlot/excanvas.js"></script>
<script type="text/javascript" src="../../Content/jqPlot/excanvas.min.js"></script> Div Tag
Now in view add a div tag in which you need to plot graphs and give it an id. This id will be used plotting
For Ex:-
<div id="dPlot">
</div>JSON
And then add a script tag for writing JSON for plotting chart.
<script type="text/javascript">
$(document).ready(function () {
var arr1 = [350, 450, 050];
var arr2 = [110, 390, 120];
var arr3 = [155, 278, 120];
var ticks = ['Jan', 'Feb', 'Mar'];
var plot1 = $.jqplot('dPlot', [arr1, arr2, arr3], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: { fillToZero: true }
},
series: [
{ label: 'series1' },
{ label: 'series2' },
{ label: 'series3' }
],
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
pad: 1.05,
tickOptions: { formatString: '$%d' }
}
}
});
});</script>
Run the project and you will see bar charts with data we sent in JSON request.
Dyanamic Data
Now if we want to display data coming from database then we need to pass data to this JSON from controller.
For this add one controller and get data from database.
Fir ex:-
string userId = Session["Userid"].ToString();
var lstUsers = (from u in db.user
where u.IsDeleted.Equals(false)
select u).Count();
ViewBag.UserCount = lstUsers.ToString();
var lstContacts = (from c in db.userContact
where c.IsDeleted.Equals(false) && c.UserId.Equals(userId)
select c).Count();
ViewBag.ContactCount = lstContacts.ToString();
var lstMails = (from m in db.userMail
where m.IsDeleted.Equals(false) && m.UserId.Equals(userId)
select m).Count();
ViewBag.MailCount = lstMails.ToString();
return View();
Now here I have set 3 viewbag variables which I want to display in graph.
Look at the above mention JSON and you will find 3 arrays named arr1,arr2 & arr3 which are then passed on to variable named plot1 in function $.jqplot('dPlot', [arr1, arr2, arr3].
Here dPlot is the id of the div where we want to plot chart. Now to print dyanamic data from database, simply pass viewbag variable to this arrays.
For Ex:-
var conts = @ViewBag.ContactCount;
var users = @ViewBag.UserCount;
var mails = @ViewBag.MailCount;
var arr1 = [conts];
var arr2 = [users];
var arr3 = [mails];
and you are done with dyanamic chart.
Parts of JSON
var ticks = ['Counts']
This will print then chart name at bottom.
series: [
{ label: 'Contacts' },
{ label: 'Users' },
{ label: 'Mails' }
This will show legends about colour and there matching strips
legend: {
show: true,
placement: 'outsideGrid'
},
This is useful in placing Legend inside or outside or weather to display or not.
Hope you find this article interesting and can explore rich options of jqPlot.
Shakil Sama
Attachments
