Constructing JSON for JqPlot Bar Charts

Question

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:

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

https://i.sstatic.net/ohup4.png *Produced Graph

I’d like to be able to create something similar to the bar graph on the following page: http://www.jqplot.com/tests/bar-charts.php (second chart down). This bar graph is created using the following jQuery:

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?

  $(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

Understanding that you want to build a bar chart for the given data you could have your dataSlices build in a following way, assuming your JSON data comes as an array:

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

This is demonstrated in the following code which reuses a standard example from jqPlot website.