I have a problem with the Highcharts gauge. Actually, it doesn't display and I have a JS error.
TypeError: $[b.defaultSeriesType] is not a constructor highcharts.js (line 159)
I have 3 tabs (using bootstrap/jquery) with pie in the two others and there is no problem with these ones.
I don't understand because I have just copied the example from the Highcharts website. Does anyone have any ideas what might be causing this?
EDIT :
Here is a part of the JS
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'gauge',
plotBackgroundColor : null,
plotBackgroundImage : null,
plotBorderWidth : 0,
plotShadow : false
},
title : {
text : 'Speedometer'
},
pane : {
startAngle : -150,
endAngle : 150,
background : [
{
backgroundColor : {
linearGradient : {
x1 : 0,
y1 : 0,
x2 : 0,
y2 : 1
},
stops : [
[ 0, '#FFF' ],
[ 1, '#333' ] ]
},
borderWidth : 0,
outerRadius : '109%'
},
{
backgroundColor : {
linearGradient : {
x1 : 0,
y1 : 0,
x2 : 0,
y2 : 1
},
stops : [
[ 0, '#333' ],
[ 1, '#FFF' ] ]
},
borderWidth : 1,
outerRadius : '107%'
}, {
// default background
}, {
backgroundColor : '#DDD',
borderWidth : 0,
outerRadius : '105%',
innerRadius : '103%'
} ]
},
// the value axis
yAxis : {
min : 0,
max : 200,
minorTickInterval : 'auto',
minorTickWidth : 1,
minorTickLength : 10,
minorTickPosition : 'inside',
minorTickColor : '#666',
tickPixelInterval : 30,
tickWidth : 2,
tickPosition : 'inside',
tickLength : 10,
tickColor : '#666',
labels : {
step : 2,
rotation : 'auto'
},
title : {
text : 'km/h'
},
plotBands : [ {
from : 0,
to : 120,
color : '#55BF3B' // green
}, {
from : 120,
to : 160,
color : '#DDDF0D' // yellow
}, {
from : 160,
to : 200,
color : '#DF5353' // red
} ]
},
series : [ {
name : 'Speed',
data : [ 80 ],
tooltip : {
valueSuffix : ' km/h'
}
} ]
});
And in my html I have this
<div class="tab-pane fade" id="requetesSeconde">
<div id="container"
style="width: 400px; height: 300px; margin: 0 auto"></div>
</div>
I have a problem with the Highcharts gauge. Actually, it doesn't display and I have a JS error.
TypeError: $[b.defaultSeriesType] is not a constructor highcharts.js (line 159)
I have 3 tabs (using bootstrap/jquery) with pie in the two others and there is no problem with these ones.
I don't understand because I have just copied the example from the Highcharts website. Does anyone have any ideas what might be causing this?
EDIT :
Here is a part of the JS
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'gauge',
plotBackgroundColor : null,
plotBackgroundImage : null,
plotBorderWidth : 0,
plotShadow : false
},
title : {
text : 'Speedometer'
},
pane : {
startAngle : -150,
endAngle : 150,
background : [
{
backgroundColor : {
linearGradient : {
x1 : 0,
y1 : 0,
x2 : 0,
y2 : 1
},
stops : [
[ 0, '#FFF' ],
[ 1, '#333' ] ]
},
borderWidth : 0,
outerRadius : '109%'
},
{
backgroundColor : {
linearGradient : {
x1 : 0,
y1 : 0,
x2 : 0,
y2 : 1
},
stops : [
[ 0, '#333' ],
[ 1, '#FFF' ] ]
},
borderWidth : 1,
outerRadius : '107%'
}, {
// default background
}, {
backgroundColor : '#DDD',
borderWidth : 0,
outerRadius : '105%',
innerRadius : '103%'
} ]
},
// the value axis
yAxis : {
min : 0,
max : 200,
minorTickInterval : 'auto',
minorTickWidth : 1,
minorTickLength : 10,
minorTickPosition : 'inside',
minorTickColor : '#666',
tickPixelInterval : 30,
tickWidth : 2,
tickPosition : 'inside',
tickLength : 10,
tickColor : '#666',
labels : {
step : 2,
rotation : 'auto'
},
title : {
text : 'km/h'
},
plotBands : [ {
from : 0,
to : 120,
color : '#55BF3B' // green
}, {
from : 120,
to : 160,
color : '#DDDF0D' // yellow
}, {
from : 160,
to : 200,
color : '#DF5353' // red
} ]
},
series : [ {
name : 'Speed',
data : [ 80 ],
tooltip : {
valueSuffix : ' km/h'
}
} ]
});
And in my html I have this
<div class="tab-pane fade" id="requetesSeconde">
<div id="container"
style="width: 400px; height: 300px; margin: 0 auto"></div>
</div>
- Can you put this up for us to see? I'd guess you are using the new keyword where you shouldn't. – penguat Commented Feb 20, 2013 at 16:38
- I suggest removing parts until you identify the error :-) Looks to me, on brief inspection, to be the series. See jsfiddle/fWvCT If you could put your code up on JSFiddle in its' entirety, that'd be a help for the future. – penguat Commented Feb 21, 2013 at 15:44
2 Answers
Reset to default 7The issue is that you have not included highcharts-more.js file
This is very strange because I copied the example. Maybe there is a problem because of the number of charts on the page. (3 in the first tab, 1 in the second one and the gauge in the third one)