Simplifies using Chart.js in Rails views.
- All of Chart.js's features via one line of Ruby.
- Animates unless you have Modernizr and it doesn't detect canvas support (reason). You can manually override this.
- Optional alternative abscissa scale calculations (see Chart.js#132).
- Optional utility method for filling in gaps in integer series.
This gem includes Chart.js v1.0.2.
Add this line to your application's Gemfile:
gem 'chartjs-ror'
And then execute:
$ bundle
In your JavaScript manifest, add:
//= require Chart
//= require excanvas
You only need excanvas for IE7 and IE8. Add Modernizr if you need it to your app's assets.
Each chart type has a corresponding helper for your views. The helper methods take the same arguments as their Javascript counterparts. The options
are always optional.
<%= line_chart data, options %>
<%= bar_chart data, options %>
<%= radar_chart data, options %>
<%= polar_area_chart data, options %>
<%= pie_chart data, options %>
<%= doughnut_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!
You can use these helpers instead:
<%= chartjs_line_chart data, options %>
<%= chartjs_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 %>
For example, to render a line chart in Javascript:
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var options = {};
new Chart(ctx).Line(data,options);
The Ruby equivalent is:
data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
}
options = {}
<%= line_chart data, options %>
You can put anything in the options
hash that Chart.js recognises. It also supports these non-Chart.js settings:
:class
- class of the enclosing<figure/>
- default ischart
.:id
- id of the<canvas/>
- default ischart-n
wheren
is the 0-based index of the chart on the page.:width
- width of the canvas in px - default is400
.:height
- height of the canvas in px - default is400
.:generateLegend
- whether or not to generate a legend - default isfalse
.
<figure class="chart">
<canvas id="chart-0" width=400 height=400></canvas>
<!-- legend rendered here -->
</figure>
<script type="text/javascript">
(function() {
var initChart = function() {
var data = {labels: ["Apples","Bananas","Cherries"], datasets: [{"data":[42,153,...],...}, ...]};
var opts = {"scaleFontSize":10};
if (!("animation" in opts)) {
opts['animation'] = (typeof Modernizr == "undefined") || Modernizr.canvas;
}
var canvas = document.getElementById("chart-0");
var ctx = canvas.getContext('2d');
var chart = new Chart(ctx).Bar(data, opts);
window.Chart["chart-0"] = chart;
var legend = chart.generateLegend();
var legendHolder = document.createElement("div");
legendHolder.innerHTML = legend;
canvas.parentNode.insertBefore(legendHolder.firstChild, canvas.nextSibling);
};
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.
If you specify a custom template, e.g. in legendTemplate
or tooltipTemplate
, you must escape opening tags in the Javascript-template string, i.e. use <%%= value %>
instead of <%= value %>
.
You need to add an escape %
character for each level of rendering. For example:
- If your view calls the chart helper directly, use
<%%= value %>
. - If your view renders a partial which calls the chart helper, use
<%%%= value %>
.
If you pass the option generateLegend: true
, a legend will be rendered using chart.generateLegend()
(docs).
The plugin implements its own abscissa scale calculations which I prefer to Chart.js's (see Chart.js#132). You can opt-in to these calculations by passing scaleOverride: true
in the options
hash, without any of the other scale override keys (scaleSteps
, scaleStepWidth
, scaleStartValue
).
Copyright Andrew Stewart, AirBlade Software. Released under the MIT licence.