Also jQuery documentation for ajax method can be found here
- http://api.jquery.com/jquery.ajax/
On Tuesday, February 16, 2016 at 1:11:58 PM UTC-8, Rob Lane wrote:
>
> 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/13de3a95-56a8-479a-bd71-8f989a9e0db7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
