[Rails] Dynamic Data in Highcharts

[John Sanderbeck]

I have a chart page with 12 charts on it. Each chart is in a self
contained partial. Each chart is a different group of data however the
common filter is a date range which I pass into the partial.

I implemented a jQRangeSlider to select the date range and pass that to
the controller which in turn re-renders the page.

I can't seem to get the charts to refresh showing the new data. I can
see in the terminal window the queries being called and they have the
right date however the chart is not refreshing.

HELP !!!

John

Part of the Controller
-------------------
class ChartsController < ApplicationController
  def charts
    if params.has_key?(:startdate)
      @startdate = params[:startdate]
      @enddate = params[:enddate]
    end
    @displaystartdate = @startdate.to_date.strftime("%m/%d/%Y")
    @displayenddate = @enddate.to_date.strftime("%m/%d/%Y")
    respond_to do |format|
      format.html
      format.js
    end
  end
end

Primary Chart View
----------------------
<br />
<div id="slider"></div>
<br />
<script>
  function pad2(number) {
       return (number < 10 ? '0' : '') + number
  };

  function datachanged(displaystart,displayend) {
    $("#date_display h2").text('Dates from '+displaystart+' to
'+displayend);
  };

  $("#slider").dateRangeSlider({
    arrows: false,
    bounds:{
      min: <%= first_training_jq %>,
      max: <%= last_training_jq %>
    },
    defaultValues:{
      min: <%= date_to_jq_date(@startdate) %>,
      max: <%= date_to_jq_date(@enddate) %>
    },
    });

  $("#slider").bind("userValuesChanged", function(e, data){
    var startdate = data.values.min;
    var enddate = data.values.max;
    var displaystart =
pad2(startdate.getMonth()+1)+'/'+pad2(startdate.getDate())+'/'+startdate.getFullYear();
    var displayend =
pad2(enddate.getMonth()+1)+'/'+pad2(enddate.getDate())+'/'+enddate.getFullYear();;

    var
newstartdate=startdate.getFullYear()+'-'+pad2(startdate.getMonth()+1)+'-'+pad2(startdate.getDate());
    var
newenddate=enddate.getFullYear()+'-'+pad2(enddate.getMonth()+1)+'-'+pad2(enddate.getDate());

    $("#date_display h2").text('Dates from '+displaystart+' to
'+displayend);

    $.ajax({
          url: "/charts",
          type: 'POST',
          data: { startdate: newstartdate, enddate : newenddate},
          cache: false,
          dataType: 'json'
      });
  });

</script>

<div class="navigation">
  <table>
    <tr>
      <td><%= link_to 'Back to Main Menu', :controller => 'home',
:action => 'menu' %></td>
    </tr>
  </table>
  <br>
</div>

<div id="date_display" align="center"><h2>Dates from <%=
@displaystartdate %> to <%= @displayenddate %></h2></div>

<div id="chart_list" align="center"><table>
  <tr>
    <td>
      <%= render partial: 'chart8', :locals => {:startdate =>
@startdate, :enddate => @enddate} %>
    </td>
  </tr>
</div>

And finally _chart8 partial
-----------------------
<script type="text/javascript" charset="utf-8">
  $(function() {
    new Highcharts.Chart({
      chart: {
        defaultSeriesType: "column",
        type: "column",
        renderTo: "charts8"
      },
      title: {
        text: "Test/Test"
      },
      xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
      },

      yAxis: {
        title: {
          text: "Counts"
        }
      },
      tooltip: {
        pointFormat: '<tr><td
style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y}</b></td></tr>',
      },
    legend: {
      enabled: false
      },
      series: [{
        name: "Counts",
        data: <%= raw test_count_by_initiative(startdate, enddate)
%>
      }],
    dataLabels: {
        enabled: true,
        rotation: -90,
        color: '#FFFFFF',
        align: 'right',
        format: '{point.y:.1f}', // one decimal
        y: 10, // 10 pixels down from the top
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
    }
    });
  });
</script>
<div id="charts8"></div>

-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups "Ruby 
on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to rubyonrails-talk+unsubscr...@googlegroups.com.
To post to this group, send email to rubyonrails-talk@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/rubyonrails-talk/467a2cace7e24222b44644bbf8548f4e%40ruby-forum.com.
For more options, visit https://groups.google.com/d/optout.