gem “chartkick” Then you have to choose your charting library. In case, if more than one charting library is loaded, choose between them with the following code:
<%= line_chart data, adapter: "google" %> <!-- or highcharts -->P.S:- highcharts is the default adapter is nothing else is defined. Using Chartkick Once it’s installed, you can start playing around with chartkick. For example:
<%= line_chart User.group_by_day(:created_at).count %>
In the above example, I have just shown you how we can make a line chart.Similarly, you can create Pie chart, Column chart, Bar chart, Area chart, Scatter chart, Geo charts, Timeline(Google Charts)etc. All you need is that one line of Ruby code. Cool, isn’t it!!
Chartkick gives you a variety of options to make your charts interesting. You can also set a Global option for each chart by using initializers and even customize the HTML. Data can be passed as a Hash or as an Array. You can find more details about using Chartkick options, sending data in Chartkick documentation. Now, let’s have some real fun by using Chartkick to create some interactive Graphs, using Dynamic data. To create a graph which drives data from the ajax request, you just need to define a method in the controller and pass the JSON data. For example app/controllers/views_controller.rb:class ViewsController < ApplicationController
def show
@view = View.all
end
def views_by_day
render json: View.group_by_day(:viewed_at, format: "%B %d, %Y").count
end
end
Next, add in the code listed below to your views/show view.
app/views/views/show.html.erb:
<div class="container"> <h3>Views By Day</h3> <%= line_chart views_by_day_view_path %> </div>We can also create graphs with Multiple Series with the below codes
<%= line_chart @.map { |view|
{name: view.name, data: view.feats.group_by_week(:created_at).count}
} %>
or
<%= line_chart Feat.view(:view_id).group_by_week(:created_at).count %>Voila! there you have it how you want. Here is an example charts I got for you
So, next time if you want to create charts and graphs easily in your web application, don’t forget to use Chartkick and let me know in the comment section if you know any such tool that made your coding a bliss!
Happy Coding!
I like to tutorial. It’s helpful. I came across it looking for ways to use chartkick that updates the charts without refreshing the page, dynamic data. The post has the dynamic tag, but I didn’t find any references to displaying dynamic data. Do you have any recommendations on where to find that information? Is there an update coming that will cover that?
Hi there.There are surely solutions for displaying dynamic data.You can refer http://www.chartkick.com for more details.
You can use this to refresh the data at equal intervals of time.Or else you can do this if you want to refresh the graph only when you need with an ajax call.
You can create a partial and render it inside the controller.
class ViewsController 'dynamic_data_partial'
end
end
Then create a partial _dynamic_data_partial.html.erb inside your view folder with the following data.
So when you need to call the data, you need to trigger the ajax call and in the success function you need to replace the html of the div with the new data.
So in the app/views/views/show.html.erb: move the graph into a div.
Views By Day
So you can you use the id of the div to replace the html.
function updateGraph() {
$.ajax({
type: "GET",
url: "",
success: function(data) {
$('#view_graph').html(data);
}
});
}
This is how i solved it when i came across the problem. Hope it’ll help you. Thank you for the comment.
Hi there.There are surely solutions for displaying dynamic data.You can refer http://www.chartkick.com for more details.
< %= line_chart url, refresh: 60 %>You can use this to refresh the data at equal intervals of time.Or else you can do this if you want to refresh the graph only when you need with an ajax call.
You can create a partial and render it inside the controller.
class ViewsController < ApplicationController def show @view = View.all end def views_by_day @dynamic_data = View.group_by_day(:viewed_at, format: "%B %d, %Y").count render :partial => 'dynamic_data_partial'
end
end
Then create a partial _dynamic_data_partial.html.erb inside your view folder with the following data.
< %= line_chart @dynamic_data %>
So when you need to call the data, you need to trigger the ajax call and in the success function you need to replace the html of the div with the new data.
So in the app/views/views/show.html.erb: move the graph into a div.
Views By Day
So you can you use the id of the div to replace the html.
function updateGraph() {
$.ajax({
type: "GET",
url: "< %= Rails.application.routes.url_helpers.views_by_day_view_path %>",
success: function(data) {
$('#view_graph').html(data);
}
});
}
This is how i solved it when i came across the problem. Hope it’ll help you. Thank you for the comment.