Skip to content

TracksApp/chartjs-ror

 
 

Repository files navigation

chartjs-ror

Simplifies using Chart.js in Rails views.

Current Chart.js version

This gem includes Chart.js v2.7.3.

Installation

Add this line to your application's Gemfile:

gem 'chartjs-ror'

And then execute:

$ bundle

There are two builds of Chart.js: with or without Moment.js.

Choose the appropriate one in your javascript manifest:

  • Without Moment.js:

    //= require Chart.min
  • With Moment.js:

    //= require Chart.bundle.min

Please note Chart.js no longer supports IE8 and below.

Usage

Each chart type has a corresponding helper for your views. The helper methods take the same arguments as their Javascript counterparts. The options are optional.

<%= line_chart           data, options %>
<%= bar_chart            data, options %>
<%= horizontal_bar_chart data, options %>
<%= radar_chart          data, options %>
<%= polar_area_chart     data, options %>
<%= pie_chart            data, options %>
<%= doughnut_chart       data, options %>
<%= bubble_chart         data, options %>
<%= scatter_chart        data, options %>

If you don't want these helpers – perhaps they clash with other methods in your views – add this initializer to your app:

# config/initializers/chartjs.rb
Chartjs.no_conflict!

Then you can use these helpers instead:

<%= chartjs_line_chart           data, options %>
<%= chartjs_bar_chart            data, options %>
<%= chartjs_horizontal_bar_chart data, options %>
<%= chartjs_radar_chart          data, options %>
<%= chartjs_polar_area_chart     data, options %>
<%= chartjs_pie_chart            data, options %>
<%= chartjs_doughnut_chart       data, options %>
<%= chartjs_bubble_chart         data, options %>
<%= chartjs_scatter_chart        data, options %>

For example, to render a line chart in Javascript:

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(220,220,220,0.2)",
            borderColor: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            backgroundColor: "rgba(151,187,205,0.2)",
            borderColor: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};
var options = { ... };
new Chart(ctx, {
    type: 'Line',
    data: data,
    options: options
});

The Ruby equivalent is:

data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
        label: "My First dataset",
        backgroundColor: "rgba(220,220,220,0.2)",
        borderColor: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
        label: "My Second dataset",
        backgroundColor: "rgba(151,187,205,0.2)",
        borderColor: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }
  ]
}
options = { ... }
<%= line_chart data, options %>

You can also use underscored symbols for keys, instead of the camelcase versions. They will be converted to their lower camelcase counterparts on output.

data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
        label: "My First dataset",
        background_color: "rgba(220,220,220,0.2)",
        border_color: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
        label: "My Second dataset",
        background_color: "rgba(151,187,205,0.2)",
        border_color: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }
  ]
}
options = { ... }
<%= line_chart data, options %>

Options

You can put anything in the options hash that Chart.js recognises. To pass a JavaScript function as an option value, wrap it in quotation marks to make it a string.

You can also use these non-Chart.js settings:

  • :class - class of the DOM canvas element - default is chart.
  • :id - id of the DOM canvas element - default is chart-n where n is the 0-based index of the chart on the page.
  • :width - width of the canvas in px - default is 400.
  • :height - height of the canvas in px - default is 400.

Sample output

<canvas id="chart-0" class="chart" width=400 height=400></canvas>
<script type="text/javascript">
  //<![CDATA[
  (function() {
    var initChart = function() {
      var ctx = document.getElementById("chart-0");
      var chart = new Chart(ctx, {
        type: "Line",
        data = { ... };
        options = { ... };
      });
    };

    if (typeof Chart !== "undefined" && Chart !== null) {
      initChart();
    }
    else {
      if (window.addEventListener) {
        window.addEventListener("load", initChart, false);
      }
      else if (window.attachEvent) {
        window.attachEvent("onload", initChart);
      }
    }
  })();
  //]]>
</script>

The Javascript is actually written out on a single line but you get the idea.

Intellectual Property

Copyright Andrew Stewart, AirBlade Software. Released under the MIT licence.

About

Simplifies using Chart.js in Rails

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Ruby 100.0%