Построение Json для JQPlot Bar Charts

Question

Мне удалось создать что-то, чтобы заполнить круговую диаграмму JqPlot (очень жестко закодированную - она ​​будет автоматизирована). Вот как я сделал это:

public ActionResult PieChart() 
    { 
     return View(); 
    } 

    public ActionResult PieChartJSON() 
    { 
     List<PieChartData> sampleData = new List<PieChartData>(); 
     PieChartData test = new PieChartData(); 
     PieChartData test2 = new PieChartData(); 
     PieChartData test3 = new PieChartData(); 
     PieChartData test4 = new PieChartData(); 
     PieChartData test5 = new PieChartData(); 

     test.Label = "ta"; 
     test.Value = 3; 
     sampleData.Add(test); 

     test2.Label = "be"; 
     test2.Value = 5; 
     sampleData.Add(test2); 

     test3.Label = "ga"; 
     test3.Value = 3; 
     sampleData.Add(test3); 

     test4.Label = "ma"; 
     test4.Value = 8; 
     sampleData.Add(test4); 

     test5.Label = "ja"; 
     test5.Value = 8; 
     sampleData.Add(test5); 

     return Json(sampleData, JsonRequestBehavior.AllowGet); 
    } 

JQuery:

jQuery(document).ready(function() { 
    urlDataJSON = '/Home/PieChartJSON'; 

    $.getJSON(urlDataJSON, "", function (data) { 
     var dataSlices = []; 
     var dataLabels = ""; 

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

http://i.stack.imgur.com/ohup4.png * Произведено Graph

Я хотел бы быть в состоянии создать что-то похожее на гистограмме на нижеследующий страница: http://www.jqplot.com/tests/bar-charts.php (второй карта down). Этот гистограмм создается с использованием следующего jQuery:

Я довольно новичок в C# и Json, и я немного не уверен, как данные Json должны быть сконструированы для создания этой гистограммы. Может ли кто-нибудь помочь мне?

$(document).ready(function(){ 
    // For horizontal bar charts, x an y values must will be "flipped" 
    // 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 
      } 
     } 
    }); 
}); 

Answer 1

Понимание того, что вы хотите построить гистограмму для данной информации вы могли бы ваши dataSlices построить в следующим образом, предполагая, что ваши данные JSON поставляется в виде массива:

var json = [ 
    {"Label": "be", "Value": 5} 
    ,{"Label": "ga", "Value": 3} 
    ,{"Label": "ma", "Value": 8} 
    ,{"Label": "ja", "Value": 8}]; 
var dataSlices = []; 
var ticks = []; 
$.each(json, function (entryindex, entry) { 
    dataSlices.push(entry['Value']); 
    ticks.push(entry['Label']); 
}); 

Это demonstrated in the following code который повторно использует standard example from jqPlot website.

Answer 2

Попробуйте это работает отлично,

$.getJSON('/mservice/getvalues', function(data) { 
     var items1 = new Array(); 
     var j=0; 
     for (var i in data) { 
      var items = new Array(); 
      items.push(i,Number(data[i])); 
      items1[j++] = items; 
     } 

     var plot1 = jQuery.jqplot('chart1', eval([items1]), { 

        seriesDefaults:{ 
         renderer:jQuery.jqplot.PieRenderer, 
         rendererOptions:{ 
          dataLabels:'value', 
          showDataLabels:true 
         } 
        }, 
        legend:{ show:true, location:'e' } 
       } 
     ); 

    });