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
}
}]
}
}
})…


Image for post
Image for post
Stack Rails Admin Theme (PRO Version)

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.

  1. Setup a new Rails 5 Application
  2. Include Bootstrap 4
  3. Add a custom Bootstrap 4 Theme
  4. 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 stack

Once the Rails 5 scaffold has been finished we start the server by running:

$ rails s

That’s it you now have a running rails 5 fresh boilerplate setup.. go to your browser and type http://localhost:3000/ you should…

About

RailsThemes.com

Senior Front-End & Rails Developer at railsthemes.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store