How to call a method on a function OR how to redraw Highcharts dynamically

Question

While this questions is based around Rails and Highcharts, I suspect that the real issue is my poor javascript abilities.

I'm trying to add a Highcharts chart to a Rails 3.2 app that will all a user to dynamically update the data shown via an ajax call.

So far I have the chart displaying on page load, but am unable to get the chart to redraw when the user selects new data. From reading related questions on SO and elsewhere, I think I need to use Highcharts setData method. However, due to the way my code is structured, I'm unsure how to call this method on the chart.

My code looks like this:

$(document).ready ->
  if $("#graph_container").length
    fetchData $('#graph_container').data('id') 
fetchData = (id) ->
  params =
    method: "graph_data"
    date_from: $("#date_from").val()
    date_to: $("#date_to").val()
  $.ajax
    url: "/events/" + $('#graph_container').data('id')
    type: "GET"
    async: true
    data: params
    dataType: "json"
    success: (data) ->
      plotData data
plotData = (data) -> 
  options =  
    series: [{
      name: 'Events',
      data: data
    }]
  $("#graph_container").highcharts options

This is working perfectly when the page loads. I now want to bind the refresh to a click event. From what I've read I need to do something like

jQuery ->
  $("#refresh_btn").click ->
    params =
      method: "graph_data"
      date_from: $("#date_from").val()
      date_to: $("#date_to").val()
    $.ajax
      url: "/events/" + $('#graph_container').data('id')
      type: "GET"
      async: true
      data: params
      dataType: "json"
      success: (data) ->
        chart.setData(data)

But in these example the chart is named variable

chart = new Highcharts.Chart(options)

How should I modify my code, so that I can call the setData on my plotData function. I suspect this is a very rudimentary javascript question - I'd be very grateful for an explanation that would help me learn.

The chart will be in a global object, Highcharts.charts[0], not sure how you use that within coffeescript, maybe just Highcharts.charts[0].setData... I'm still trying figure why people use coffeescript :) — Mark

Buck Doyle Buck Doyle · Accepted Answer · 2014-05-17T16:21:59

You can convert your code to use the constructor rather than the jQuery initialiser:

plotData = (data) -> 
  options =
    chart:
      renderTo: $('#graph_container')
    series: [{
      name: 'Events'
      data: data
    }]
  chart = new Highcharts.Chart(options)

The renderTo option tells Highcharts which element to render the chart into. Otherwise it’s the same.

If you plan to use chart outside plotData, you’ll have to store a reference to it so it’s accessible. The simplest way would be to attach it to window, but global variables are frowned upon.

How to call a method on a function OR how to redraw Highcharts dynamically

1 Answers