HassaanSeeker
Posts: 1
Joined: Sat Dec 08, 2018 9:43 am

Update geoJSON Data with button click

I am trying to update data with button click which i am getting from http server using flask. But it is not working
Below is the Code:

Code: Select all

var seriesOptions = []
    seriesCounter = 0
    names = ['2016', '2017', '2018']

$.each(names, function(i, name){
    $.getJSON('http://127.0.0.1:8080/data-' + name,
        function(data){

            seriesOptions[i] = {
                name: name,
                data: data
            };

            seriesCounter += 1;

            if ( seriesCounter == names.length )

            { 


var chart = Highcharts.chart('container2', {
    chart: {
        type: 'area'
    },
    title: {
        text: 'Monthly Trend for Issued Spare Parts Cost 2016 - 2018'
    },
    subtitle: {
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Monthly Count Issued Items'
        },
        labels: {
            formatter: function () {
                return this.value / 1000;
            }
        }
    },
    tooltip: {
        split: true,
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    series: seriesOptions


});
}
    });
});





$('#button').click(function () {
    if (chart.series.length === 1) {
        chart.addSeries({
            name: '2016',
            data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
        });
    }
});[code]
[/code]
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Update geoJSON Data with button click

Hello HassanSeeker,

Check this example with jQuery - demo: https://jsfiddle.net/Bastss/zbqufsxj/, where after clicking update button whole chart is redrawing. Here is an example without jQuery - https://jsfiddle.net/Bastss/v709ugjf/, where after click button chart data is updating. Compare these examples, mix them and write the best code for you. If something is unclear - feel free to ask :)

Kind regards!
Sebastian Wędzel,
Highcharts Developer

Return to “Highcharts Usage”