Recently, I’ve been using Highcharts, Google charts and Chart Js for visualizing dynamic data in my projects. But it was difficult to integrate it with the rails application. However, for every problem in Ruby, there is a gem out there to save your day and Chartkick, a Ruby gem exclusively available for data visualization is truly a savior. Chartkick can work with Highcharts, Chart.js and Google charts to create dynamic and interactive charts that draw data from the Rails application. And the best part, you just need to write one single line of Ruby code. Isn’t that amazing and powerful!

Let’s begin with Installation

For installation, all you have to do is adding this line to your application’s Gemfile:

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:

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:

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:

Next, add in the code listed below to your views/show view.
app/views/views/show.html.erb:

We can also create graphs with Multiple Series with the below codes

or

Voila! there you have it how you want.

Here is an example charts I got for you
Chartkick

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!

References