Latest web development tutorials

Highcharts VU meter (VU Meter)

Highcharts survey plan Highcharts survey plan

The following example demonstrates the VU meter (VU Meter).

In the previous section we already know Highcharts basic configuration syntax. Let's look at the other configurations.

Configuration

chart.type Configuration

Configure the type of chart 'gauge'. chart.type describes the chart type. The default value is "line". 

var chart = {
   type: 'gauge'
};

Configure pane

pane is only available in polar plot and angle measuring instrument. This configurable object holds general options combination x-axis and y-week. Each x-axis and y-axis can be linked to the pane by index. 

var pane = {
  startAngle: -150,  // x轴或测量轴的开始度数，以度数的方式给出。0是北
  endAngle: 150      //x轴极坐标或角度轴的最终度数，以度数的方式给出。0是北
};

Examples

File name: highcharts_vumeter.htm 

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>   
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {      
      type: 'gauge',
      plotBorderWidth: 1,
      plotBackgroundColor: {
         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
         stops: [
            [0, '#FFF4C6'],
            [0.3, '#FFFFFF'],
            [1, '#FFF4C6']
         ]
      },
      plotBackgroundImage: null,
      height: 200
   };
   var credits = {
      enabled: false
   };

   var title = {
      text: '音量表（VU Meter）'
   };

   var pane = [{
         startAngle: -45,
         endAngle: 45,
         background: null,
         center: ['25%', '145%'],
         size: 300
      }, {
         startAngle: -45,
         endAngle: 45,
         background: null,
         center: ['75%', '145%'],
         size: 300
   }];

   var yAxis = [{
         min: -20,
         max: 6,
         minorTickPosition: 'outside',
         tickPosition: 'outside',
         labels: {
            rotation: 'auto',
            distance: 20
         },
         plotBands: [{
            from: 0,
            to: 6,
            color: '#C02316',
            innerRadius: '100%',
            outerRadius: '105%'
         }],
         pane: 0,
         title: {
            text: 'VU<br/><span style="font-size:8px">Channel A</span>',
            y: -40
         }
      }, {
         min: -20,
         max: 6,
         minorTickPosition: 'outside',
         tickPosition: 'outside',
         labels: {
            rotation: 'auto',
            distance: 20
         },
         plotBands: [{
            from: 0,
            to: 6,
            color: '#C02316',
            innerRadius: '100%',
            outerRadius: '105%'
         }],
         pane: 1,
         title: {
            text: 'VU<br/><span style="font-size:8px">Channel B</span>',
            y: -40
         }
   }];
   
   var plotOptions = {
      gauge: {
            dataLabels: {
            enabled: false
         },
         dial: {
            radius: '100%'
         }
      }
   };
   var series= [{
        data: [-20],
        yAxis: 0
     }, {
        data: [-20],
        yAxis: 1
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.credits = credits;
   json.title = title;       
   json.pane = pane; 
   json.yAxis = yAxis; 
   json.plotOptions = plotOptions;  
   json.series = series;      
   
   // Add some life
   var chartFunction = function (chart) {
      setInterval(function () {
         if (chart.series) { // the chart may be destroyed
            var left = chart.series[0].points[0],
            right = chart.series[1].points[0],
            leftVal,
            rightVal,
            inc = (Math.random() - 0.5) * 3;

            leftVal =  left.y + inc;
            rightVal = leftVal + inc / 3;
            if (leftVal < -20 || leftVal > 6) {
               leftVal = left.y - inc;
            }
            if (rightVal < -20 || rightVal > 6) {
               rightVal = leftVal;
            }

            left.update(leftVal, false);
            right.update(rightVal, false);
            chart.redraw();
         }
      }, 500);
   };
   
   $('#container').highcharts(json, chartFunction);  
});
</script>
</body>
</html>

The above example output is:

Highcharts survey plan Highcharts survey plan