Hilmy Nur Ramdhani Hilmy Nur Ramdhani - 6 months ago 13
jQuery Question

How to get object value inside an array

This is my code for generating the chart:

jQuery(document).ready(function()
{
var dataChart = {
"series_data":[
{"name":"Brunei Darussalam","data":[1]},
{"name":"Saudi Arabia","data":[1]},
{"name":"Singapore","data":[2]},
{"name":"Malaysia","data":[3]},
{"name":"Korea","data":[3]},
{"name":"Taiwan","data":[5]}],
"total":[{"total":15}]
};
var option = {
chart: {
type: 'column',
borderWidth: 1
},
title: {
text: 'Jumlah Registrasi'
},
subtitle: {
text: '*berdasarkan negara tujuan*'
},
xAxis: {
visible: false
},
yAxis: {
title: {
text: 'Jumlah'
},
allowDecimals: false,
minRange: 1,
tickInterval: 1
},
labels: {
items:[{
html: 'Total: '+dataChart.total, // this is the problem that im having now
style: {
left: '400px',
top: '10px'
}
}]
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: ''
};

option.chart.renderTo = 'negara';
option.series = dataChart.series_data;
var chartNegara = new Highcharts.Chart(option);
});


As you can see there're 2 array in var dataChart, series_data and total. The total is the sum of the series_data. So i have a problem how to show this total number into the chart.

Here's my jsfiddle for my code: https://jsfiddle.net/HealMee/pq30un8f/1
The error im having now is :

Total: [object Object]

Answer

You can change your chart into something like below:

chart: {
  type: 'column',
    borderWidth: 1,
      events: {
        load: function(event) {
          var total = 15;
          var text = this.renderer.text(
            'Total: ' + total,
            this.plotLeft,
            this.plotTop - 20
          ).attr({
            zIndex: 5
          }).add()
          }
      }
},

Fiddle here.. Cheers.