Question

I am trying to display a Line graph using Seer using Ajax.

But all I get is a blank page when I make an ajax request.The same partial works fine when I display is using a render :partial.

Here is the partial _show.html.erb

<div id="chart"></div>
<%= Seer::init_visualization -%>
<%= Seer::visualize(
      sensors, 
      :as => :line_chart,
      :in_element => 'chart',
      :series => {
        :series_label => 'location',
        :data_label => 'id',
        :data_method => 'value',
        :data_series => series
      },
      :chart_options => { 
        :height => 250,
        :width => 500,
        :axis_font_size => 12,
        :colors => ['#0099CC','#990000','#009900'],
        :title => "Rain Data",
        :point_size => 0,
        :line_size => 3,
        :title_y => "Water Level in Feet",
        :smooth_line => "true",
      }
     )
 -%>

This works:

<%= render :partial => 'hcfcdsensors/show', :locals => {:sensors => @sensors , :series => @series} %>

But this Doesn’t:

<%= link_to_remote "show" , :url => show_graph_hcfcd_url(@hcfcdsensors) ,:update => "graphDiv" %>

The complete web page just goes blank.
I have checked the action and availability of required variables in the page and its all there fine.

Any help is welcome.

Thanks
Shaunak

Answer 1

When making ajax call, You need to draw the chart manually.
Seer user ” drawChart()” method to draw the chart.

Below is my ajax response

<% result_script = Seer::visualize(
      @flight_result_search.sell_classes_for_graph, 
      :as => :area_chart,
      :in_element => 'historical_sellout_chart',
      :series => {
        :series_label => 'name',
        :data_label => 'days_prior',
        :data_method => 'capacity',
        :data_series => [@flight_result_search.current_sell_for_graph,@flight_result_search.historical_sell_for_graph]
      },
      :chart_options => { 
        :height => 400,
        :width => 600,
        :axis_font_size => 11,
        :title => "Historical Sell Out Chart",
        :point_size => 3,
        :color =>['#324F69','#90000B']
      }
     )

%>
<%= result_script.gsub("</script>",' drawChart();</script>') %>

Don’t forget to eval your ajax response as it is javascript code .
Also drawChart() should be in same script tag otherwise it doesn’t work.