Sparklines are small but intense charts. This gem is a wrapper around peity-vanilla library. You can generate simple but informative charts with vanilla JS.
- add gem to the
Gemfile
gem "peity_vanilla_rails"- Add to
application.js
//= require peity-vanilla-rails.jsIn application.js
import "peity-vanilla-rails";Note: After peity-vanilla-rails.js is imported, it will listen to changes of peity and data-peity attributes of every DOM element
Pure peity-vanilla library is also acessible via peity-vanilla.js for Assets Pipeline, and import peity from "peity-vanilla" for Importmaps
- Add charts in your code:
<h3>Line</h3>
<%= peity_line_chart([115,123,234,-113,-43,-223,127,332,152,233]) %>
<%= peity_line_chart(100.times.map{rand(100) * [1,-1].sample}, options: { width: 240, fill: 'lightgreen', stroke: 'blue' }) %>
<h3>Bar</h3>
<%= peity_bar_chart([115,123,234,-113,-43,-223,127,332,152,233]) %>
<%= peity_bar_chart('115,123,234,-132,152,233') %>
<%= peity_bar_chart(50.times.map{rand(100) }, options: { width: 240, fill: ['orange'], height: 30, padding: -0.1 }) %>
<h3>Pie</h3>
<%= peity_pie_chart "2/3" %>
<%= peity_pie_chart [3,10] %>
<%= peity_pie_chart [3,10], options: { fill: ["red", "#eeeeee"], radius: 10 } %>
<%= peity_pie_chart [236,300] %>
<h3>Donut</h3>
<%= peity_donut_chart "2/3" %>
<%= peity_donut_chart [6,20] %>
<%= peity_donut_chart [236,300] %>Check the original page.
<%= peity_line_chart([5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2], id: 'updating-chart') %>
<script>
var updatingChart = document.getElementById("updating-chart");
setInterval(function() {
var random = Math.round(Math.random() * 10)
var values = updatingChart.innerText.split(",")
values.shift()
values.push(random)
updatingChart.innerText = values.join(",")
}, 1000);
</script>More information here: https://github.com/railsjazz/peity_vanilla.
You can pass in options any of the attributes.
<script>
peity.defaults.pie = {
delimiter: null,
fill: ["#58508d", "#ffa600", "#ff6361"],
height: null,
radius: 8,
width: null
}
peity.defaults.donut = {
delimiter: null,
fill: ["#ff9900", "#fff4dd", "#ffd592"],
height: null,
innerRadius: null,
radius: 8,
width: null
}
peity.defaults.line = {
delimiter: ",",
fill: "#fff4dd",
height: 16,
max: null,
min: 0,
stroke: "#ffa600",
strokeWidth: 1,
width: 32
}
peity.defaults.bar = {
delimiter: ",",
fill: ["#4d89f9"],
height: 16,
max: null,
min: 0,
padding: 0.1,
width: 32
}
</script>- remote datasource and autoupdate
You are welcome to contribute.
The gem is available as open source under the terms of the MIT License.
