I have a drop down menu
called info
and I want to update my highchart everytime a user selects a value through the info menu
.
Here is the code:
$('#info').on('change', function() {
add_info(this.value);
});
The add_info()
method simply gets data via ajax and this is how I am processing it after getting the response
back:
if(chart=='stacked_chart'){
console.log(JSON.stringify(response));
var series = [{name:'Coached',data:[]},{name:'Non Coached',data:[],stack: 'yes'},{name:'Delta',data:[],stack: 'yes'}],
year, month, day;
for(var i=0; i<response.length;i++){
var d = response[i].date.split(",");
year = parseFloat(d[0]);
month = parseFloat(d[1])-1; //date.utc method starts month 0-11
day = parseFloat(d[2]);
var coached = +(parseFloat(response[i].coached).toFixed(3));
var non_coached = +(parseFloat (response[i].non_coached).toFixed(3));
var delta = +(parseFloat (response[i].delta).toFixed(3));
series[0].data.push([Date.UTC(year,month,day),coached]);
series[1].data.push([Date.UTC(year,month,day),non_coached]);
series[2].data.push([Date.UTC(year,month,day),delta]);
console.log(Date.UTC(year,month,day));
}
console.log(series);
if(series.length){
stacked_chart.userOptions.series = series;
var chart = new Highcharts.Chart(stacked_chart.userOptions);
console.log(chart.series[0].data[0].options);
console.log(chart.series[1].data[0].options);
console.log(chart.series[2].data[0].options);
}
}
I can see it brings back the new data but It doesn't redraw. I have looked at here but couldn't redraw the chart. Any ideas how to reset the chart every time a user selects a new value from the drop down?