使用JSON将分类数据从SQL导入到C3.js

Question

I'm currently working on dynamically building column graphs in MVC, using C3 Charts. While I can bring the data from the database using AJAX/JSON, I am able to bind only the Y-Axis coordinates using the JSON property of C3, not the X-Axis categories.

What I want to do: Build column charts dynamically. For instance, the marks of students of multiple years will be calibrated as (Year 1: 50),(Year 2: 100) and so on, with the first part (category:Year) going on the X-Axis and the numeric part (Marks) going to the Y-Axis. The number of such combinations is dynamic, depending on the user's requirements (brought from the database as two columns, with multiple rows).

Problems I'm running into:

1. Specifying two different data types in the keys renders the non-numeric part (the category) as a separate series altogether, which I don't want and which isn't even working.

2. Whatever I do, the X-Axis comes with whole numbers depending on the number of columns visible. I'd like to change that to the actual category names.

Here is what I am doing. I took inspiration from Daniel's method here ( https://groups.google.com/d/msg/c3js/RV1X18GZoGY/-p39m9Ngt-gJ )

    $.ajax({
    url: <Method in Controller here>,
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(parameters),
    success: function (data) {
            var myData = jQuery.parseJSON(data);
            var testJson = $.map(myData, function (item) {
                return {
                    Year: item.Year,
                    Marks: item.Marks

                }
            });

            var chart = c3.generate({
                bindto: '#chart',
                size: {
                    width: 800
                },
                data: {
                    json: testJson,

                    mimeType: 'json',
                    keys: {
                        value: ['Marks']
                    },

                }
            });
    }
});

Looking forward to some assistance. Thanks in advance!

Edit: I want the data to look like this in the end: Sample Chart

Answer 1

You can try the following code:

var jsonTest =  [
                   { year: 1, marks: 50 },
                   { year: 2, marks: 70 },
                   { year: 3, marks: 75 },
                   { year: 4, marks: 45 },
                ];

// The variable name chart will automatically bind itself to an id = chart 
var chart = c3.generate({
    data: {                
        type : 'bar',
        json: jsonTest,
        keys: {
            x: 'year',
            value: ['marks']
        }
    },
    size: {
        width: 400,
    },
    axis: {
        x: {
            type: 'category'
        }
    },
    bar: {
        width: {
            ratio: 0.5
        }
    }
});

I was getting the following output:

Here's the JSBin example: Bar Chart Example