Chartjs-Implement Chart.js Plugin Meteor Project

by

0👍

✅

You may load the script on the server and then include it in your html (as in the example downsample samples) …

<head>
  <title>Scatter Chart</title>
  <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
  <script src="../chartjs-plugin-downsample.js"></script>

Otherwise, you may take the source of the script and place it in the JavaScript of your page.

In either case, then add the downsample settings in the options section …

options: {
    downsample: {
        enabled: true,
        threshold: 500 // max number of points to display per dataset
    }
}

2👍

In general, the best way to use chart.js in Meteor is to use the chart.js NPM package. Run meteor npm install chart.js --save from the command line to import the chart.js package. Then to use chart.js on a client page add a chart.js import and instantiate the chart from the Template onRendered callback.

If your chart depends on data from a published collection, then you must first ensure that the subscription is complete, then render the chart after (using Tracker.afterFlush()). Here is an example showing all of these elements together.

Template file:

<template name="kpi_application_status">
  <canvas id="kpiApplicationStatus"></canvas>
</template>

Template definition:

import { Template } from 'meteor/templating';
import { Kpis } from '../../../api/kpis/kpis.js';
import { Chart } from 'chart'

import './kpi-application-status.html';

var buildChart = function() {
  var kpi = Kpis.find({kpi_type: 'application_status'});

  if (kpi.count() > 0) {
    var labels = [];
    var data = [];
    var color = [];

    kpi.forEach((record) => {
      record.kpis.forEach((item) => {
        labels.push(item.status);
        data.push(item.count);

        switch(item.status) {
          case 'Unvalidated':
            color.push('#FD625E');
            break;
          case 'Validated':
            color.push('#01a982');
            break;
        }
      });
    });

    var chartData = {
      labels: labels,
      datasets: [
        {
          data: data,
          backgroundColor: color,
          hoverBackgroundColor: color
        }
      ]
    };

    var kpiApplicationStatus = this.$('#kpiApplicationStatus');
    var doughnutChart = new Chart(kpiApplicationStatus, {
      type: 'doughnut',
      data: chartData,
      options: {
        responsive: true,
        legend: {
          display: true,
          position: 'bottom',
          labels: {
                        generateLabels: function(chart) {
                            var data = chart.data;
                            if (data.labels.length && data.datasets.length) {
                                return data.labels.map(function(label, i) {
                                    var meta = chart.getDatasetMeta(0);
                                    var ds = data.datasets[0];
                                    var arc = meta.data[i];
                                    var custom = arc.custom || {};
                                    var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
                                    var arcOpts = chart.options.elements.arc;
                                    var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
                                    var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
                                    var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);

                                    return {
                                        text: label + " (" + ds.data[i] + ")",
                                        fillStyle: fill,
                                        strokeStyle: stroke,
                                        lineWidth: bw,
                                        hidden: isNaN(ds.data[i]) || meta.data[i].hidden,

                                        // Extra data used for toggling the correct item
                                        index: i
                                    };
                                });
                            } else {
                                return [];
                            }
                        }
                    }
        },
        tooltips: {
          mode: 'label'
        },
        showAllTooltips: true
      }
    });
  }
};

Template.kpi_application_status.onRendered(function() {
  this.subscribe('chartData', 'application_status', () => {
    Tracker.afterFlush(() => {
      buildChart();
    })
  });
});

Since you are also trying to use an additional chart.js plugin, you just make sure you also import that corresponding NPM package as well using the same command line approach:

meteor npm install chartjs-plugin-downsample --save

Leave a comment