listed below are 2 blocks of code, the first is my page with a stock example, which works. The 2nd group is a graph I created in jfiddle. It works correctly in jfiddle but when put into the page it does not display anything on the page. Thanks for the help, I am new to jquery and highcharts but I can’t seem to find why the below works in jfiddle and not on my page. Thank you.
This below block works, example – but page set up is the same for the block that doesn’t work (at bottom)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var 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'
}
}]
},
// Add some life
function (chart) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
});
});
</script>
</head>
<body>
<script src="./include/Highcharts-2.3.2/js/highcharts.js"></script>
<script src="./include/Highcharts-2.3.2/js/highcharts-more.js"></script>
<script src="./include/Highcharts-2.3.2/js/modules/exporting.js"></script>
<div id="container" style="width: 400px; height: 300px; margin: 0 auto"></div>
</body>
</html>
code from my graph that does not display
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
plotBorderWidth: 1,
plotBackgroundImage: null,
height: 200
},
title: {
text: ''
},
pane: [{
startAngle: -90,
endAngle: 90,
background: null,
center: ['50%', '50%'],
size: 100
}],
yAxis: [{
tickInterval: 45,
min: 0,
max: 180,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 45,
color: '#00CC00',
innerRadius: '100%',
outerRadius: '105%'
},{
from: 46,
to: 90,
color: '#FFFF00',
innerRadius: '100%',
outerRadius: '105%'
},{
from: 91,
to: 135,
color: '#FF9933',
innerRadius: '100%',
outerRadius: '105%'
},{
from: 136,
to: 180,
color: '#990000',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
text: '<span style="font-size:8px"> </span>',
y: -40
}
}],
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%'
}
}
},
series: [{
data: [90],
yAxis: 0
}]
},
// Let the music play
function(chart) {
setInterval(function() {
chart.redraw();
}, 500);
});
});
</script>
</head>
<body>
<script src="./include/Highcharts-2.3.2/js/highcharts.js"></script>
<script src="./include/Highcharts-2.3.2/js/highcharts-more.js"></script>
<script src="./include/Highcharts-2.3.2/js/modules/exporting.js"></script>
<div id="container" style="width: 400px; height: 300px; margin: 0 auto"></div>
</body>
</html>
Found the issue, copied the text out of visual studio and pasted into notepad, which showed a random question mark before the end of script that is not there in visual studio or jfiddle as well as when copied from visual studio to this window. Deleted, recopied text and pasted. At least it now works.