I am currently working on creating dynamic column graphs in MVC by utilizing C3 Charts. Although I have successfully retrieved data from the database using AJAX/JSON, I am facing challenges in binding the X-Axis categories along with the Y-Axis coordinates using the JSON property of C3.
My goal is to dynamically build column charts where student marks from multiple years are displayed as (Year 1: 50), (Year 2: 100), and so forth. The X-Axis will represent the year category, while the Y-Axis will display the numeric marks. These combinations vary based on user requirements and are sourced from two columns in the database with multiple rows.
Issues I am encountering:
When specifying different data types for keys, the non-numeric part (category) appears as a separate series instead of being integrated into the chart.
The X-Axis displays whole numbers based on visible columns, whereas I aim to show actual category names.
This is my current approach, inspired by Daniel's method mentioned 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']
},
}
});
}
});
Your assistance in resolving these issues would be greatly appreciated. Thank you!
Edit: Ultimately, I envision the data to appear like this: Sample Chart