title: How to display the JQPLOT graph rather a long text
body: <p>I have a method in controller class which returns JSON data:</p>
  
  <pre><code>public ActionResult ChartDataJSON()
  {
      Chart chart = new Chart();
      DataSet ds = dbLayer.GetChartData();
      DataTable dtChartData = ds.Tables[0];
      List&lt;jqplotModel&gt; chartData = new List&lt;jqplotModel&gt;();
  
      if (dtChartData .Rows.Count != 0)
      {
          foreach (DataRow row in dtChartData .Rows)
          {
              chartData.Add(new jqplotModel{ Date = DateTime.Parse(@row["Date"].ToString()), Demand= Convert.ToDouble(@row["Demand"].ToString()), Supply= Convert.ToDouble(@row["Supply"].ToString()) });
          }
      }
      return Json(chartData, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>Does anybody know how I can use it in my script. I tried with these lines but it is not showing the chart</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var types = ['Demand', 'Supply'];               
  
          var rawData =  function (url, plot, options) {
              var ret = null;
              $.ajax({
                  // have to use synchronous here, else the function
                  // will return before the data is fetched
                  async: false,
                  url: url,
                  dataType: "json",
                  success: function (data) {
                      ret = data;
                  }
              });
              return ret;
          };
  
          // The url for our json data
          var jsonurl = "/ChartController/ChartDataJSON";
          var plotData = []
  
          for (var i = 0; i &lt; rawData.length; i++) {
              //Parse the date.
              var date = new Date(+rawData[i].Date.match(/\d+/));
  
              plotData[i] = [date, rawData[i].Demand];
          }
  
          var plotData2 = []
  
          for (var i = 0; i &lt; rawData.length; i++) {
              //Parse the date.
              var date = new Date(+rawData[i].Date.match(/\d+/));
  
              plotData2[i] = [date, rawData[i].Supply];
          }
  
          var plot1 = $.jqplot('chart1', [plotData, plotData2], {
              height: 300,
              width: 300,
              title: 'Demand Supply',
              dataRenderer: rawData,
              dataRendererOptions: {
                  unusedOptionalUrl: jsonurl
              },
              series: [
                      {},
                      { yaxis: 'y2axis' }
              ],
              axes: {
                  xaxis: {
                      renderer: $.jqplot.DateAxisRenderer,
                      tickOptions: { formatString: '%#I %p' },
                      label: "Date",
                      tickInterval: '4 hour'
                  },
                  yaxis: {
                      label: "Demand",
                      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
  
                  },
                  y2axis: {
                      label: "Supply",
                      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                  }
              },
              highlighter: {
                  show: true,
                  sizeAdjust: 1
              },
              cursor: {
                  show: false
              },
              legend: {
                  show: true,
                  labels: types,
                  location: 'ne'
              }
          });
  
          $(window).bind('resize', function (event, ui) {
              if (plot1) {
                  plot1.replot();
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>When I run this I don't see the chart, and the page displays a long text like this:</p>
  
  <blockquote>
    <p>[{"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"}]</p>
  </blockquote>
  
  <p>Can anybody help me figure out the problem and where and what I am doing wrong?</p>
  
  <p>Edit: 
  Please note that the data would be dynamic and it would be coming from the database and through coding in controller class it will be returning the JSON script to the view. Please suggest how to pass/use the JSON object (from ChartDataJSON() method) in jqPlot.</p>