Question

This chart is built on the fly once a submit button is called. The chart renders with proper series names but no lines are displayed.
I have a $.get call in my Highcharts chart like this:

series: [           
    <% {"WEB1" => Farm.WEB,
        "CAT1" => Farm.CAT,
        "ELK1" => Farm.ELK,
           }.each do |name, farm| %>
    {
    name: "<%= name %>",
    pointInterval: <%= 1.day * 1000 %>,
    pointStart: document.forms["myform"]["from"].value,
    data: $.get("/farm/1", {
        scope: "<%= name %>", 
        from: document.forms["myform"]["from"].value, 
        to: document.forms["myform"]["to"].value 
        }
          })
    },
    <% end %>]

Which is designed to return this custom json hash:

[{"x":"2012-07-10T17:00:00Z","y":0.015}]

This all works. The get returns the proper hash. But Highcharts does not like this. Does anyone have any suggestions as to how I can get this properly formatted? Thanks in advance!

EDIT

This is what I’m thinking.. but it doesn’t work..

 function(data){
        var arr = new Array();
            $.each(data, function(index,obj) {
               arr.push(obj.y);
       });setData(arr);

Answer 1

You are simply, doing it wrong. This is not how ajax works. AJAX is asynchronous and hence doesn’t return anything, but makes a callback instead.

data: $.get(...)

is the problem, as $.get doesnt return anything immediately, but neither does it block or interrupt the js processing, and hence browser continues executing the next block of js, even before your ajax call gets completed.

This is how you would generally do it. You first make the $.get call, and on completion of it, you create the chart.

$.get("/farm/1", {
    scope: "<%= name %>", 
    from: document.forms["myform"]["from"].value, 
    to: document.forms["myform"]["to"].value 
    },function(data){
          // use the data that was received to build the highchart
          chart=....
      }
});

http://api.jquery.com/jQuery.get/