Displaying array values in Bar chart of HighCharts

Question

I am trying to display values which I am getting dynamically. In the below code I am trying to store the values in array and I am trying to use the array values in "series: data". Nothing is getting displayed in the graph. I know this is very simple question but I did not get any satisfactory answer when I googled it. Please help

var x = window.location.search.replace( "?", "" );
        x = x.substring(3);
        var array = x.split(",");  // I am storing my dynamic values in  this array


$(function () {
        //alert(array);   ----- I am able to see the values here 
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Wireless Experience Meter'
            },
            subtitle: {
                text: 'Sub - Time to Download'
            },
            xAxis: {
                categories: ['Text'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Time (ms)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ' ms'
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Attempt 1',
                //data: [635, 203, 200] 
                data : [array[0]]   // I need to pass the variables here to get it displayed 
            }, {
                name: 'Attempt 2',
                //data: [133, 408, 698]
                data : [array[1]]
            }, {
                name: 'Attempt 3',
                //data: [973, 914, 4054]
                data : [array[2]]
            }]
        });
    });

Mark · Accepted Answer · 2013-12-09 04:45:52Z

2

You don't tell us what the variable array equals but since its generated from x.split(","), it's elements are going to be strings and not the numeric values Highcharts needs.

So convert it with parseInt or parseFloat:

var numericData = [];
for (var i = 0; i < array.length; i++){
   numericData.push(parseFloat(array[i]));
}
...
series: [{
   name: 'Attempt 1',
   data : numericData 
},
...

answered Dec 9, 2013 at 4:45

Mark

109k20 gold badges180 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gillyspy · Accepted Answer · 2013-12-07 05:19:00Z

0

[array[0]] is not an array, that looks like console output not javascript. But [[0]] or [0] technically would be. However, since a call to array (array(0)) generates an array then I think you want data: array(0).

Outside shot at data : [array(0)] if you didn't show the example data correctly. I've never used HighCharts so I don't know what it's expected but I still go with data : array(0)

answered Dec 7, 2013 at 5:19

gillyspy

1,6089 silver badges14 bronze badges

Collectives™ on Stack Overflow

Displaying array values in Bar chart of HighCharts

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related