Can someone please help me troubleshoot why my chart is not showing? I followed the example on the demo except that I am calling a CSV file. Since I can't upload the csv file, it is an image of the CSV file.
I included all these js:
Code: Select all
<script type="text/javascript" src="Highcharts-6.1.1/code/highcharts.js"></script>
<script type="text/javascript" src="Highcharts-6.1.1/code/highcharts-more.js"></script>
<script type="text/javascript" src="Highcharts-6.1.1/code/highcharts-3d.js"></script>
<script type="text/javascript" src="Highcharts-6.1.1/code/modules/data.js"></script>
<script type="text/javascript" src="Highcharts-6.1.1/code/modules/series-label.js"></script>
<script type="text/javascript" src="Highcharts-6.1.1/code/modules/exporting.js"></script>
<script type="text/javascript" src="Highcharts-6.1.1/code/modules/offline-exporting.js"></script>
Code: Select all
<script>
Highcharts.chart('risk-heatmap-container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
data: {
csvURL: window.location.origin + '/data/csv/test.csv'
},
legend: {
enabled: false
},
title: {
text: 'Bubble Mapping'
},
subtitle: {
text: 'Testing'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'X Axis'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 4,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Tolerance Level 4'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Y Axis Label'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 40,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Score Level 40',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.FullName}</h3></th></tr><tr><th>X:</th><td>{point.x}g</td></tr><tr><th>Y:</th><td>{point.y}g</td></tr><tr><th>Total</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: []
});
</script>