A working Bar Chart using Chartjs

help
1

Hi, can anyone support me in creating a working bar chart example using Chartjs? I’ve attempted using the package and the example from the Chartjs site but had trouble rendering it.

2

What does your current code look like?

3

Template.charts.onRendered(function() {
// Get the context of the canvas element we want to select
var ctx = document.getElementById(“myChart”).getContext(“2d”);

// Set the data
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
    {
        label: "My First dataset",
        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)',
            '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)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1,
        data: [random(), random(), random(), random(), random(), random(), random()],
    }
]

};

// var myBarChart = new Chart(ctx, {
// type: ‘bar’,
// data: data,
// options: options
// });

var myChart = new Chart(ctx).Bar(data);

});

function random() {
return Math.floor((Math.random() * 100) + 1);
}

4

I installed chart.js from npm:

meteor npm install chart.js --save

Then my charts template:

<head>
  <title>A title</title>
</head>

<body>
  {{> charts}}
</body>

<template name="charts">
  <div style="width:800px; height:500px;">
    <canvas id="myChart"></canvas>
  </div>
</template>

Then my template code:

import { Template } from 'meteor/templating';
import Chart from 'chart.js/src/chart.js';

function random() {
  return Math.floor((Math.random() * 100) + 1);
}

Template.charts.onRendered(function () {
  // Set the data
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First dataset',
        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)',
          '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)',
          'rgba(255, 159, 64, 1)',
        ],
        borderWidth: 1,
        data: [random(), random(), random(), random(), random(), random(), random()],
      },
    ],
  };

  const myBarChart = new Chart('myChart', {
    type: 'bar',
    data,
    options: {
      maintainAspectRatio: false,
    },
  });
});
1 Like
5

It worked!! Thank you so much! Do you have any idea what I was doing wrong?

6

As far as the JavaScript’s concerned, all I really did was fix all linting errors (which probably didn’t do too much as far as execution was concerned), simplify some of the usage and use the “official” syntax for rendering the chart (which you’d basically commented out).

Otherwise, I just outlined all the build steps, in case you’d missed any. However, I didn’t know what you’d done in the way of the template, so I went with the simplest, guaranteed-to-work template.

So, some combination of all/some of those! :slight_smile:

2 Likes