How to display the JQPLOT graph rather a long text

Question

I have a method in controller class which returns JSON data:

public ActionResult ChartDataJSON()
{
    Chart chart = new Chart();
    DataSet ds = dbLayer.Ge         


        

Answer 1

Ok, so here is my answer.

My controller is as follows:

public class jqPlotController : Controller
{    
    public ActionResult ChartDataJSON()
    {
        var chartData = new List();

        var point1 = new jqplotModel { Date = DateTime.Now.Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(1), Supply = Convert.ToDouble(3) };
        var point2 = new jqplotModel { Date = DateTime.Now.AddDays(10).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(2), Supply = Convert.ToDouble(4) };
        var point3 = new jqplotModel { Date = DateTime.Now.AddDays(31).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(6), Supply = Convert.ToDouble(6) };
        var point4 = new jqplotModel { Date = DateTime.Now.AddDays(106).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(4), Supply = Convert.ToDouble(2) };
        chartData.Add(point1);
        chartData.Add(point2);
        chartData.Add(point3);
        chartData.Add(point4);

        return Json(chartData, JsonRequestBehavior.AllowGet);
    }

    //
    // GET: /jqPlot/

    public ActionResult Index()
    {
        return View();
    }
}

And the model:

public class jqplotModel
{
 public string Date { get; set; }
 public double Demand { get; set; }
 public double Supply { get; set; }
}

I've hard coded a (very!) simple dataset in the ChartDataJSON method. It will be pretty trivial for you to refactor your code to output data in a similar format.

As I'm new to jqPlot it took me a while to figure out how to pass a DateTime object to this javascript library. Every time I tried jqPlot gave me pretty cryptic time related error message. The solution I found was to format it as a date time which jqPlot understands e.g. '2008-09-30 4:00PM' (see example here) - I'm sure this is going to be useful for others confused about jqPlot's handling of dates!

The view looks as follows:

@{
    ViewBag.Title = "jQPlot Demo";
}

@ViewBag.Title

Note that in my solution I don't use the datarender option. Instead I retrieve the data using the jquery ajax call and then I create two separate arrays for the Demand and Supply data. Each of these arrays have the date in the x-axis, and then their respective value in the y-axis (hence the date is obviously common to both arrays).

Once I had this data I then plotted it via jqPlot, which results in the following graph:

Work still needs to be done to refine the ticks on the axis and the labelling, but hopefully this is the kind graph you want. If not, then it certainly has been a good learning task for me and I hope others will find this useful.