README.md in chartjs-ror-2.0.0 vs README.md in chartjs-ror-2.1.0
- old
+ new
@@ -31,150 +31,93 @@
## 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 always optional.
-### Charts with multiple datasets
```erb
-<%= line_chart labels, datasets, options %>
-<%= bar_chart labels, datasets, options %>
-<%= radar_chart labels, datasets, options %>
+<%= line_chart data, options %>
+<%= bar_chart data, options %>
+<%= radar_chart data, options %>
+<%= polar_chart data, options %>
+<%= pie_chart data, options %>
+<%= doughnut_chart data, options %>
```
For example, to render a [line chart][linechart] in Javascript:
```javascript
var data = {
- labels : ["January","February","March","April","May","June","July"],
- datasets : [
- {
- fillColor : "rgba(220,220,220,0.5)",
- strokeColor : "rgba(220,220,220,1)",
- pointColor : "rgba(220,220,220,1)",
- pointStrokeColor : "#fff",
- data : [65,59,90,81,56,55,40]
- },
- {
- fillColor : "rgba(151,187,205,0.5)",
- strokeColor : "rgba(151,187,205,1)",
- pointColor : "rgba(151,187,205,1)",
- pointStrokeColor : "#fff",
- data : [28,48,40,19,96,27,100]
- }
- ]
-}
+ 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:
```ruby
-@data = {
- labels: ["January","February","March","April","May","June","July"],
- datasets: [
- {
- fillColor: "rgba(220,220,220,0.5)",
- strokeColor: "rgba(220,220,220,1)",
- pointColor: "rgba(220,220,220,1)",
- pointStrokeColor: "#fff",
- data: [65,59,90,81,56,55,40]
- },
- {
- fillColor: "rgba(151,187,205,0.5)",
- strokeColor: "rgba(151,187,205,1)",
- pointColor: "rgba(151,187,205,1)",
- pointStrokeColor: "#fff",
- data: [28,48,40,19,96,27,100]
- }
- ]
+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 %>
+options = {}
+<%= line_chart data, options %>
```
-### Charts with one dataset
-
-```erb
-<%= polar_chart data, options %>
-<%= pie_chart data, options %>
-<%= doughnut_chart data, options %>
-```
-
-For example, to render a [pie chart][piechart] in Javascript:
-
-```javascript
-var data = [
- {
- value : 30,
- color: "#D97041"
- },
- {
- value : 90,
- color: "#C7604C"
- },
- {
- value : 24,
- color: "#21323D"
- },
- {
- value : 58,
- color: "#9D9B7F"
- },
- {
- value : 82,
- color: "#7D4F6D"
- },
- {
- value : 8,
- color: "#584A5E"
- }
-]
-new Chart(ctx).Pie(data,options);
-```
-
-And in Ruby:
-
-```ruby
-@data = [
- {
- value: 30,
- color: "#D97041"
- },
- {
- value: 90,
- color: "#C7604C"
- },
- {
- value: 24,
- color: "#21323D"
- },
- {
- value: 58,
- color: "#9D9B7F"
- },
- {
- value: 82,
- color: "#7D4F6D"
- },
- {
- value: 8,
- color: "#584A5E"
- }
-]
-<%= pie_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 is `chart`.
-* `:element_id` - id of the `<canvas/>` - 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`.
+* `:class` - class of the enclosing `<figure/>` - default is `chart`.
+* `:element_id` - id of the `<canvas/>` - 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`.
+* `:generateLegend` - whether or not to generate a legend - default is `false`.
### Sample output:
```html
<figure class="chart">
@@ -193,54 +136,46 @@
var ctx = canvas.getContext('2d');
var chart = new Chart(ctx).Bar(data, opts);
window.Chart["chart-0"] = chart;
var legend = chart.generateLegend();
- if (legend.trim().length > 0) {
- var legendHolder = document.createElement("div");
- legendHolder.innerHTML = legend;
- canvas.parentNode.insertBefore(legendHolder.firstChild, canvas.nextSibling);
- }
+ var legendHolder = document.createElement("div");
+ legendHolder.innerHTML = legend;
+ canvas.parentNode.insertBefore(legendHolder.firstChild, canvas.nextSibling);
};
if (window.addEventListener) {
- window.addEventListener('load', initChart, false);
+ window.addEventListener("load", initChart, false);
+ document.addEventListener("page:load", initChart, false);
}
else if (window.attachEvent) {
- window.attachEvent('onload', initChart);
+ window.attachEvent("onload", initChart);
+ document.attachEvent("page:load", initChart);
}
})();
</script>
```
The Javascript is actually written out on a single line but you get the idea.
-### Templates (tooltips and legends)
+### Templates (tooltips and legends) and Rails views
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 exampe:
+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 %>`.
### Legend
-A legend will be rendered using `chart.generateLegend()` ([docs][advanced]).
+If you pass the option `generateLegend: true`, a legend will be rendered using `chart.generateLegend()` ([docs][advanced]).
-If you don't want a legend, supply `legendTemplate: " "` in the options for your chart. For some reason an empty string causes an exception inside Chart.js so use a single space.
-
### Scale calculations
The plugin implements its own abscissa scale calculations which I prefer to Chart.js's (see [Chart.js#132][calculations]). 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`).
-
-
-## Inspiration
-
-* [Chart.js][] (obviously)
-* [Chartkick][]
## Intellectual Property
Copyright Andrew Stewart, AirBlade Software. Released under the MIT licence.