HighCharts, multiple same chart on one page only uses 1 set of data - highcharts

Question

If you can please look at: https://jsfiddle.net/eL0fnt1a/
I have 2 windrose charts on one page, each with a unique name and their own set of data. However, the first set of data is used incorrectly for both charts.
I have others pages with multiple line charts and they work fine.
Can someone point me in the right direction?
<div>
<div id="ChartName0"></div>
<div style="display:none">
<table id="freq" border="0" cellspacing="0" cellpadding="0">
<tr nowrap>
<th colspan="8" class="hdr"> Table of Frequencies(percent)</th>
</tr>
<tr nowrap>
<th class="freq"> Direction</th>
<th class="freq"> 0-5 km/hr</th>
<th class="freq"> 5-15 km/hr</th>
<th class="freq"> 15-30 km/hr</th>
<th class="freq"> 30-60 km/hr</th>
<th class="freq"> 60-100 km/hr</th>
<th class="freq"> > 100 km/hr</th>
<th class="freq"> Total</th>
</tr>
<tr nowrap>
<td class='dir'>North</td>
<td class='data'>8.16326530612245</td>
<td class='data'>12.244897959183675</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>NNE</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>NE</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>ENE</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>East</td>
<td class='data'>20.408163265306122</td>
<td class='data'>20.408163265306122</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>ESE</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>SE</td>
<td class='data'>2.0408163265306123</td>
<td class='data'>4.081632653061225</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>SSE</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>South</td>
<td class='data'>2.0408163265306123</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>SSW</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>SW</td>
<td class='data'>0</td>
<td class='data'>4.081632653061225</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>WSW</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>West</td>
<td class='data'>4.081632653061225</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>WNW</td>
<td class='data'>4.081632653061225</td>
<td class='data'>8.16326530612245</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>NW</td>
<td class='data'>8.16326530612245</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>NNW</td>
<td class='data'>0</td>
<td class='data'>2.0408163265306123</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='totals'>Total</td>
<td class='totals'>48.9795918367347</td>
<td class='totals'>51.02040816326531</td>
<td class='totals'>0</td>
<td class='totals'>0</td>
<td class='totals'>0</td>
<td class='totals'>0</td>
</table>
</div>
</div>
<div>
<div id="ChartName1"></div>
<div style="display:none">
<table id="freq" border="0" cellspacing="0" cellpadding="0">
<tr nowrap>
<th colspan="8" class="hdr"> Table of Frequencies(percent)</th>
</tr>
<tr nowrap>
<th class="freq"> Direction</th>
<th class="freq"> 0-5 km/hr</th>
<th class="freq"> 5-15 km/hr</th>
<th class="freq"> 15-30 km/hr</th>
<th class="freq"> 30-60 km/hr</th>
<th class="freq"> 60-100 km/hr</th>
<th class="freq"> > 100 km/hr</th>
<th class="freq"> Total</th>
</tr>
<tr nowrap>
<td class='dir'>North</td>
<td class='data'>9.036658141517476</td>
<td class='data'>20.545609548167093</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>NNE</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>NE</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>ENE</td>
<td class='data'>0</td>
<td class='data'>0.08525149190110827</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>East</td>
<td class='data'>5.797101449275362</td>
<td class='data'>22.932651321398126</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>ESE</td>
<td class='data'>0.3410059676044331</td>
<td class='data'>0.42625745950554134</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>SE</td>
<td class='data'>1.619778346121057</td>
<td class='data'>1.8755328218243819</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>SSE</td>
<td class='data'>0.08525149190110827</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>South</td>
<td class='data'>1.1935208866155158</td>
<td class='data'>0.2557544757033248</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>SSW</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>SW</td>
<td class='data'>1.8755328218243819</td>
<td class='data'>1.1082693947144076</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>WSW</td>
<td class='data'>0</td>
<td class='data'>0.17050298380221654</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>West</td>
<td class='data'>2.7280477408354646</td>
<td class='data'>0.5967604433077579</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>WNW</td>
<td class='data'>3.7510656436487637</td>
<td class='data'>11.082693947144076</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>NW</td>
<td class='data'>5.797101449275362</td>
<td class='data'>4.0068201193520885</td>
<td class='data'>0.08525149190110827</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='dir'>NNW</td>
<td class='data'>1.3640238704177323</td>
<td class='data'>3.239556692242114</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0</td>
<td class='data'>0.0</td>
</tr>
<tr nowrap>
<td class='totals'>Total</td>
<td class='totals'>33.589087809036656</td>
<td class='totals'>66.32566069906224</td>
<td class='totals'>0.08525149190110827</td>
<td class='totals'>0</td>
<td class='totals'>0</td>
<td class='totals'>0</td>
</table>
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('ChartName0', {
data: {
table: 'freq',
startRow: 1,
endRow: 17,
endColumn: 6
},
chart: {
polar: true,
type: 'column',
backgroundColor: '#FEF5E7'
},
title: {
floating: true,
margin: 0,
text: ' ',
align: 'left'
},
credits: true,
subtitle: {
floating: true,
margin: 0,
text: ' ',
align: 'left'
},
pane: {
size: '80%'
},
legend: {
enabled: true,
align: 'left',
floating: true,
verticalAlign: 'bottom',
y: 0,
x: 0,
layout: 'vertical'
},
xAxis: {
tickmarkPlacement: 'on',
gridLineColor: '#8b4513',
lineColor: '#321414',
labels: {
style: {
color: 'black',
fontSize: 14
},
},
},
yAxis: {
min: 0,
endOnTick: false,
showLastLabel: true,
gridLineColor: '#c19a6b',
title: {
text: 'Frequency (%)',
style: {
fontSize: '1.2em'
}
},
labels: {
style: {
color: 'black',
fontSize: 12
},
formatter: function() {
return this.value + '%';
}
},
tickAmount: 6,
reversedStacks: false
},
tooltip: {
valueSuffix: '%'
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
});
Highcharts.chart('ChartName1', {
data: {
table: 'freq',
startRow: 1,
endRow: 17,
endColumn: 6
},
chart: {
polar: true,
type: 'column',
backgroundColor: '#FEF5E7'
},
title: {
floating: true,
margin: 0,
text: ' ',
align: 'left'
},
credits: true,
subtitle: {
floating: true,
margin: 0,
text: ' ',
align: 'left'
},
pane: {
size: '80%'
},
legend: {
enabled: true,
align: 'left',
floating: true,
verticalAlign: 'bottom',
y: 0,
x: 0,
layout: 'vertical'
},
xAxis: {
tickmarkPlacement: 'on',
gridLineColor: '#8b4513',
lineColor: '#321414',
labels: {
style: {
color: 'black',
fontSize: 14
},
},
},
yAxis: {
min: 0,
endOnTick: false,
showLastLabel: true,
gridLineColor: '#c19a6b',
title: {
text: 'Frequency (%)',
style: {
fontSize: '1.2em'
}
},
labels: {
style: {
color: 'black',
fontSize: 12
},
formatter: function() {
return this.value + '%';
}
},
tickAmount: 6,
reversedStacks: false
},
tooltip: {
valueSuffix: '%'
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
});
});
</script>

Answer 1

#kikon's comment solved the problem:
The problem is that you use the same id (freq) for the two tables. Ids in HTML are global and should be unique throughout the whole document. Change the second id to a different value and also its reference in the second chart's data section jsfiddle.net/z6ewm1uc