Chartjs-Adding model data to Charts.js in Rails

You already answered it yourself more or less. All you need to do is insert the values. We had to work on a similar task a few years back – Windhager Brennstoff Barometer.

Here is the code as reference – it should help you applying the same principle on whatever task you working on:

Controller:

class FuelBarometersController < ApplicationController
  ...

  def show
    # Austria
    @austria = FuelBarometer.where("custom_country_id = ?", 1).order(date_entered: :asc)
    # Germany
    @germany = FuelBarometer.where("custom_country_id = ?", 2).order(date_entered: :asc)
    # Swiss
    @swiss = FuelBarometer.where("custom_country_id = ?", 3).order(date_entered: :asc)
    # France
    @france = FuelBarometer.where("custom_country_id = ?", 4).order(date_entered: :asc)

    @custom_countries = CustomCountry.where("barometer = ?", true).order(id: :asc)
    add_breadcrumb t('breadcrumb.home'), :welcome_path, :title => t('breadcrumb.home-title')
    add_breadcrumb t('mainnav.useful_information'), :knowledge_path, :options => { :title => t('mainnav.useful_information') }
    add_breadcrumb t('side_menus.knowledge_box.barometer'), :knowledge_barometer_path, :options => { :title => t('side_menus.knowledge_box.barometer') }
    respond_with(@fuel_barometer)
  end

end

And the corresponding view ( ignore all the clutter – it was a rushed implementation – you get the idea ):

/Austria
- tg_at = ((@austria.last.gas - @austria.offset(1).last.gas)/@austria.offset(1).last.gas)
- to_at = ((@austria.last.heizoel - @austria.offset(1).last.heizoel)/@austria.offset(1).last.heizoel)
- tp_at = ((@austria.last.pellets - @austria.offset(1).last.pellets)/@austria.offset(1).last.pellets)

/Germany
- tg_de = ((@germany.last.gas - @germany.offset(1).last.gas)/@germany.offset(1).last.gas)
- to_de = ((@germany.last.heizoel - @germany.offset(1).last.heizoel)/@germany.offset(1).last.heizoel)
- tp_de = ((@germany.last.pellets - @germany.offset(1).last.pellets)/@germany.offset(1).last.pellets)

/Swiss
- tg_ch = ((@swiss.last.gas - @swiss.offset(1).last.gas)/@swiss.offset(1).last.gas)
- to_ch = ((@swiss.last.heizoel - @swiss.offset(1).last.heizoel)/@swiss.offset(1).last.heizoel)
- tp_ch = ((@swiss.last.pellets - @swiss.offset(1).last.pellets)/@swiss.offset(1).last.pellets)

/France
- tg_fr = ((@france.last.gas - @france.offset(1).last.gas)/@france.offset(1).last.gas)
- to_fr = ((@france.last.heizoel - @france.offset(1).last.heizoel)/@france.offset(1).last.heizoel)
- tp_fr = ((@france.last.pellets - @france.offset(1).last.pellets)/@france.offset(1).last.pellets)

/ Setting default value for select
- default_value = 0
- if I18n.locale == :at
  - default_value = 1
- elsif I18n.locale == :de
  - default_value = 2
- elsif (I18n.locale == :ch_de) || (I18n.locale == :ch_fr)
  - default_value = 3
- elsif  (I18n.locale == :fr) || (I18n.locale == :int_fr)
  / Default value has been changed from 4 to 1 since france is no longer available
  - default_value = 1
- else
  - default_value = 1

%div.header
  - myBackground = image_path "headers/" + device_type.to_s + "/blank_header.jpg"
  .container.responsive-header{:style => "background: url(" + myBackground + ")"}
    - if browser.ie8? || browser.ie7?
      %h2.blank_message= t('general.old-browser-message')
    - else
      .row
        .col-md-3.col-sm-12.col-xs-12.mt20.mb20
          / Display the homepage carousel
          %h2= t('fuel_barometers.show.pick-your-country')
          = select_tag "list", options_from_collection_for_select(@custom_countries, "id", "name", default_value), :class => "form-control"
          %h2= t('fuel_barometers.show.price-tendency')
          .col-md-4.col-sm-4.col-xs-4
            %h3.gas.center
              = t('fuel_barometers.form.gas')
            %p.big_number.gas{:id => "i_gas"}
              x
            %p.big_number.gas{:id => "a_gas"}
              x
          .col-md-4.col-sm-4.col-xs-4
            %h3.heizoel.center
              = t('fuel_barometers.form.heizoel')
            %p.big_number.heizoel{:id => "i_heizoel"}
              x
            %p.big_number.heizoel{:id => "a_heizoel"}
              x
          .col-md-4.col-sm-4.col-xs-4
            %h3.pellets.center
              = t('fuel_barometers.form.pellets')
            %p.big_number.pellets{:id => "i_pellets"}
              x
            %p.big_number.pellets{:id => "a_pellets"}
              x
        .col-md-9.col-sm-12.col-xs-12.mt20.mb20
          %canvas#teaser4{:height => ((device_type == :desktop) ? "310" : "610"), :width => "818"}
          %br
          %p.source{:id => "source"}


%div.content
  .container
    .col-md-3.col-sm-4.col-xs-12
      = render 'side_menus/knowledge_box'
    .col-md-7.col-sm-8.col-xs-12
      .col-md-12.col-sm-12.col-xs-12
        = t('.content_html')
    .col-md-2.col-sm-12.col-xs-12.topmargin30
      - if I18n.locale == :at
        = render "shared/pellets_supplier"

/ Create Labels for Austria
- a_at = []
- g_at = []
- o_at = []
- p_at = []
- @austria.each do |at|
  - a_at << at.date_entered.strftime('%-m.%Y')
  - g_at << at.gas
  - o_at << at.heizoel
  - p_at << at.pellets

/ Create Labels for Germany
- d_de = []
- g_de = []
- o_de = []
- p_de = []
- @germany.each do |de|
  - d_de << de.date_entered.strftime('%-m.%Y')
  - g_de << de.gas
  - o_de << de.heizoel
  - p_de << de.pellets

/ Create Labels for Swiss
- c_ch = []
- g_ch = []
- o_ch = []
- p_ch = []
- @swiss.each do |ch|
  - c_ch << ch.date_entered.strftime('%-m.%Y')
  - g_ch << ch.gas
  - o_ch << ch.heizoel
  - p_ch << ch.pellets

/ Create Labels for France
- f_fr = []
- g_fr = []
- o_fr = []
- p_fr = []
- @france.each do |fr|
  - f_fr << fr.date_entered.strftime('%-m.%Y')
  - g_fr << fr.gas
  - o_fr << fr.heizoel
  - p_fr << fr.pellets

:javascript

  var selVal = $("#list").val();

  var source = document.getElementById("source");

  if (selVal == 1) {
    teaser4 = {
    labels : [#{a_at.join(', ')}],
    datasets : [
      {
        label: "Gas",
        fillColor: "rgba(0,0,0,0.0)",
        strokeColor: "rgba(0,148,220,1)",
        pointColor: "rgba(0,148,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(0,148,220,1)",
        data : [#{g_at.join(',')}]
      },
      {
        label: "Heizöl",
        fillColor: "rgba(0,0,0,0.0)",
        strokeColor: "rgba(222, 0, 24, 1)",
        pointColor: "rgba(222, 0, 24, 1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(222, 0, 24, 1)",
        data : [#{o_at.join(',')}]
      },
      {
        label: "Pellets",
        fillColor: "rgba(0,0,0,0.0)",
        strokeColor: "rgba(82, 181, 23, 1)",
        pointColor: "rgba(82, 181, 23, 1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(82, 181, 23, 1)",
        data : [#{p_at.join(',')}]
      }
    ]
    }

    var element = document.getElementById("i_gas");
    element.innerHTML = #{'%.2f' % tg_at};

    var element = document.getElementById("a_gas");
    if (#{tg_at} < 0)
    {
      element.innerHTML = "<i class=\"fa fa-chevron-circle-down fa-2x\"></i>";
    }
    else if (#{tg_at} > 0)
    {
      element.innerHTML = "<i class=\"fa fa-chevron-circle-up fa-2x\"></i>";
    }
    else
    {
      element.innerHTML = "<i class=\"fa fa-chevron-circle-right fa-2x\"></i>";
    }

    var element = document.getElementById("i_pellets");
    element.innerHTML = #{'%.2f' % tp_at};

    var element = document.getElementById("a_pellets");
    if (#{tp_at} < 0)
    {
      element.innerHTML = "<i class=\"fa fa-chevron-circle-down fa-2x\"></i>";
    }
    else if (#{tp_at} > 0)
    {
      element.innerHTML = "<i class=\"fa fa-chevron-circle-up fa-2x\"></i>";
    }
    else
    {
      element.innerHTML = "<i class=\"fa fa-chevron-circle-right fa-2x\"></i>";
    }

    var element = document.getElementById("i_heizoel");
    element.innerHTML = #{'%.2f' % to_at};

    var element = document.getElementById("i_heizoel");
    element.innerHTML = #{'%.2f' % to_at};

    var element = document.getElementById("a_heizoel");
    if (#{to_at} < 0)
    {
      element.innerHTML = "<i class=\"fa fa-chevron-circle-down fa-2x\"></i>";
    }
    else if (#{to_at} > 0)
    {
      element.innerHTML = "<i class=\"fa fa-chevron-circle-up fa-2x\"></i>";
    }
    else
    {
      element.innerHTML = "<i class=\"fa fa-chevron-circle-right fa-2x\"></i>";
    }
    source.innerHTML = "<p><em>Quelle: proPellets Austria; Bezugswert für die Berechnung ist der Heizwert der Energieträger, Wirkungsgrade der Heizsysteme nicht berücksichtigt</em></p>"
  } else if (selVal == 2) {
    ...
  }
  ...