Question

I have a Highchart’s graph that needs to be regenerated every minute. I was curious as to how one would refresh the following graph? http://pastebin.com/bEwkX8Fk

I thought perhaps just refreshing the div may be sufficient, but after further thought I realized that I’d probably have to initiate some kind of call from the controller to update the data for the graph. Any thoughts here as to the correct approach?

I am thinking now that perhaps updating it with the Highcharts json functionality would be best, but I’m not sure where to start yet there.

Answer 1

You will want to setup an ajax request to the server that polls every X ms, preferably with jquery like this.

var ajax_path = #{action_controller_path}
function pollData() {
  $.ajax({
    type: 'get',
    url: ajax_path,
    success: function(data) {
      // update chart
      var series = chart.series[0],
            shift = series.data.length > 20; // shift if the series is longer than 20          
      chart.series[0].addPoint(data, true, shift);

      setTimeout(pollData, 60000) // Poll data every 60s
    }
  });
}

On the rails side you will then need to create a Controller#action to feed this ajax request, remember to set your your responds_to to include json. Something along the lines of this, please take this code “as is”:

respond_to :json, only: [:polling_action]
def polling_action
  @data_point = Model.get_data
  respond_with @data_point
end

I think the specifics of how to actually update the chart is stated in the article @nikita-beloglazov referenced: http://www.highcharts.com/documentation/how-to-use and here http://www.highcharts.com/ref/#series-object for the addPoint (Object options, [Boolean redraw], [Boolean shift], [Mixed animation]) api reference which is what you should call after you have loaded the data point with the ajax polling method.

NOTE: Keep in mind polling data is not an very efficient process unless you know the interval at which the data is being updated. Considering you only need to update this data every 60s this is probably not an issue but just putting it out there for others that might stumble upon this.