I am trying to add a Vu-Meter Gauge chart in Durandal app. I kept the high chart Js code in "viewAttacthed". My Js Code looks like follows:
define(['services/logger'], function (logger, highcharts) {
//#region Internal Methods
function activate() {
logger.log('Reports View Activated', null, 'Resources', true);
return true;
}
//#endregion
function viewAttached(view) {
$('#ufcGaugeChart', view).highcharts({
chart: { type: 'gauge' },
title: null,
pane: [{
startAngle: -90,
endAngle: 90,
center: ['50%', '67%'],
size: 175
}],
yAxis: [{
min: 0,
max: 100000,
minorTickPosition: 'inside',
tickPosition: 'inside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 40000,
color: '#679b4f',
innerRadius: '100%',
outerRadius: '105%'
}, {
from: 40000,
to: 70000,
color: '#d5995c',
innerRadius: '100%',
outerRadius: '105%'
}, {
from: 70000,
to: 100000,
color: '#ab4641',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
// need to change the style.
text: 'Gauge',
y: 0
}
}],
plotOptions: {
gauge: {
dataLabels: { enabled: true },
dial: { radius: '100%' }
}
},
series: [{
data: [54036],
yAxis: 0
}]
},
// Let the music play
function (chart) {
setInterval(function () {
alert("hi");
var left = chart.series[0].points[0],
right = chart.series[1].points[0],
leftVal,
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);
});
};
var vm = {
activate: activate,
title: 'Reports View',
paymentDate: '06/09/2013',
paymentAmount: '$120,098.66',
paymentCheck: '235',
viewAttached: viewAttached
};
return vm;
});
but I am not able to see the gauge chart.Please let me know where exactly I am missing something or doing wrong.
The script throws:
Uncaught Highcharts error #17
In the source for the solid gauge demo, they have the following js files:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
Bundling and minifying those cleared up the error 17 for me.