Using "canvas-gauges" npm package with Meteor?

Hi, I’m new to web development and thought Meteor would be a good starting place as I want reactivity.
I’ve managed to get an Arduino sending data via Mqtt to meteor and the value displayed and updated when changed so happy so far.
How I want to have the data value displayed as a gauge and found the “canvas-gauges” npm package of opensource gauges. Is it possible to use this with Meteor? BTW I’m using the default Blaze.


Hi John, Welcome to the forums!

Almost all npm packages can be used with Meteor and/or Blaze.
Looking at canvas-gauge, I would recommend using the scripting API in onRendered:

<template name="gauge">
  <canvas class="gauge-canvas">
import { RadialGauge } from 'canvas-gauges';
Template.gauge.onRendered(function () {
  this.gauge = new RadialGauge({ 
    renderTo: this.find('.gauge-canvas'),
    // All other options here
  // An autorun will re-run anytime the queried data changes
  this.autorun(() => {
    const data = Datasource.findOne({ deviceId: 'example' });
    this.gauge.value = data.value;

Note: I haven’t tested this, it’s written off my head and from the docs. The docs don’t say how to import in a module, so I took a guess

1 Like

thanks for the tips - I will give it a try