jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many more features.

Below is a step by step guide on how to use JqPlot with ASP.NET MVC.

Step 1 : Download and install JqPlot

You can download and install using the nuget extension for jqPlot created by Cris Leonelle as shown below or you can manually download the files from here and create a subfolder jqPlot inside your Scripts folder and copy all .js files from the jqPlot download inside this subfolder. But I prefer using the nuget extension.

enter image description here

Step 2 : Include jplot js scripts and stylesheet

Make sure to include at least the following 3 for this example.

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>  
<script src="../../Scripts/jqPlot/jquery.jqplot.js" type="text/javascript"></script>  
<link href="../../Scripts/jqPlot/jquery.jqplot.css" rel="stylesheet" type="text/css" />  

Step 3 : Add a plot container

Add a container (target) to your web page where you want your plot to show up. Be sure to give your target a width and a height:

<div id="chartdiv" style="height:400px;width:600px; "></div>  

Step 4 : jQuery code to create a plot

$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);  

Output

<img src=” />

Step 4 : Now lets get this data from controller

Now that we have a basic understanding of how jqPlot works, I will now show how to get the values from a controller action. In the example below I am populating a list, you can fetch this data from database instead.

public ActionResult FetchGraphData()  
{  
    var data = new List<Statistics>  
    {  
        new Statistics{Day = "1-Nov-2012", Value = 10},  
        new Statistics{Day = "2-Nov-2012", Value = 20},  
        new Statistics{Day = "3-Nov-2012", Value = 22},  
        new Statistics{Day = "4-Nov-2012", Value = 15},  
        new Statistics{Day = "5-Nov-2012", Value = 40},  
        new Statistics{Day = "6-Nov-2012", Value = 1},  
        new Statistics{Day = "7-Nov-2012", Value = 0},  
        new Statistics{Day = "8-Nov-2012", Value = 3},  
        new Statistics{Day = "9-Nov-2012", Value = 11},  
        new Statistics{Day = "10-Nov-2012", Value = 22},  
        new Statistics{Day = "11-Nov-2012", Value = 33},  
        new Statistics{Day = "12-Nov-2012", Value = 44},  
        new Statistics{Day = "13-Nov-2012", Value = 44},  
        new Statistics{Day = "14-Nov-2012", Value = 44},  
        new Statistics{Day = "15-Nov-2012", Value = 44},  
    };

    var amountList = new List<int>();  
    var dayList = new List<string>();

    foreach (var item in data)  
    {  
        dayList.Add(item.Day);  
        amountList.Add(item.Value);  
    }

    return Json(new {stats=amountList, days=dayList}, JsonRequestBehavior.AllowGet);  
}

public class Statistics  
{  
    public int Value { get; set; }  
    public string Day { get; set; }  
}  

I have made an ajax call to the above action, and on success function I am plotting the graph using the data recieved. As you can see I have used the Bar Renderer for this example, for which you need to import

<script src="../../Scripts/jqPlot/plugins/jqplot.barRenderer.min.js" type="text/javascript"></script>  
<script src="../../Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>  

<script type="text/javascript">  
    $(document).ready(function () {

    var url = '@Url.Action("FetchGraphData", "Home")';

    $.ajax({  
        url: url,  
        type: 'GET',  
        success: function (result) {  
        testJqPlot(result.stats, result.days);  
        },  
        error: function () {  
        }  
    });

    function testJqPlot(stats, days) {

    $.jqplot('chart1', [stats], {  
        seriesDefaults: {  
        renderer: $.jqplot.BarRenderer,  
        rendererOptions: { fillToZero: true }  
        },  
        axes: {  
        xaxis: {  
        renderer: $.jqplot.CategoryAxisRenderer,  
        ticks: days  
        },  
        yaxis: {  
        pad: 1.05,  
        tickOptions: { formatString: '$%d' }  
        }  
        }  
        });  
        } // end of TestJqPlot  
    });  
</script>

Output :

enter image description here

One more example ! In this last example I am using web api with Jqplot. You will need to import the following scripts for this to work,

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>  
<script src="../../Scripts/jqPlot/jquery.jqplot.js" type="text/javascript"></script>  
<script src="../../Scripts/jqPlot/plugins/jqplot.barRenderer.min.js" type="text/javascript"></script>  
<script src="../../Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>  
<script src="../../Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js" type="text/javascript"></script>  


$(document).ready(function () {  
    var dataUrl = "/api/report/GraphData";  
    $.ajax({  
    url: dataUrl,  
    type: 'GET',  
    datatype: "json",  
    contentType: 'application/json',  
    success: function (result) {

    var arr = [];  
    for (var i = 0; i < result.length; i++) {

    var date = result[i].Date;  
    var value = result[i].Value;

    arr.push([new Date(date), value]);  
    }

    var line1 = arr;  
    var plot2 = $.jqplot('chart2', [line1], {  
    title: 'Date vs Revenue',  
    axes: {  
    xaxis: {  
    renderer: $.jqplot.DateAxisRenderer,  
    tickOptions: { formatString: '%b %#d, %y' },  
    pad: 0  
    },  
    yaxis: {  
    }  
    },  
    series: [{ lineWidth: 2  
    ,markerOptions: { style: 'filledCircle', size: 0}  
    }]  
    });  
    },  
    error: function () {  
    console.log("error in ajax call");  
    }  
    });  
});  


public class ReportController : ApiController  
{  
    public List<Stats> GetGraphData()  
    {  
        List<FetchChartData_Result> data;  
        using (var context = new testEntities())  
        {  
            data = context.FetchChartData().ToList();  
        }

        var stats = new List<Stats>();

        foreach (var item in data)  
        {  
            stats.Add(new Stats {  
                            Date = item.stats_date,  
                            Value = item.customer_revenue  
                            });  
        }  
        return stats;  
        }  
    }

public class Stats  
{  
    public DateTime Date;  
    public Nullable<double> Value;  
}

enter image description here

Hope this helps :)

Further Reading:
JqPlot
JqPlot Usage Documentation
Charts with Asp.net MVC and jQuery through jqPlot
ASP.NET MVC and jQuery jqPlot sample
jqPlot bar graph with asp.net MVC 3
All in one example