JQPlot Charts

To use JQPlot Charts first download JQPlot JQuery plugins from http://www.jqplot.com/

now copy the required js files from plugin to your project and add the script as follows. This script is as per my requirement so yours logic and code can differ from mine.

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.jqplot.min.js"></script>
<link href="~/Content/Styles/jquery.jqplot.css" rel="stylesheet" />
<script src="~/Scripts/jqplot.barRenderer.min.js"></script>
<script src="~/Scripts/jqplot.categoryAxisRenderer.min.js"></script>
<script src="~/Scripts/jqplot.pointLabels.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 BindChart();   
 }

 function BindChart() {
        try {
   var Projects = "";
        $(".chk").each(function () {
            if ($(this).is(':checked'))
                Projects += $(this).val() + ",";
        });
        var ProjectList = Projects.substring(0, Projects.length - 1);
        var Criteria = $("#ddlCriteria").val();
        var From = "", To = "", Title = "";;
        var Tenure = $("#ddlTenure").val();
        var FromYear, FromMonth, ToYear, ToMonth;
        if (Tenure == "Monthly") {
            From = $("#ddlFrom").val();
            To = $("#ddlTo").val();
            FromYear = From.toString().substring(0, 4);
            FromMonth = From.toString().substring(4, 6);
            ToYear = To.toString().substring(0, 4);
            ToMonth = To.toString().substring(4, 6);
            //Title = "(Period " + $("#ddlFrom").val() + "-" + $("#ddlTo").val() + ")";
            Title = "";
        }

           var ChartData = new Array();
           $.getJSON("../Dashboard/DelayedMilestoneChartData", { Criteria: Criteria, FromYear: FromYear, FromMonth: FromMonth, ToYear: ToYear, ToMonth: ToMonth, ProjectList: ProjectList }, function (temp) {
                if (temp != null || temp != undefined || temp != "") {
                    for (var m = 0; m < temp.Month.length; m++) {
                        var MonthWiseData = new Array()
                        for (var c = 0; c < temp.Company.length; c++) {
                            var flag = 0;
                            for (var i = 0; i < temp.Data.length; i++) {
                                if (temp.Data[i].Month == temp.Month[m] && temp.Data[i].CustomerName == temp.Company[c]) {
                                    MonthWiseData.push([parseInt(temp.Data[i].Amount)]);
                                    var flag = 1;
                                }
                            }
                            if (flag == 0) {
                                MonthWiseData.push([parseInt(0)]);
                            }
                        }
                        ChartData.push('[' + MonthWiseData + ']');
                    }
                    for (var m = 0; m < temp.Month.length; m++) {
                        temp.Month[m] = "{label:'" + temp.Month[m] + "'}";
                    }
                   
                   
                    var ticks = eval('"' + temp.Company + '"');
                    var legend = "[" + temp.Month + "]";
                    var ChartLabel = ticks.split(",");
                    var ChartLegend = eval(legend);
                    if (ChartData.length == 0) {
                        $("#DelayedMilestones").empty();
                        $("#DelayedMilestones").append('<h2 style="margin:130px 0 0 40px;">No Milestones Delay</h2>');                      
                    }
                    DelayedMilestones = $.jqplot('DelayedMilestones', eval('[' + ChartData + ']'), {
                        // stackSeries: true,
                        title: 'Delayed Milestones ' + Title,//(Period Jan-Mar 2014)',
                        captureRightClick: true,
                        seriesDefaults: {
                            renderer: $.jqplot.BarRenderer,
                            rendererOptions: {
                                barMargin: 30,
                                highlightMouseDown: true
                            },
                            rendererOptions: { fillToZero: false },
                            pointLabels: { show: true }
                        },
                        series: ChartLegend,
                        axes: {
                            xaxis: {
                                renderer: $.jqplot.CategoryAxisRenderer,
                                ticks: ChartLabel,
                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                                tickRenderer: $.jqplot.CanvasAxisTickRenderer
                            },
                            yaxis: {
                                padMin: 0
                            }
                        },
                        legend: {
                            show: true,
                            location: 'ne',
                            placement: 'outsideGrid'
                        },
                        grid: { drawBorder: false }
                    }).replot();
                }
            });
        }
        catch (e) {
        }
    }   
</script>

Now Add the div in your webpage body to render the chart.

<div id="dvDelayedMilestones" class="HalfSpace"><div id="DelayedMilestones"></div></div>

Create an action to make an AJAX call for chart data like following.

[HttpGet]
        public JsonResult DelayedMilestoneChartData(string Criteria, string FromYear, string FromMonth, string ToYear, string ToMonth, string ProjectList)
        {
            DashBoardServices Dashboard = new DashBoardServices();
            DataSet dsCustomers = new DataSet();
            dsCustomers = Dashboard.GetDelayedMilestoneChart(Criteria, FromYear, FromMonth, ToYear, ToMonth, ProjectList);
            var data = DataTableExtensoins.ToList<DashboardGridModel>(dsCustomers.Tables[0]).ToList();
            var months = data.Select(m => m.Month).Distinct().ToList();
            var company = data.Select(c => c.CustomerName).Distinct().ToList();
            return Json(new { Data = data,Month = months, Company = company }, JsonRequestBehavior.AllowGet);
        }