I am working on a project in Play Framework (play-java) where I need to display a bar graph using Highcharts. The Java API returns data in JSON format with a field called 'name' containing values like 'Data', 'Gadgets', 'Others,' etc. I want the x-axis of the chart to display these values from the JSON array returned in response.
Below is the code snippet for handling the response in JavaScript:
for(var i=0; i<response.data.result.length; i++)
{
$scope.total = $scope.total + parseInt(response.data.result[i].item_price);
}
var j = 0;
console.log(response.data.result);
while(j < response.data.result.length)
{
$scope.jsonArray = [{
name: response.data.result[j].category_name,
y: (parseInt(response.data.result[j].item_price)/$scope.total)*100,
}];
$scope.renderChart();
}
The following code snippet is used to create the bar graph:
$scope.renderChart = function()
{
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Your Expenses'
},
subtitle: {
text: 'Your total spent money is '+$scope.total+'.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Money spent in percentage'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Categories',
colorByPoint: true,
data: $scope.jsonArray
}]
});
}
I understand that using a while loop in the response code is not advisable. I would appreciate any help on how to ensure the y-axis calculates the percentage value correctly. My goal is to generate 'names' for the x-axis and percentage values for the y-axis of the chart. Thank you in advance.