Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Highcharts VU Meter Chart Example
Keywords : VU meter chart with example using highcharts, How to make vu meter using highcharts with example, Create vu meter with indicators using highcharts example
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts - VU Meter Chart</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> $(function () { var chartype = { 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 chartitle = { text: 'VU meter' } var chartpane = [{ startAngle: -45, endAngle: 45, background: null, center: ['25%', '145%'], size: 300 }, { startAngle: -45, endAngle: 45, background: null, center: ['75%', '145%'], size: 300 }] var chartooltip = { enabled: false } var chartyaxis = [{ 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 chartplotoptions = { gauge: { dataLabels: { enabled: false }, dial: { radius: '100%' } } } var chartseries = [{ name: 'Channel A', data: [-20], yAxis: 0 }, { name: 'Channel B', data: [-20], yAxis: 1 }] $('#container').highcharts({ chart:chartype, title: chartitle, pane: chartpane, tooltip:chartooltip, yAxis: chartyaxis, plotOptions:chartplotoptions, series: chartseries }, // Let the music play 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); }); }); </script> </head> <body> <div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div> </body> </html>
Click Here to See Result
Result
Previous
Next