Part 1: Integration
First of all, Chart.js is a “Simple yet flexible JavaScript charting for designers & developers” which provides a quick and easy way to spin up charts.
However, we will also style the charts to make it look like all the Premium charts out there.
We will start with including the CDN style and script between our <head> tags in layouts/application.html.erb
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@2.9.1/dist/Chart.min.css"><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1/dist/Chart.min.js"></script>
Then we add within the page .erb partial (eg. pages/index.html.erb) the HTML tag:
<canvas id="myChart" width="960" height="200"></canvas>and the default script for initializing our chart:
<script>var ctx = document.getElementById('myChart');var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)'],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
})…
This guide will get you started with both Rails 5 and Bootstrap 4 as well as will dive in some bootstrap 4 theming and finally will deploy and cover some of the quickest ways to get a Rails 5 App running on Heroku.
- Setup a new Rails 5 Application
- Include Bootstrap 4
- Add a custom Bootstrap 4 Theme
- Create a Dashboard Fluid Layout
1. Setup a new Rails 5 Application
We start our rails theme development with running the following command:
$ rails new stackOnce the Rails 5 scaffold has been finished we start the server by running:
$ rails sThat’s it you now have a running rails 5 fresh boilerplate setup.. go to your browser and type http://localhost:3000/ you should…
