javascript - Not rendering VU-meter Gauge chart using HighCharts in Durandal -
i trying add vu-meter gauge chart in durandal app. kept high chart js code in "viewattacthed". js code looks 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 change style. text: 'gauge', y: 0 } }], plotoptions: { gauge: { datalabels: { enabled: true }, dial: { radius: '100%' } } }, series: [{ data: [54036], yaxis: 0 }] }, // let 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 not able see gauge chart.please let me know missing or doing wrong.
the script throws
uncaught highcharts error #17
thanks in advanced.
in source solid gauge demo, have 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 , minifying cleared error 17 me.
Comments
Post a Comment