17

Charts with Asp.net MVC and jQuery through jqPlot

Asp.Net MVC is a great way to get dynamic data presented inside a web browser and thanks to the great integration of jQuery now in Visual Studio, we have many programming tools right at hand!

To show of the possibilities, I’ll give an example on how to get data from Asp.net MVC into your client jQuery code. This example will also use jqPlot to draw a dynamical graph from the given data.

First up, you’ll need to download the jqPlot plugin for jQuery from the jqPlot site: http://www.jqplot.com/ !
I have to say, this graph plugin just looks stunning and is easy enough to use with much tweaking options!!
When this is done, create your MVC project inside Visual Studio.

To get jqPlot working in your MVC project, make sure to create a subfolder jqPlot inside your Scripts folder and copy all .js files from the jqPlot download inside this subfolder!
After that, just add following inside your Site.Master page to get the correct reference to your jqPlot plugin.

Small side note, when you need to edit js files inside Visual Studio and you like to have intellisense for jQuery, be sure to add following line on top of each js file!

Next thing you’ll need to do is add a new controller inside the Controllers section. Inside this controller we will have all calls needed to get a new webpage and also for retrieving data. You add a new controller by right clicking on the Controlles folder and selecting Add>Controller! Give it a meaningful name and click OK.( in this example GraphController.cs )

Add following code inside the controller, this will give us the new web page.

Add following code inside the controller, this will present a JSON data stream back to the client. This data stream represents all markers that will be used by the jqPlot graph to draw lines ( in this example. You can also draw bar or pie charts and many other )

The class used here is called GraphData, it’s created inside the Models section and only contains 2 properties.

Now that the code is in place, right click on the HearthRate() method and select Add View. This will create a new view inside the Views section.

Edit this newly added View ( this example Views>Graph>HearthRate.aspx ) and add following code inside the asp:Content tag! This div will be used by the jqPlot, it indicates where the graph needs to be visible.

The other line is a reference to a new js file that we need for processing the JSON data and presenting it correctly to the jqPlot plugin.

Now the only thing left to do is create the js file with all the jQuery code that will process the JSON stream and draw the line chart.

With all this in place, you can start up your website and browse to the http://localhost/Graph/HearthRate site. If everything goes well, you should get following image.

asp_mvc_jqplot

Technorati Tags: , , ,

Depechie

17 Comments

  1. Hey there i have copied your code to the T, and am getting the following error in firebug:

    o[0] is undefined
    anonymous(“chartdiv”, [undefined, undefined], Object legend=Object title=Heart rate overview)jquery.j…ot.min.js (line 14)
    Plot([undefined, undefined], “undefinedundefined”)test.aspx (line 258)
    anonymous(Object Name=CPU Usage Series=[10])test.aspx (line 225)
    I()jquery-1….2.min.js (line 19)
    anonymous(2)jquery-1….2.min.js (line 19)
    [Break on this error] (function(e){var b;e.jqplot=function(r,o…d+))?([nAscboxXuidfegpEGP])/g})(jQuery);

    Im not sure why, the json string that is being returned , and into the getJSON method is as follows :

    {“Name”:”CPU Usage”,”Series”:[[1,3],[2,4],[3,7],[4,4],[5,5],[6,5],[7,4],[8,3],[9,3],[10,6]]}

    any help would be greatly appreciated :)

  2. Are you able to publish the solution? I am new to this and trying to follow your post but running into some errors.

  3. It’d be great if you can send me the solution also. Thank you!

  4. This is a nice post, it could be of great help for everyone.

  5. Tnx. This pointed me in the right direction. Just wanted to post my solution – apologize if the code is not formatted well…

    I wanted several graphs in one view, so I developed this.

    This is the class I populate:

    public class GraphDataResult
    {
    public object XData { get; set; }
    public object YData { get; set; }
    }

    And this is the class transforming the populated object into something that jqPlot can understand.

    private object[][][] GetGraphData(List<List> graphResult)
    {
    object[][][] data = new object[graphResult.Count][][];
    int index = 0;
    foreach (var d in graphResult)
    {

    data[index] = new object[d.Count][];

    for (int j = 0; j < d.Count; j++)
    {
    data[index][j] = new object[2] { d[j].XData, d[j].YData };
    }
    index++;
    }
    return data;
    }

    The UI part. csHtml file. The push data part of it in javascript.

    for (i = 0; i < data.COUNTGRAPHS; i++) {
    lines_series.push(data.DATA[i]);
    }

    /Ivan

  6. please can u send me the solution..please it is urgent as i am new to the JSON..please

  7. hello,

    i have been doing some research and this solution is ideal but i am coding in VB can you write the VB equivalent to the C# code you have in this article.

  8. I had a few problems with this untill I changed the action method return to look like this:

    return Json(hearthRateDataList, JsonRequestBehavior.AllowGet);

    Without this I found that the Json string was not being returned and the jquery callback function never fierd.

  9. Yeah… The code is old, there is now a security issue with json and http gets to avoid java cross site scripting. So it either has to become a post method or your solution with allowget :)

Leave a Reply

Your email address will not be published. Required fields are marked *