Discussion on Implementing Pie Charts with Chart.js in Rails 7

June 20, 2023

The conversation involved user Obie Fernandez, Founder and CEO of Olympia, inquiring about the easiest way to generate pie charts in HTML for his superadmin screens in Rails administrate. The assistant recommended the use of JavaScript charting libraries like Chart.js or D3.js and provided a step-by-step guide on how to implement it. Obie then asked about the inclusion of Chart.js via CDNJS in Rails 7 Importmaps. The assistant provided detailed instructions, after which Obie confirmed that the solution worked.

Mike Nichols
Pair Programmer

what's the easiest way to generate pie charts in html for displaying in my superadmin screens (rails administrate based)

Obie Fernandez over 1 year ago

Sure, for generating pie charts in HTML for your Rails superadmin screens, you'd typically use a JavaScript charting library like Chart.js or D3.js.

Here's a basic way to do it with Chart.js:

  1. Include the Chart.js library in your application. You can do this by adding it to your application.js file:
   //= require chartjs
  1. Create a canvas element in your HTML where you want the chart to appear:
   <canvas id="myChart"></canvas>
  1. In your JS file, you'd select that canvas and create a new pie chart on it:
   var ctx = document.getElementById('myChart').getContext('2d');
   var myPieChart = new Chart(ctx, {
       type: 'pie',
       data: {
           labels: ['Red', 'Blue', 'Yellow'],
           datasets: [{
               data: [10, 20, 30],
               backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 206, 86)'],
           }],
       },
   });

Note that the data array is where you'd put your actual data for the pie slices, and the backgroundColor array is where you'd specify the colors for those slices. You'd probably want to generate these dynamically based on your own data.

Remember to include these files in the corresponding administrate views.

Is that what you were looking for, or do you need help with something more specific?

Mike Nichols over 1 year ago

how do I include chartjs via cdnjs if i'm using rails 7 importmaps?

Obie Fernandez over 1 year ago

To use Chart.js with Rails 7 and Importmap, follow these steps:

  1. Add the Chart.js library to your importmap by including it in your config/importmap.rb. The pin_all_from function will import Chart.js and pin all its modules.
pin_all_from "https://cdn.jsdelivr.net/npm/chart.js@latest/dist", under: "chart.js"
  1. Run the importmap:refresh task to update your importmap.json:
./bin/rails importmap:refresh
  1. Now, you can import Chart.js in your JavaScript files like this:
import { Chart } from "chart.js/auto";
  1. After this, you can follow the same process of creating a canvas in your HTML and initializing a new Chart instance on it using JavaScript.

Add this information to your existing Chart.js implementation and you're good to go!

Mike Nichols over 1 year ago

That worked thanks 🙏🏻

Obie Fernandez over 1 year ago

You're welcome, Obie! I'm glad it worked out for you. If you have any more questions or need further help, feel free to ask. Enjoy working with Chart.js!

Mike Nichols over 1 year ago