Issues with series.data in highcharts

Question

I'm using a column chart with a slider that redraws the chart after slide operation is invoked. I'm storing each data array in a javascript object and the chart renders according to the slider option. After assigning the initial values for the first slider option, the chart renders correctly but when I slide back to the first position, the chart won't render. And the weird part is when I assign the initial values to a separate variable and the data option is assigned with this variable, the chart renders correctly at every position. Here's the code:

var data = {
                        "jan": [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0],
                        "feb": [0, 5, 25, 35, 30, 10, 0, 10, 25, 30, 25],
                        "mar": [0, 30, 18, 4, 18, 30, 0, 20, 30, 25, 15],
                        "apr": [0, 20, 30, 25, 15, 10, 0, 10, 15, 25, 30],
                        "may": [0, 10, 15, 25, 30, 20, 0, 35, 123, 978, 43],
                        "jun": [54, 5, 546, 77, 34, 3, 2, 567, 567, 7, 57],
                        "jul": [56, 324, 768, 578, 124, 154, 90, 150, 125, 258, 312],
                        "aug": [67, 76, 4, 76, 23, 2, 24, 10, 15, 546, 30],
                        "sep": [6, 5, 35, 123, 978, 4, 32, 10, 15, 546, 30],
                        "oct": [97, 56, 7, 567, 567, 7, 57, 10, 15, 25, 30],
                        "nov": [56, 4, 65, 25, 6, 565, 56, 10, 15, 546, 30],
                        "dec": [0, 10, 15, 546, 30, 33, 0, 10, 15, 546, 30]
                    };
var someData =  [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0];

var chart = new Highcharts.chart({
                    chart: {
                        renderTo: 'container',
                        type: 'column',
                        marginTop: 50,
                        marginLeft: 100,
                        marginBottom: 50
                    },
                    title: false,

                    exporting: {enabled: false},
                    xAxis: {
                        crosshair: true,
                        tickColor: '#7F7F7F',
                        lineColor: '#7F7F7F',
                        tickWidth: 0,
                        labels: {
                            step: 5
                        },
                        title: {
                            text: 'x-axis',
                            align: "left",
                            x: -10,
                            rotation: 0,
                            style: {
                                "font-size" : "15px"
                            }
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'y-axis',
                            align: 'high',
                            rotation: 0,
                            y: -10,
                            offset: 0,
                            style: {
                                "font-size" : "15px"
                            }
                        },
                        gridLineColor: 'transparent',
                        lineColor: '#7F7F7F',
                        lineWidth: 1,
                        tickWidth: 1,
                        tickColor: '#7F7F7F',
                        gridLineWidth: 0,
                        minorGridLineWidth: 0,
                        labels: {
                            step: 2,
                            formatter: function(){
                                if(this.value > 999)
                                    return Math.round(this.value/1000) + 'k';
                                return this.value;
                            }
                        }
                    },
                    tooltip: {
                        enabled: false
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        },
                        series: {
                            colorByPoint: true
                        }
                    },
                    series: [{
                        showInLegend: false,
                        data: someData
                    }],
                    credits: false
                });

$('#slider_bar').on("slide", function () {
                    chart.series[0].setData(data[document.getElementById('value').innerHTML]);
});

The initial position of the slider is at jan and the chart renders correctly when I slide back to jan. I'd like to know why the chart won't render when I assign series.data as:

data: data.jan

Any suggestions?

Answer 1

Highchart series.data expects a key value pair, or an array of arrays like

[[x1,y1],[x2,y2]]

or

{

 y: [x1,x2]
}

now when you do data = data.jan Highchart is not able to find the Y value because data.jan is a simple array

Answer 2

Found the solution:

instead of writing

data: data.jan

write

data: data.jan.slice()

The slice function does not directly returns the reference of the array, instead it returns a copy of the array. I still wonder why we need to use the slice function in the first place, for this particular situation but it works.