javascript - How to dynamically update highcharts using jQuery UI sliders - Stack Overflow

admin管理员组

文章数量:1400033

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 / . 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]
        }]
    });
});

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/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]
        }]
    });
});

• javascript
• jquery-ui
• jquery
• highcharts
• uislider

Share Improve this question Follow asked Mar 12, 2013 at 11:44 user2160685user2160685 8322 silver badges88 bronze badges 3

• How do you want the chart to change when you move the slider ? i.e. if the Units per month slide is set to 25, what would the chart plot ? – SteveP Commented Mar 12, 2013 at 12:03
• 1 Would just like to say, thank you for posting code and a JSFiddle! Most new users don't know to do that. But as Steve asked, we need a little bit more information about what the sliders would change. – MatthewKremer Commented Mar 12, 2013 at 12:20
• Let's say the price was $100 / month and 5 units a month were sold. Each month the data point would be calculated by the sum of the previous months, plus (unit*price) and the number of units would increase by 5 each month. For instance Month 1: (100*5) = 500 Month 2: 500 + (100*10) = 1500 Month 3: 1500 + (100*15) = 3000 Month 4: 3000 + (100*20) = 5000 etc... – user2160685 Commented Mar 12, 2013 at 13:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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/BLKQf/

本文标签： javascriptHow to dynamically update highcharts using jQuery UI slidersStack Overflow