I've been researching extensively about nested json for Highcharts stacked percentage column, but I haven't been able to get the desired output.
Below is the code that I have tried, but unfortunately it's not producing the expected result.
Could anyone assist me in identifying the mistake I am making?
Thank you in advance.
$(function () {
var processed_data = new Array();
$.getJSON('javascripts/data.json', function(data) {
// Load data into array
for (i = 0; i < data.length; i++){
processed_data.push([data[i].key, data[i].value]);
}
// Generate chart
$('#container').highcharts({
chart: {
type: "bar"
},
title: {
text: "Student data"
},
xAxis: {
type: 'category',
allowDecimals: false,
title: {
text: ""
}
},
yAxis: {
title: {
text: "Scores"
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Subjects',
data: processed_data,
}]
});
});
});
// Sample data displayed in data.json
[
{"key":"john","value":[34,53,45,45,98]},
{"key":"Rita","value":[98,34,43,54,66,66]},
{"key":"james","value":[91,33,45,65,65,38]},
{"key":"jade","value":[98,54,54,45,45,45]},
{"key":"lara","value":[23,23,98,23,23,23]}
]<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>