Ruby on Rails, JSON and Highcharts

Question

I'm trying to get highcharts graphs to update automatically from a table. Currently i'm coding each record in one by one as follows:

<script> ... }, series: [{ name: 'Number of Notes By Class Module', data: [<%= Note.where(:subject_type => 'English').count %>, <%= Note.where(:subject_type => 'Geography Class C').count %>, <%= Note.where(:subject_type => 'Maths Class B').count %>] }] }); }); </script> 

And in the model notes.rb:

def self.subject_analysis(subject_type) Note.where(:subject_type => English).count if subject_type == :english Note.where(:subject_type => Geography_Class_C).count if subject_type == :Geography_Class_C Note.where(:subject_type => Maths_Class_B).count if subject_type == :Maths_Class_B end 

Classmodules schema

 t.integer "student_id" t.string "subject" t.datetime "created_at", null: false t.datetime "updated_at", null: false 

Clearly this is not ideal. What I want is for the column chart to update automatically when a new record is put in the table. To do this I think I need to use JSON in my controller and pass it to Highcharts. Only I don't know how to do this. Any guidance? Thanks. If more info required I will provide.

Answer 1

You need 3 steps to set it up:

1. Create a route for the JSON API in your routes file like:

   get 'highchart-data', to: 'controller_name#action_name' 

2. Create an action in a controller (match the route you just created):

   def action_name @data = [Note.where(:subject_type => 'English').count, Note.where(:subject_type => 'Geography Class C').count, Note.where(:subject_type => 'Maths Class B').count] render json: @data end 

3. In your js file, assuming you are using jQuery and run on your localhost with port 3000, get the data from the route created above. Add this line before you create the series:

   $.getJSON('http://localhost:3000/highchart-data', function(data) { var highChartData = data; }); 

And in series replace the data line with:

 data: highChartData 

Answer 2

If by 'update automatically' you mean that a chart is always up to date when the browser is refreshed, you don't need to use JSON and your implementation can be relatively simple.

First, I would move the actual data compilation into the model itself. Something like this would construct the three-element array you require:

class Note < ActiveRecord::Base ... def self.highchart_data data = [] self.subject_types.each do |type| data << self.type_count(type) end data end private def self.subject_types pluck(:subject_type).uniq end def self.type_count(type) where(subject_type: type).count end end 

Then your controller is extremely simple:

class BarChartController < ApplicationController def show @data = Note.highchart_data end ... end 

As far as getting the @data instance variable into your JS, there are several different approaches. One of them might look like:

In your show view:

<%= javascript_tag do %> window.highchartDATA = '<%= @data %>'; <% end %> 

In your JS:

... series: [{ name: 'Number of Notes By Class Module', data: highchartDATA }] ... 

Note that this code is to illustrate concepts and not meant to be copy and pasted.

Update

Based on your comment, I've updated the example code to use the unique subject_types added by users.