title: Constructing JSON for JqPlot Bar Charts
body: <p>I have managed to create something to populate the JqPlot pie chart (very hard coded – it will be automated). Here is how I’ve done it:</p>
  <pre><code>public ActionResult PieChart()
      {
          return View();
      }
  
      public ActionResult PieChartJSON()
      {
          List&lt;PieChartData&gt; sampleData = new List&lt;PieChartData&gt;();
          PieChartData test = new PieChartData();
          PieChartData test2 = new PieChartData();
          PieChartData test3 = new PieChartData();
          PieChartData test4 = new PieChartData();
          PieChartData test5 = new PieChartData();
          
          test.Label = &quot;ta&quot;;
          test.Value = 3;
          sampleData.Add(test);
  
          test2.Label = &quot;be&quot;;
          test2.Value = 5;
          sampleData.Add(test2);
  
          test3.Label = &quot;ga&quot;;
          test3.Value = 3;
          sampleData.Add(test3);
  
          test4.Label = &quot;ma&quot;;
          test4.Value = 8;
          sampleData.Add(test4);
  
          test5.Label = &quot;ja&quot;;
          test5.Value = 8;
          sampleData.Add(test5);
  
          return Json(sampleData, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  <p>jQuery:</p>
  <pre><code>jQuery(document).ready(function () {
      urlDataJSON = '/Home/PieChartJSON';
  
      $.getJSON(urlDataJSON, &quot;&quot;, function (data) {
          var dataSlices = [];
          var dataLabels = &quot;&quot;;
  
          $.each(data, function (entryindex, entry) {
              dataSlices.push(entry['Value']);
              dataLabels = dataLabels + entry['Label'];
          });
          options = {
              legend: { show: true },
              title: 'Poll Results',
              seriesDefaults: {
                  // Make this a pie chart.
                  renderer: jQuery.jqplot.PieRenderer,
                  rendererOptions: {
                      // Put data labels on the pie slices.
                      // By default, labels show the percentage of the slice.
                      showDataLabels: true
                  }
              }
          }
          var plot = $.jqplot('pieChart', [dataSlices], options);
      });
  }); 
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ohup4.png" rel="nofollow noreferrer">https://i.stack.imgur.com/ohup4.png</a> *Produced Graph</p>
  <p>I’d like to be able to create something similar to the bar graph on the following page: <a href="http://www.jqplot.com/tests/bar-charts.php" rel="nofollow noreferrer">http://www.jqplot.com/tests/bar-charts.php</a> (second chart down). This bar graph is created using the following jQuery:</p>
  <p>I’m quite new to C# and Json and I’m a little unsure how the JSON data should be constructed to create this bar graph.
  Can anyone help me out?</p>
  <pre><code>  $(document).ready(function(){
      // For horizontal bar charts, x an y values must will be &quot;flipped&quot;
      // from their vertical bar counterpart.
      var plot2 = $.jqplot('chart2', [
          [[2,1], [4,2], [6,3], [3,4]], 
          [[5,1], [1,2], [3,3], [4,4]], 
          [[4,1], [7,2], [1,3], [2,4]]], {
          seriesDefaults: {
              renderer:$.jqplot.BarRenderer,
              // Show point labels to the right ('e'ast) of each bar.
              // edgeTolerance of -15 allows labels flow outside the grid
              // up to 15 pixels.  If they flow out more than that, they 
              // will be hidden.
              pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
              // Rotate the bar shadow as if bar is lit from top right.
              shadowAngle: 135,
              // Here's where we tell the chart it is oriented horizontally.
              rendererOptions: {
                  barDirection: 'horizontal'
              }
          },
          axes: {
              yaxis: {
                  renderer: $.jqplot.CategoryAxisRenderer
              }
          }
      });
  });
  </code></pre>