CODEWITHSUNDEEP
javascripthighcharts
JasonDavis
JasonDavis

Reputation: 48933

Update HighCharts chart when AJAX Updates my data on my page

I have a Page where I have some Project Stats based on different Project Task Statuses. On this page I use AJAX to update my Stat values as they change.

I am now trying to integrate a Highcharts bar chart/graph and I need to update it;s chart when my data changes.

There is a JSFiddle here showing the chart I am experimenting with now http://jsfiddle.net/jasondavis/9dr345og/1/

$(function () {
    $('#container').highcharts({
        data: {
            table: document.getElementById('datatable')
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Project Stats'
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Total'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.point.y + ' ' + this.point.name.toLowerCase();
            }
        },
        subtitle: {
          enabled: true,
          text: 'Project Stats'
        },
        legend: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        credits: {
          enabled: false
        }

    });


    // Button Click to Simulate my Data updating.  This increments the Completed Tasks bar by 1 on each click.
    $(".update").click(function() {
        var completedVal = $('#completed').text();
        ++completedVal
        $('#completed').text(completedVal)
    }); 

});

So this example is getting the data from a Table but I do not have to use this method, I could also set it with JavaScript if needed.

I just need to figure out how I can update all these values on the fly as my real live page updates my task stat values using AJAX so I would like this chart to update live as well.

Any help on how to make it update? When my AJAX code is ran, I could call some JavaScript at that point if there is a function that rebuilds the chart?

Upvotes: 1

Views: 814

Answers (1)

Mark
Mark

Reputation: 108512

I would drop the use of the table, especially since it looks like you are building it just for highcharts to consume it. Instead return your data via AJAX as a Highcharts series object. and then use the Series.setData method to update your plot. This would be the right way to do it.

If you really want to use the table, you could query out the data and still use setData (this is what Highcharts is doing for you under the hood). Updated fiddle.

$(".update").click(function() {
    var completedVal = $('#completed').text();
    ++completedVal;
    $('#completed').text(completedVal);
    // get y values
    var yValues = $.map($('#datatable tr td'),function(i){return parseFloat($(i).text());});
    // set data
    Highcharts.charts[0].series[0].setData(yValues);    
});

Upvotes: 1

Related Questions