How to dynamically update highcharts using jQuery UI sliders

问题:

I am looking for a way to dynamically update Highcharts based on the value determined by jQuery UI sliders. I am not well versed yet with AJAX or JSON yet so I haven't had much luck. I am trying to get the revenue to increase incrementally over the given months (like for instance, a subscription service). To make it easier, I have put it on jsFiddle http://jsfiddle.net/nlem33/Sbm2T/3/ . Any help would be much appreciated, thanks!

$(function () { var chart; $(document).ready(function() {     chart = new Highcharts.Chart({         chart: {             renderTo: 'container',             backgroundColor: null,             type: 'area'         },         title: {             text: ''         },         subtitle: {             text: ''         },         xAxis: {             categories: ['1', '2', '3', '4', '5', '6',],             tickmarkPlacement: 'on',             title: {                 text: 'months'             }         },         yAxis: {             title: {                 text: '$(thousands)'             },             labels: {                 formatter: function() {                     return this.value / 1000;                 }             }         },         tooltip: {             formatter: function() {                 return ''+                     this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' hundred';             }         },         plotOptions: {             area: {                 stacking: 'normal',                 lineColor: '#666666',                 lineWidth: 1,                 marker: {                     lineWidth: 1,                     lineColor: '#666666'                 }             }         },         legend:{             align: 'bottom',             x: 275,             borderColor: null         },          credits: {             enabled: false         },         series: [{             name: 'Revenue',             data: [100, 130, 170, 220, 350, 580]         }, {             name: 'Cost',             data: [100, 120, 140, 160, 180, 200]         }]     }); }); 

回答1:

I don't quite upderstand how you want your calculation to work, but I can help with how to update the chart. Basically, you need to create a new aray of datapoints, and then call setData on the appropriate chart series.

I tried this on your example. The calcuation (ui.value * i) needs to be changed, but it ilustrates how to update the chart. It uses the valueof the second slider to update the first series points:

slide: function(event, ui) {     $('#slider2_value').html('$' + ui.value);     var newdata = [];     for (var i=0 ; i<6 ; i++) {         newdata.push(ui.value * i);     }     chart.series[0].setData (newdata); }, 

http://jsfiddle.net/BLKQf/

文章来源: How to dynamically update highcharts using jQuery UI sliders