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

I think this should solve your problem: JsFiddle link

• i have declared rawData as a variable which would contain the ajaxreply json object. then i have used that variable below to plot the graph.

• in your code i observed that you are already supplying data to the graph and you also have dataRenderer set inside it. that is not correct. DataRenderer examples

  $(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 types = ['Demand', 'Supply'];               
  
      var plotData = []
  
      for (var i = 0; i < 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 < 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 Hr'
              },
              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();
          }
      });
  
  });