Who doesn't love data when it's this pretty?

Img 1040
Steve Brewer
3 months ago
Within an hour of finding Chart.js I now have 5 beautiful charts on the site that use live data, that's up to date the moment you load the page. 

I haven't refactored how I want to scale this and use it on the site yet, but I'll share what I have so far. 

First up here's the view that initialises where Chart.js will put the data. Nothing much to see here beyond some canvas tags with IDs that our JS will look for. 
<div class="m-grid__box--invisible">
  <h2>Most popular languages</h2>
  <p>The number of people who have listed the language as one they use.</p>
  <canvas id="languageFans" width="400" height="400"></canvas>
</div>
<div class="m-grid__box--invisible">
  <h2>Most active members</h2>
  <p>
    <%= I18n.t('explanations.score') %>
  </p>
  <canvas id="memberScore" width="400" height="400"></canvas>
</div>
<div class="m-grid__box--invisible">
  <h2>Most popular hackrooms</h2>
  <p>The number of members who have joined the hackroom.</p>
  <canvas id="hackroomMembers" width="400" height="400"></canvas>
</div>
<div class="m-grid__box--invisible">
  <h2>Most popular hackrooms</h2>
  <p>The number of members who have joined the hackroom.</p>
  <canvas id="hackroomMembersDoughnut" width="400" height="400"></canvas>
</div>
<div class="m-grid__box--invisible">
  <h2>Most chatty members</h2>
  <p>Top 10 members who comment.</p>
  <canvas id="chattyKathys" width="400" height="400"></canvas>
</div>

Below that is the JavaScript for building the charts. Here's the first chart, a bar of hackrooms and the number of members each room has. 
:javascript

  var hackroomMembersCanvas = $("#hackroomMembers");

  var hackroomMembers = new Chart(hackroomMembersCanvas, {
      type: 'bar',
      data: {
          labels: gon.hackroom_names,

          datasets: [{
              label: '# of members',
              data: gon.hackroom_members,
              backgroundColor: gon.hackroom_colours,
              borderColor: gon.hackroom_colours,
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });
So what's this gon variable? I've shoved the Gon gem in for translating Rails variables from the controller into arrays the JavaScript can use. 

Finally, let's get the data we want. In the controller for this page, I've added the following: 
  def charts
    @hackrooms = []
    @hackroom_colours = []
    @hackroom_members = []
    Hackroom.all.in_popularity_order.each do |hackroom|
      @hackrooms << hackroom.name
      @hackroom_colours << hackroom.colour
      @hackroom_members << hackroom.users.size
    end
    gon.hackroom_names = @hackrooms
    gon.hackroom_colours = @hackroom_colours
    gon.hackroom_members = @hackroom_members
  end
As Chart.js reads arrays, I've passed some arrays of the data we want to Gon and it's stuck them into JS variables.

I'm sure this could do with refactoring, suggestions in the comments welcome. Don't forget to check the graph after if you comment 😉

data

Rails

Ruby

JavaScript

Comments

Sign in with GitHub to comment
Sign in