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();
          }
      });
  
  });
  

Answer 2

As @user1254053 I also had trouble implementing @Fresh's solution. I was trying to write the js code in my ChartDataJSON view, I mean in the view from the ChartDataJSON() method and I just got plain text objects printed out when running my view.

Then I tried to write my view code in another view, the index view for example or any other view that just has a return(View) statement and worked out.

I hope this may help other people and I wish I'm not too late.

Answer 3

Ok, so here is my answer.

My controller is as follows:

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

        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:

<script src="@Url.Content("Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/jquery.jqplot.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.barRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.pointLabels.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.canvasAxisTickRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.highlighter.min.js")"  type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        // The url for our json data
        var url = '@Url.Action("ChartDataJSON", "jqPlot")';

        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;
            }
        });

        var demands = [];
        var supplys = [];

        for (i = 0; i < ret.length; i++) {
            // Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
            demands.push([ret[i].Date, ret[i].Demand]);
            supplys.push([ret[i].Date, ret[i].Supply]);
        }

        var plot1 = $.jqplot('chart1', [demands, supplys], {
            title: "Demand Supply",
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%d/%m/%Y'
                    },

                    label: 'Date'
                },
                yaxis: {
                    label: 'Demand'
                },
                y2axis: {
                    label: 'Supply'
                }
            },
            series: [
                { yaxis: 'yaxis', label: 'demands' },
                { yaxis: 'y2axis', label: 'supplys' }
            ],
            highlighter: {
                show: true,
                sizeAdjust: 1
            },
            cursor: {
                show: false
            }
        });
    });
</script>

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

<h2>@ViewBag.Title</h2>
<div id="chart1" style="height: 400px; width: 600px;"></div>

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.