Draggable Jquery Meter - javascript

I have just started to learn Javascript and Jquery. I have been able to create a simple meter which shows random generated values. I am trying to make this meter draggable.
Here is my project.
https://jsfiddle.net/apoorvasomani/aLnvvn00/
Javascript Code -
<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.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
</div>
HTML -
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// Bring life to the dials
setInterval(function () {
// Speed
var chart = $('#container-speed').highcharts(),
point,
newVal,
inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}
}, 2000);
});
I have searched google and most of them tell how to make an html element draggable and not something made using jquery draggable. Please help me here understand what needs to be done.

Related

Is to possible to delay the needle loading animation in Highcharts angular gauge?

I have created a Highcharts Angular gauge. I need to delay the needle loading animation.
Here is the code:
$(function () {
$('#meter').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: ''
},
//
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '70%',
backgroundColor: '#000',
topWidth: 1,
baseWidth: 5,
rearLength: '20%'
},
pivot: {
radius: 5,
borderWidth: 5,
borderColor: '#000',
backgroundColor: '#fff'
}
}
},
pane: {
startAngle:-90,
endAngle: 90,
center: ['50%', '55%'],
size: '85%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#0187CC',
innerRadius: '110%',
outerRadius: '100%',
borderColor: 'transparent',
shape: 'arc',
},
},
// the value axis
yAxis: {
min: 0,
max: 30,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#0187CC',
tickPixelInterval: 30,
tickWidth: 10,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#0187CC',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: ''
},
plotBands: [{
color: '#FFF'
}
]
},
series: [{
name: 'Speed',
data: [20],
tooltip: {
valueSuffix: ' Mbps'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0) * 0);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
.highcharts-title, .highcharts-button, .highcharts-data-labels, .highcharts-tooltip, .highcharts-axis path:last-child , .highcharts-axis path:first-child, .highcharts-axis path:nth-child(13){
display: none;
}
.highcharts-axis-labels text{
fill: #000 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.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 src="meter.js"></script>
<div id="meter" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

In your 'plotOptions` attribute, add the following code:
series: {
animation: {
duration: 2000
}
}
This will cause the gauge needle to start up more slowly. Increase the number to slow it down; decrease the number to speed it up.
See also the updated code snippet below.
I hope this is helpful!
$(function () {
$('#meter').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: ''
},
//
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '70%',
backgroundColor: '#000',
topWidth: 1,
baseWidth: 5,
rearLength: '20%'
},
pivot: {
radius: 5,
borderWidth: 5,
borderColor: '#000',
backgroundColor: '#fff'
}
},
series: {
animation: {
duration: 2000
}
}
},
pane: {
startAngle:-90,
endAngle: 90,
center: ['50%', '55%'],
size: '85%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#0187CC',
innerRadius: '110%',
outerRadius: '100%',
borderColor: 'transparent',
shape: 'arc',
},
},
// the value axis
yAxis: {
min: 0,
max: 30,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#0187CC',
tickPixelInterval: 30,
tickWidth: 10,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#0187CC',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: ''
},
plotBands: [{
color: '#FFF'
}
]
},
series: [{
name: 'Speed',
data: [20],
tooltip: {
valueSuffix: ' Mbps'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0) * 0);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
.highcharts-title, .highcharts-button, .highcharts-data-labels, .highcharts-tooltip, .highcharts-axis path:last-child , .highcharts-axis path:first-child, .highcharts-axis path:nth-child(13){
display: none;
}
.highcharts-axis-labels text{
fill: #000 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.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 src="meter.js"></script>
<div id="meter" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

Highcharts gauge not shown

I'm new to using HighCharts.
I have a problem that the first Gauge disappears when I have more than one on the page.
This example works fine:
<%# Page Language="C#" AutoEventWireup="true" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
HighChart test
</title>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/highcharts/4.1.5/highcharts.js"></script>
<script src="Scripts/highcharts/4.1.5/highcharts-more.js"></script>
<script src="Scripts/highcharts/4.1.5/modules/solid-gauge.js"></script>
</head>
<body style="background-color: lightgrey">
<form runat="server">
<div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
</form>
<script>
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.3, '#DF5353'], // red
[0.5, '#DDDF0D'], // yellow
[0.8, '#55BF3B'] // green
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The 1 gauge
$('#gauge1').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Gauge 1'
}
},
credits: {
enabled: false
},
series: [{
name: 'Gauge 1',
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y} %</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
// Bring to life
setInterval(function () {
setValue('#gauge1');
}, 2000);
function setValue(div) {
var chart = $(div).highcharts(), point, newVal, inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 100) {
newVal = point.y - inc;
}
point.update(newVal);
}
}
});
</script>
</body>
</html>
But when I add another Gauge the first one disappears:
<%# Page Language="C#" AutoEventWireup="true" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
HighChart test
</title>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/highcharts/4.1.5/highcharts.js"></script>
<script src="Scripts/highcharts/4.1.5/highcharts-more.js"></script>
<script src="Scripts/highcharts/4.1.5/modules/solid-gauge.js"></script>
</head>
<body style="background-color: lightgrey">
<form runat="server">
<div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
<div id="gauge2" style="width: 300px; height: 200px; float: left; margin: 10px;" data-highcharts-chart="0"></div>
</form>
<script>
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.3, '#DF5353'], // red
[0.5, '#DDDF0D'], // yellow
[0.8, '#55BF3B'] // green
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The 1 gauge
$('#gauge1').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Gauge 1'
}
},
credits: {
enabled: false
},
series: [{
name: 'Gauge 1',
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y} %</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
// The 2 gauge
$('#gauge2').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Gauge 2'
}
},
credits: {
enabled: false
},
series: [{
name: 'Gauge 2',
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y} %</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}]
}));
// Bring to life
setInterval(function () {
setValue('#gauge1');
setValue('#gauge2');
}, 2000);
function setValue(div) {
var chart = $(div).highcharts(), point, newVal, inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 100) {
newVal = point.y - inc;
}
point.update(newVal);
}
}
});
</script>
</body>
</html>
Anyone got a idea what I'm doing wrong.
Here are links to JSFiddle
Example 1 - https://jsfiddle.net/eszygfjb/1/
Example 2 - https://jsfiddle.net/2cfpL019/

Its because you are setting the data-highcharts-chart-Attribute on both div-elements to the same value. As far as I know this is used internally by Highcharts to determine the order in which you can access the individual charts in the Highcharts.charts-Array.
By setting them both to index zero you are basically overwriting the object instance of the first chart when you are creating the second. Just remove these attributes and both gauges display just fine.
<div id="gauge1" style="width: 300px; height: 200px; float: left; margin: 10px;"></div>
<div id="gauge2" style="width: 300px; height: 200px; float: left; margin: 10px;"></div>

Highcharts full circle gauge as in Knob js

Is there any simple example (preferibly with a JSFiddle) for an implementation of a full circle gauge with Highcharts like the one below from jQuery knob ?
Here is what I ve got so far : http://jsfiddle.net/skeletorkun/grn5o39e/1/
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '50%'],
size: '100%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'sth'
}
},
series: [{
name: 'RPM',
data: [92],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
});

You can realise that by solid-gauge and set a correct angles in pane.
pane: {
center: ['50%', '50%'],
size: '100%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
Example: http://jsfiddle.net/e76o9otk/1/

Is jQuery roundSlider suitable for you ?
This was made with div elements only, so very easy to customize and flexible to use.
For more details check the demos page.
Demo on jsFiddle same as your requirement

highcharts donut chart center text overlaps with tooltip

I am showing text in the center of Highcharts Donut/Pie chart.
But my problem is that the center text overlaps with the tooltip text and tooltip becomes unreadable.
I have tried changing the zIndex of tooltip to bring it to front but it doesn't work. I want the tooltip to be on top of the donut center text.
See complete chart here: http://jsfiddle.net/SufianRashid/88q5uke1
//==================== HIGH CHARTS =========================//
function RenderPieChart(chartId, chartData, donutCenterText) {
$('#' + chartId).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 270
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
align: 'center',
verticalAlign: 'middle',
y: 0,
useHTML: true
},
tooltip: {
backgroundColor: 'white',
useHtml: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
plotOptions: {
pie: {
dataLabels: {
formatter: function () { if (this.y != 0) return this.y + '%'; }, //don't show 0% values
enabled: true,
distance: -25, //change this value to show label inside/outside the pie chart (negative means towards inside)
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
//showInLegend: true,
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
},
//-------- On click open drill down url --------//
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.url; //same window
}
}
}
}//End adding link
//--------------------------------//
},
series: [{
type: 'pie',
innerSize: '140px',
//--------------------//
data: chartData
//--------------------//
}]
},
//-------- Show Center Text ------//
function (chart) {
var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
var ypos = chart.plotTop + (chart.plotHeight * 0.4);
// Render the text
chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();
}
); //EOF: HighChart
}

Try following will solved your issue:
CSS:
.highcharts-tooltip span {
background-color:white;
border:1px solid;
opacity:1;
z-index:9999 !important;
}
JQuery:
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
Check:
RenderPieChart(
'PieChartContainer',
[
{ name: 'tickets opened within 24 hrs', y: 76.5, actualCounts: 54, url:'../dummyUrl.html' },
{ name: 'tickets opened within 25 to 48 hrs', y: 6.9, actualCounts: 77, url:'../dummyUrl.html' },
{ name: 'tickets opened in 49 to 72+ hrs', y: 93.1, actualCounts: 1032, url:'../dummyUrl.html' }
],
"<span id='DonutCenterText' style='text-align:center;' class='donutValuesOpen'><span>Total Open <br/>Tickets: <a href='../dummyUrl.html'> 1109 </a> <br/> </span><span class='Avg'>Average Days <br/>Open: 8 </span> </span>"
);
//==================== HIGH CHARTS =========================//
function RenderPieChart(chartId, chartData, donutCenterText) {
$('#' + chartId).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 270
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
align: 'center',
verticalAlign: 'middle',
y: 0,
useHTML: true
},
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
plotOptions: {
pie: {
dataLabels: {
formatter: function () { if (this.y != 0) return this.y + '%'; }, //don't show 0% values
enabled: true,
distance: -25, //change this value to show label inside/outside the pie chart (negative means towards inside)
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
//showInLegend: true,
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
},
//-------- On click open drill down url --------//
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.url; //same window
}
}
}
}//End adding link
//--------------------------------//
},
series: [{
type: 'pie',
innerSize: '140px',
//--------------------//
data: chartData
//--------------------//
}]
},
//------- Show Donut center text ------------------//
function (chart) {
var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
var ypos = chart.plotTop + (chart.plotHeight * 0.4);
// Render the text
chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();
}
); //EOF: HighChart
}
.highcharts-tooltip span {
background-color:white;
border:1px solid;
opacity:1;
z-index:9999 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="PieChartContainer" style="height: 400px"></div>

Not rendering VU-meter Gauge chart using HighCharts in Durandal

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.

Error 17 means that "The requested series type does not exist", probably you have no attached highcharts-more.js file.
http://www.highcharts.com/errors/17

Categories

Resources