Ruby on Rails Monday, February 15, 2016

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+unsubscribe@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.

No comments:

Post a Comment