Pass data to Stacked Column Chart (Highcharts Framework)

Question

I have a problem when trying to render a stacked column chart with the Highcharts framework.

I get an error when rendering on the client:

Uncaught TypeError: a.toPrecision is not a function

From what I've gathered this is related with stacking. If I set stacking to null it won't give an error, but no graph will show.

I'm passing dynamic data to the series. The data is in the form of a name for the legend and an array of values for each xAxis category.

Below is an example of one object that is passed as data. This is stored in an array with a more entries.

name:"READ_CALENDAR"
y: (24) [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

This must be the wrong way, since I can't get it to work, but what then is the correct way?

My question is, what am I doing wrong? How should I pass dynamic data to make it work? I need to pass several unique instances of data that need to stack and match the xAxis categories.

I will add more details below regarding how I pass data and such. If you want more info comment and I will try to provide as much as I can.

Please help! Thanks in advance!!!

---

This is an example of data that is passed to the client:

[{"name":"READ_CALENDAR","timesUsed":[1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0]}, {"name":"READ_CONTACTS","timesUsed":[1,0,0,0,0,0,0,0,0,0,0,0,5,8,12,3,2,0,1,0,0,0,0,0]}, {"name":"READ_EXTERNAL_STORAGE","timesUsed":[1,0,0,0,0,0,0,0,0,10,0,1,9,17,13,39,8,1,0,0,0,0,0,2]}, {"name":"WRITE_EXTERNAL_STORAGE","timesUsed":[1,0,0,0,0,0,0,0,0,10,0,2,9,17,13,38,8,1,0,0,0,0,0,2]}, {"name":"WRITE_SMS","timesUsed":[1,0,0,0,0,0,0,0,0,0,0,0,5,7,12,2,2,1,0,0,0,0,0,0]}, {"name":"CAMERA","timesUsed":[0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,2,2,1,0,0,0,0,0,0]}, {"name":"FINE_LOCATION","timesUsed":[0,0,0,0,0,0,0,0,0,15,4,0,0,0,0,2,0,0,0,0,0,0,0,0]}, {"name":"GPS","timesUsed":[0,0,0,0,0,0,0,0,0,3,0,0,0,1,1,2,0,0,0,0,0,0,0,0]}, {"name":"MONITOR_HIGH_POWER_LOCATION","timesUsed":[0,0,0,0,0,0,0,0,0,4,0,0,0,1,1,2,0,0,0,0,0,0,0,0]}, {"name":"MONITOR_LOCATION","timesUsed":[0,0,0,0,0,0,0,0,0,3,0,0,0,1,1,2,0,0,0,0,0,0,0,0]}, {"name":"OP_READ_PHONE_STATE","timesUsed":[0,0,0,0,0,0,0,0,0,2,0,0,3,2,1,3,0,2,0,0,0,0,0,0]}, {"name":"POST_NOTIFICATION","timesUsed":[0,0,0,0,0,0,0,0,0,16,15,7,10,14,26,17,5,2,1,0,0,0,0,0]}, {"name":"TAKE_AUDIO_FOCUS","timesUsed":[0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,1,0,0,0,0,0,0,0,0]}, {"name":"TOAST_WINDOW","timesUsed":[0,0,0,0,0,0,0,0,0,14,15,7,10,9,13,12,3,1,0,0,0,0,0,0]}, {"name":"WAKE_LOCK","timesUsed":[0,0,0,0,0,0,0,0,0,6,0,0,1,3,2,17,7,2,0,0,0,0,0,1]}, {"name":"WIFI_SCAN","timesUsed":[0,0,0,0,0,0,0,0,0,2,0,0,0,0,2,0,0,0,0,0,0,0,0,0]}, {"name":"BOOT_COMPLETED","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,4,2,0,0,0,0,0,0,0,0,0,0]}, {"name":"GET_ACCOUNTS","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,4,4,0,3,0,0,0,0,0,0,0,0]}, {"name":"WIFI_CHANGE","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,4,2,0,0,0,0,0,0,0,0,0,0]}, {"name":"USE_FINGERPRINT","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0]}, {"name":"RECORD_AUDIO","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,0,0,0,0,0,0,0]}, {"name":"VIBRATE","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,0,0,0,0,0,0,0]}, {"name":"WRITE_CALENDAR","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0]}]

This data will then be parsed to a JSON Object with:

var jsonObj =  JSON.parse(obj); (where obj is the data)

Then the the data will be pushed to an array:

var seriesData = [];

for (var i in jsonObj) {
    seriesData.push({
        name: jsonObj[i].name ,
        y: jsonObj[i].timesUsed
    });
}

Then the Hichcharts scripts looks like this:

Highcharts.chart('permData', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Example graph'
        },
        xAxis: {
            categories: ['00-01','01-02','02-03','03-04','04-05','05-06','06-07','07-08','08-09','09-10','10-11','11-12','12-13','13-14','14-15','15-16','16-17','17-18','18-19','19-20','20-21','21-22','22-23','23-24']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Y axis text here'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: null /*(Highcarts.theme && Highcharts.theme.textColor) || 'gray'*/
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: null /*(Highcharts.theme && Highcharts.theme.background2) || 'white'*/,
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltop: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}:{point.y}<br/>',
        },
        plotOptions: {
            column: {
                stacking: 'percentage',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                }
            }
        },
        series: [{
            type: 'column',
            name: 'perm',
            data: seriesData
        }]
    });

Answer 1

You were very close, you have set y instead of data in your loop building the dataSeries. It should be like this:

for (var i in jsonObj) {
  seriesData.push({
    name: jsonObj[i].name ,
    data: jsonObj[i].timesUsed //data instead of y
  });
}

After changing that, it works in the fiddle. y is a member of data, and is used in case you want to set several properties for each point.

Working example: https://jsfiddle.net/ewolden/r5yd56eb/1/

API on series.data: https://api.highcharts.com/highcharts/series.column.data