Create Jqplot Line chart in mvc4

0
votes

This is the string i am getting for Json. Please suggest how can i use this to create Jqplot Line chart in mvc4 with razor c#. The x-axis is datestring (i.e. 3 Pm, 4 PM, etc) and y-axis is Demand value.

[{"Demand":4422.45,"Supply":17660,"Date":"\/Date(1236504600000)\/","DateString":"3 PM"},
{"Demand":5019.27,"Supply":20699,"Date":"\/Date(1236508200000)\/","DateString":"4 PM"},
{"Demand":5030.35,"Supply":19917,"Date":"\/Date(1236511800000)\/","DateString":"5 PM"},
{"Demand":5172.35,"Supply":23597,"Date":"\/Date(1236515400000)\/","DateString":"6 PM"},
{"Demand":5656.51,"Supply":21572,"Date":"\/Date(1236519000000)\/","DateString":"7 PM"},
{"Demand":4622.88,"Supply":7794,"Date":"\/Date(1236522600000)\/","DateString":"8 PM"},
{"Demand":3116.21,"Supply":3427,"Date":"\/Date(1236526200000)\/","DateString":"9 PM"},
{"Demand":1588.83,"Supply":1883,"Date":"\/Date(1236529800000)\/","DateString":"10 PM"},
{"Demand":1394.15,"Supply":1403,"Date":"\/Date(1236533400000)\/","DateString":"11 PM"},
{"Demand":1321.76,"Supply":3755,"Date":"\/Date(1236537000000)\/","DateString":"12 AM"},
{"Demand":1130.98,"Supply":3474,"Date":"\/Date(1236540600000)\/","DateString":"1 AM"},
{"Demand":1277.1,"Supply":1072,"Date":"\/Date(1236544200000)\/","DateString":"2 AM"},
{"Demand":1214.68,"Supply":1025,"Date":"\/Date(1236547800000)\/","DateString":"3 AM"},
{"Demand":2117.91,"Supply":1198,"Date":"\/Date(1236551400000)\/","DateString":"4 AM"},
{"Demand":1658.97,"Supply":1485,"Date":"\/Date(1236555000000)\/","DateString":"5 AM"},
{"Demand":1997.36,"Supply":3126,"Date":"\/Date(1236558600000)\/","DateString":"6 AM"},
{"Demand":2147.37,"Supply":4785,"Date":"\/Date(1236562200000)\/","DateString":"7 AM"},
{"Demand":2114.13,"Supply":5268,"Date":"\/Date(1236565800000)\/","DateString":"8 AM"},
{"Demand":2389.84,"Supply":5264,"Date":"\/Date(1236569400000)\/","DateString":"9 AM"},
{"Demand":2240.77,"Supply":5526,"Date":"\/Date(1236573000000)\/","DateString":"10 AM"},
{"Demand":1802.43,"Supply":4530,"Date":"\/Date(1236576600000)\/","DateString":"11 AM"},
{"Demand":1929.71,"Supply":6618,"Date":"\/Date(1236580200000)\/","DateString":"12 PM"},
{"Demand":545.65,"Supply":2767,"Date":"\/Date(1236583800000)\/","DateString":"1 PM"},
{"Demand":0,"Supply":1,"Date":"\/Date(1236587400000)\/","DateString":"2 PM"}]

Edit: the code 

            <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="~/Content/jquery.jqplot.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="~/Scripts/jqPlot/jqplot.highlighter.min.js"></script>
            <script type="text/javascript" src="~/Scripts/jqPlot/jqplot.cursor.min.js"></script>
            <script type="text/javascript" src="~/Scripts/jqPlot/jqplot.dateAxisRenderer.min.js"></script>

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

            var rawData = [{ "Demand": 4422.45, "Supply": 17660, "Date": "/Date(1236504600000)/", "DateString": "3 PM" }, { "Demand": 5019.27, "Supply": 20699, "Date": "/Date(1236508200000)/", "DateString": "4 PM" }, { "Demand": 5030.35, "Supply": 19917, "Date": "/Date(1236511800000)/", "DateString": "5 PM" }, { "Demand": 5172.35, "Supply": 23597, "Date": "/Date(1236515400000)/", "DateString": "6 PM" }, { "Demand": 5656.51, "Supply": 21572, "Date": "/Date(1236519000000)/", "DateString": "7 PM" }, { "Demand": 4622.88, "Supply": 7794, "Date": "/Date(1236522600000)/", "DateString": "8 PM" }, { "Demand": 3116.21, "Supply": 3427, "Date": "/Date(1236526200000)/", "DateString": "9 PM" }, { "Demand": 1588.83, "Supply": 1883, "Date": "/Date(1236529800000)/", "DateString": "10 PM" }, { "Demand": 1394.15, "Supply": 1403, "Date": "/Date(1236533400000)/", "DateString": "11 PM" }, { "Demand": 1321.76, "Supply": 3755, "Date": "/Date(1236537000000)/", "DateString": "12 AM" }, { "Demand": 1130.98, "Supply": 3474, "Date": "/Date(1236540600000)/", "DateString": "1 AM" }, { "Demand": 1277.1, "Supply": 1072, "Date": "/Date(1236544200000)/", "DateString": "2 AM" }, { "Demand": 1214.68, "Supply": 1025, "Date": "/Date(1236547800000)/", "DateString": "3 AM" }, { "Demand": 2117.91, "Supply": 1198, "Date": "/Date(1236551400000)/", "DateString": "4 AM" }, { "Demand": 1658.97, "Supply": 1485, "Date": "/Date(1236555000000)/", "DateString": "5 AM" }, { "Demand": 1997.36, "Supply": 3126, "Date": "/Date(1236558600000)/", "DateString": "6 AM" }, { "Demand": 2147.37, "Supply": 4785, "Date": "/Date(1236562200000)/", "DateString": "7 AM" }, { "Demand": 2114.13, "Supply": 5268, "Date": "/Date(1236565800000)/", "DateString": "8 AM" }, { "Demand": 2389.84, "Supply": 5264, "Date": "/Date(1236569400000)/", "DateString": "9 AM" }, { "Demand": 2240.77, "Supply": 5526, "Date": "/Date(1236573000000)/", "DateString": "10 AM" }, { "Demand": 1802.43, "Supply": 4530, "Date": "/Date(1236576600000)/", "DateString": "11 AM" }, { "Demand": 1929.71, "Supply": 6618, "Date": "/Date(1236580200000)/", "DateString": "12 PM" }, { "Demand": 545.65, "Supply": 2767, "Date": "/Date(1236583800000)/", "DateString": "1 PM" }, { "Demand": 0, "Supply": 1, "Date": "/Date(1236587400000)/", "DateString": "2 PM" }];

            var plotData = []

            for (var i = 0; i < rawData.length; i++) {
                plotData[i] = [rawData[i].DateString, rawData[i].Demand, rawData[i].Supply];
            }

            var plot1 = $.jqplot('chart1', [plotData], {
                title: 'Title of the Chart',
                axes: {
                    xaxis: {
                        renderer: $.jqplot.DateAxisRenderer,
                        label: "Date"
                    },
                    yaxis: {
                        label: "Demand"
                    }
                },
                highlighter: {
                    show: true,
                    sizeAdjust: 7.5
                },
                cursor: {
                    show: false
                }
            });
            });

            </script>
            </head>
            <body>
            <div>
            <div id="chart1" style="height:400px;width:600px; "></div>  
            </div>
            </body>

I want to create a line chart with two lines, one for demand and another one for supply. Previously i was using CanvasAxisLabelRenderer javascript files but with date values i was not able to display the chart. Please advice. Once again thanks for your help.

1
asp.net-mvc-4jqplot

1 Answers

0
votes

The answer really depends on exactly how you want to handle the DateString fields. If you just want it to display as is, e.g., "9 AM", then you could use something like this:

var rawData = [{"Demand":4422.45,"Supply":17660,"Date":"/Date(1236504600000)/","DateString":"3 PM"},{"Demand":5019.27,"Supply":20699,"Date":"/Date(1236508200000)/","DateString":"4 PM"},{"Demand":5030.35,"Supply":19917,"Date":"/Date(1236511800000)/","DateString":"5 PM"},{"Demand":5172.35,"Supply":23597,"Date":"/Date(1236515400000)/","DateString":"6 PM"},{"Demand":5656.51,"Supply":21572,"Date":"/Date(1236519000000)/","DateString":"7 PM"},{"Demand":4622.88,"Supply":7794,"Date":"/Date(1236522600000)/","DateString":"8 PM"},{"Demand":3116.21,"Supply":3427,"Date":"/Date(1236526200000)/","DateString":"9 PM"},{"Demand":1588.83,"Supply":1883,"Date":"/Date(1236529800000)/","DateString":"10 PM"},{"Demand":1394.15,"Supply":1403,"Date":"/Date(1236533400000)/","DateString":"11 PM"},{"Demand":1321.76,"Supply":3755,"Date":"/Date(1236537000000)/","DateString":"12 AM"},{"Demand":1130.98,"Supply":3474,"Date":"/Date(1236540600000)/","DateString":"1 AM"},{"Demand":1277.1,"Supply":1072,"Date":"/Date(1236544200000)/","DateString":"2 AM"},{"Demand":1214.68,"Supply":1025,"Date":"/Date(1236547800000)/","DateString":"3 AM"},{"Demand":2117.91,"Supply":1198,"Date":"/Date(1236551400000)/","DateString":"4 AM"},{"Demand":1658.97,"Supply":1485,"Date":"/Date(1236555000000)/","DateString":"5 AM"},{"Demand":1997.36,"Supply":3126,"Date":"/Date(1236558600000)/","DateString":"6 AM"},{"Demand":2147.37,"Supply":4785,"Date":"/Date(1236562200000)/","DateString":"7 AM"},{"Demand":2114.13,"Supply":5268,"Date":"/Date(1236565800000)/","DateString":"8 AM"},{"Demand":2389.84,"Supply":5264,"Date":"/Date(1236569400000)/","DateString":"9 AM"},{"Demand":2240.77,"Supply":5526,"Date":"/Date(1236573000000)/","DateString":"10 AM"},{"Demand":1802.43,"Supply":4530,"Date":"/Date(1236576600000)/","DateString":"11 AM"},{"Demand":1929.71,"Supply":6618,"Date":"/Date(1236580200000)/","DateString":"12 PM"},{"Demand":545.65,"Supply":2767,"Date":"/Date(1236583800000)/","DateString":"1 PM"},{"Demand":0,"Supply":1,"Date":"/Date(1236587400000)/","DateString":"2 PM"}];

var plotData = []

for(var i = 0; i < rawData.length; i++) {
    plotData[i] = [rawData[i].DateString, rawData[i].Demand];
}

At this point you should be able to use plotData as input to jqplot.

Edit:

So the trick here is to correctly parse a date from the Date field and set the hours with DateString. Try this in your for loop:

for (var i = 0; i < rawData.length; i++) {
    //Parse the date.
    var date = new Date(+rawData[i].Date.match(/\d+/));
    //Grab the hour string.
    var hour = +rawData[i].DateString.match(/\d+/);
    //Figure out if this is PM.
    var isPm = rawData[i].DateString.indexOf("PM") > -1;

    //Set the hours property, but add 12 if this is PM.
    date.setHours(hour + (isPm ? 12 : 0));
    //The minutes should probably be zero.
    date.setMinutes(0);

    plotData[i] = [date, rawData[i].Demand, rawData[i].Supply];
}

Now to get your x-axis displaying ticks of the format 3 PM, you need to set the tickOptions when configuring the axis:

tickOptions: { formatString: '%#I %p' }

If you are wanting to display a line for supply, I would recommend looking into using a second x-axis - this will allow you another axis on a scale appropriate for the data.

References:

  • JavaScript Date Object: MDN
  • jqplot date formatting options: jqplot Docs