Trying to Implement on Vue Js but not success

[jeweltheme]

What I'm trying to do make a Template file. Example: https://jsfiddle.net/96x2142c/ I'm trying to gauge.js in Vue JS Application. But while import the js library of gauge.js it's showing out of stack memory size. Also I cann't extend gauge.js library. If anyone can help me then I will be grateful. Thanks

[alvarezmario]

@jeweltheme open source is great! I just had a similar issue, but I was able to fix it and the library is working for me, I'm using Vue components, though, not sure what you are using. Here is what I did:

<template>
  <canvas width="300" height="300"></canvas>
</template>

<script>
import { Gauge } from 'gaugeJS'

export default {
  mounted () {
    let opts = {
      angle: 0, // The span of the gauge arc
      lineWidth: 0.35, // The line thickness
      radiusScale: 1, // Relative radius
      pointer: {
        length: 0.53, // // Relative to gauge radius
        strokeWidth: 0.057, // The thickness
        color: '#000000' // Fill color
      },
      limitMax: false,     // If false, max value increases automatically if value > maxValue
      limitMin: false,     // If true, the min value of the gauge will be fixed
      colorStart: '#6F6EA0',   // Colors
      colorStop: '#C0C0DB',    // just experiment with them
      strokeColor: '#EEEEEE',  // to see which ones work best for you
      generateGradient: true,
      highDpiSupport: true     // High resolution support
    }

    let gauge = new Gauge(this.$el).setOptions(opts) // create sexy gauge!
    gauge.maxValue = 3000 // set max gauge value
    gauge.setMinValue(0)  // Prefer setter over gauge.minValue = 0
    gauge.animationSpeed = 62 // set animation speed (32 is default value)
    gauge.set(1700) // set actual value
  }
}
</script>

[justinkames]

I implemented it like this with v1.3.5 from NPM.

<template lang="pug">
    .wrapper
         canvas#foo(ref="foo")
</template>

<script>
    import { Gauge } from 'gaugeJS/dist/gauge.min'

    export default {
        name: 'SomeComponent',

        mounted () {
            this.initGauge()
        },

        methods: {
            initGauge () {
                let opts = {
                    angle: 0, // The span of the gauge arc
                    lineWidth: 0.35, // The line thickness
                    radiusScale: 1, // Relative radius
                    pointer: {
                        length: 0.53, // // Relative to gauge radius
                        strokeWidth: 0.057, // The thickness
                        color: '#000000' // Fill color
                    },
                    limitMax: false,     // If false, max value increases automatically if value > maxValue
                    limitMin: false,     // If true, the min value of the gauge will be fixed
                    colorStart: '#6F6EA0',   // Colors
                    colorStop: '#C0C0DB',    // just experiment with them
                    strokeColor: '#EEEEEE',  // to see which ones work best for you
                    generateGradient: true,
                    highDpiSupport: true     // High resolution support
                }
                let gauge = new Gauge(this.$refs.foo)
                gauge.maxValue = 3000 // set max gauge value
                gauge.setMinValue(0)  // Prefer setter over gauge.minValue = 0
                gauge.animationSpeed = 62 // set animation speed (32 is default value)
                gauge.set(1700) // set actual value
                gauge.setOptions(opts) // create sexy gauge!
            }
        }
    }
</script>

[amroessam]

Do you guys have any idea on how to make gauge.set() Reactive? I’ve tried a computed value, also tried to fetch from the api, but it just won’t render on load, you have to navigate away and back again into the page for it to update.

Hi @justinkames, All the instances I've seen online of people using gaugejs don't add the gauge to the data object, so it's inaccessible outside of that initGauge function.

What you have to do is the below

data() {
 return {
  gauge: null
 }
}

then on methods

methods: {
 initGauge() {
  this.gauge = new Gauge(this.$refs.foo)
  this.gauge.setOptions({...})
  this.set(0)
 }
}

then whenever you wanna change the value via watchers or computed properties

watch: {
 val: function(newVal) {
  this.gauge.set(newVal)
 }
}

Hope that explains how to solve your issue :)