Your using a $.ajax call but not handling the response in any way. It also
seems that the data for your charts is being driven by instance variables
from the controller. This means that the data is set for the chart once,
when the page is rendered and then never again.
I think what you want to do here is have your front-end charts populated
through an ajax call, wrapped in a method. This same method is used when
you need to refresh the data on the page. Essentially the HTML is rendered
to give you the page structure and populate this with data using the ajax
call, as opposed to using iVars from the controller. Take a look at the
jQuery documentation to get an idea on how to handle the ajax response.
You will want to write handler code for error responses as well to improve
your debugging experience.
Does this make sense/help you out? If not I can toss a small example of
what I'm talking about here.
On Monday, February 15, 2016 at 11:50:47 AM UTC-8, Ruby-Forum.com User
wrote:
>
> 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 [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/e5cedd28-eadc-4bd2-854a-85eb79af3105%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
