So you’ve created a fancy app using Ruby on Rails and compiled a bunch of data with code and associations. That’s cool, but what does it all mean? You can have tons and tons of data, but if you can’t translate what the data is trying to tell you, it’s just a pile of tables and columns.
Data visualization is the representation of data or information in a chart, graph, for other visual format. It makes the data much more digestible to the viewer and easily allows for trends and patterns to be seen.
I’m going to take you on a walkthrough of setting up some basic charting for a simple application made with Ruby on Rails.
We’re going to be looking at a basic three-model relationship consisting of customers, purchases, and items. In my CUSTOMERS model, I only have a name and location for the attributes. The ITEMS model consists of a name and a price. The PURCHASES model joins the other two together and it also contains a purchase date and a quantity attribute. I’ve tried to keep things as simple as possible.
For the associations, a customer has many purchases and has many items through purchases. An item has many purchases and has many customers through purchases. The purchases belong to both the customers and the items. Everything was built using Ruby on Rails with standard RESTful routing and the database was loaded up with seed data.
We are going to use a Ruby plugin called Chartkick to add data visualization to our app. Chartkick is a free Ruby gem created by Andrew Kane and is licensed by MIT. We only need to add a few lines of text to setup our application to utilize Chartkick’ s plotting abilities. Let’s get started.
In your application’s Gemfile you need to add the line:
gem ‘chartkick’Go ahead and run ‘bundle install’ in your terminal prompt after you have done this.
If you have Rails 6 or Webpacker, you need to run:
yarn add chartkick chart.jsNext, got to your app/javascript/packs/application.js file and add the following lines:
require(“chartkick”)require(“chart.js”)
That’s it! From there, you are setup to start adding data visualization to your view files!
Chartkick has a website at https://chartkick.com that describes the capabilities of the add-on. There is also a link to a GitHub repository link there that goes a little more in-depth into the setup and parameters of all of the charts available.
So, back to our application. First we are going to create a simple donut chart to show how many of each item we have sold in our application we built:
This is the code that we added to our purchase model’s ‘index.html.erb’ file to plot this on our index page:
<%= pie_chart @purchases.includes(:item).group(:name).sum(:quantity), donut: true, legend: “left” %>There are a ton of attributes for chart plotting that you can modify as well. Check out the Chartkick Github page for more information.
Next, we can create a line chart to show monthly sales throughout the year.
For this, we needed to add another line to our Gemfile to group objects by date:
gem ‘groupdate’Don’t forget to run ‘bundle install’ after adding the gem. This is the code that we added to our purchase model’s ‘index.html.erb’ file to render the graph:
<%=line_chart @purchases.group_by_month(:purchase_date).sum(:quantity), ytitle: “Quantity Sold” %>The next visualization is a little bit fancier. This is a map showing the amount of purchases for particular countries based on the customers addresses shown on a map.
This plot utilizes Charkick along with Google Charts, so for this to work we needed to modify our data array to create a compatible input that I saved as a variable called @country_purchases. We also had to add this line to the top of our view page:
<%= javascript_include_tag “https://www.gstatic.com/charts/loader.js" %>Creating the map required a little bit of javascript injected on to our view page:
Plotting the map on to the page required this html line:
<div id="regions_div" style="width: 900px; height: 500px;"></div>This was just a quick walkthrough of a quick and easy way of implementing charts into your Rails application. The beautiful thing about these charts is that they stay up-to-date every time you refresh the page as your database is taking in new data.
Data visualization is a powerful tool to communicate trends and patterns that exist in data. Without it, all we have is a jumble of lists and we could be missing out on important messages and insight hidden in plain sight. And although Ruby isn’t the best tool for data analysis, there are easy ways to let the data speak to the user in a quick and meaningful manner.
