title: Create Jqplot Line chart in mvc4
body: <p>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.</p>
  
  <pre><code>[{"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"}]
  </code></pre>
  
  <p>Edit: the code </p>
  
  <pre><code>            &lt;script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"&gt;&lt;/script&gt;  
              &lt;script src="~/Scripts/jqPlot/jquery.jqplot.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;link href="~/Content/jquery.jqplot.css" rel="stylesheet" type="text/css" /&gt;
              &lt;script type="text/javascript" src="~/Scripts/jqPlot/jqplot.highlighter.min.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="~/Scripts/jqPlot/jqplot.cursor.min.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="~/Scripts/jqPlot/jqplot.dateAxisRenderer.min.js"&gt;&lt;/script&gt;
  
              &lt;script type="text/javascript"&gt;
              $(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 &lt; 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
                  }
              });
              });
  
              &lt;/script&gt;
              &lt;/head&gt;
              &lt;body&gt;
              &lt;div&gt;
              &lt;div id="chart1" style="height:400px;width:600px; "&gt;&lt;/div&gt;  
              &lt;/div&gt;
              &lt;/body&gt;
  </code></pre>
  
  <p>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. </p>