A Simple Gauge

A simple gauge to show customer satisfaction score

by Ashok Mandal

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="app">
  <fusioncharts 
  :type="type" 
  :width="width" 
  :height="height" 
  :dataFormat="dataFormat"        :dataSource="dataSource">
  </fusioncharts>
</div>

Vue

// register VueFusionCharts plugin
Vue.use(VueFusionCharts, FusionCharts)

var dataSource = {
    "chart": {
        "caption": "Nordstorm's Customer Satisfaction Score for 2017",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "numberSuffix": "%",
        "theme": "fusion",
        "showToolTip": "0"
    },
    "colorRange": {
        "color": [{
            "minValue": "0",
            "maxValue": "50",
            "code": "#F2726F"
        }, {
            "minValue": "50",
            "maxValue": "75",
            "code": "#FFC533"
        }, {
            "minValue": "75",
            "maxValue": "100",
            "code": "#62B58F"
        }]
    },
    "dials": {
          "dial": [{
              "value": "81"
          }]
    }
};

var app = new Vue({
    el: '#app',
    data: {
        width: '100%',
        height: '400',
        type: 'angulargauge',
        dataFormat: 'json',
        dataSource: dataSource
    }
});