Reputation: 544
I'm building an application that has a lot of graphs. I'd like to make the graphs load in via Ajax to reduce initial load time. This is what the current dashboard view looks like.
<section class="container">
<section class="row">
<div class="span6 graph-container">
<h3 class="box-header"><i class="icon-truck"></i>Service Levels</h3>
<div class="box">
<img src="/assets/loading.gif" class="loading" />
<%= content_tag :div, "", id: "shipments-by-service-type", data: {shipments: @charts[:service_analysis][:spend_data]} %>
</div>
</div>
<div class="span6 graph-container">
<h3 class="box-header"><i class="icon-circle"></i>Weight Summary</h3>
<div class="box">
<%= content_tag :div, "", id: "weight-ranges", data: {weight: @charts[:weight_analysis][:spend_data]} %>
</div>
</div>
</section>
<section class="row">
<div class="span6 graph-container">
<h3 class="box-header"><i class="icon-road"></i>Zone Summary</h3>
<div class="box">
<%= content_tag :div, "", id: "weight-groups-zones", data: {zone: @charts[:zone_analysis][:spend_data]} %>
</div>
</div>
<div class="span6 graph-container">
<h3 class="box-header"><i class="icon-time"></i>Spend Over Time</h3>
<div class="box">
<%= content_tag :div, "", id: "shipping-trends", data: {trends: @charts[:shipping_trends][:spend_data]} %>
</div>
</div>
</section>
</section>
My current thought is to be a controller called charts_controller.rb
This would contain all of the logic for each of the charts and have a view or partial the corresponds with a method and then load in via Ajax each one of those views.
class ChartsController < ApplicationController
before_filter :authenticate_user!, :company_id
def service_level
#logic for service_level graph
respond_to do |format|
format.html
format.js
end
end
end
for example I'm new to working with Ajax inside of rails and am not sure how to go about doing this. Does this approach make sense?
Upvotes: 0
Views: 74
Reputation: 125
You could "draw" the charts in a partial on the server side. If you are using jQuery then you could use the jQuery.load function:
$('#graph-div').load('/my_restful_route');
The controller would have something like:
render partial: 'chart_partial'
Upvotes: 1