Problem with Turbolinks 5 (Highcharts: Error #13)
anykeyh opened this issue · comments
Hello,
In my application, if I load the charts on a page then follow a link to another page, I got this message:
Uncaught Highcharts error #13: www.highcharts.com/errors/13
This doesn't prevent the system to work properly (if I come back to the chart, it will be displayed well again).
It turns out the code generated is like this:
<script type="text/javascript">
(function() {
document.addEventListener("turbolinks:load", function() {
var options = { "title": { "text": "Average task completion for Hello World" },"legend": { "align": "right","verticalAlign": "top","y": 75,"x": -50,"layout": "vertical" },"xAxis": { "categories": [ "2016-10-11","2016-10-12","2016-10-13","2016-10-14" ],"title": { "text": null } },"yAxis": { "title": "Time in seconds" },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": { } },"chart": { "defaultSeriesType": "column","renderTo": "project_raw_0" },"subtitle": { },"series": [{ "name": "enrichment","yAxis": 0,"data": [ 18513.25,15254.0,30805.0,11741.0 ] },{ "name": "qc","yAxis": 0,"data": [ 28.25,33.5,1177.0 ] }] };
window.chart_project_raw_0 = new Highcharts.Chart(options);
});
})()
</script>
And off course there's nowhere the listener is unattached, and the callbacks stack for each visit on the page with the chart.
Is it a misconfiguration from my side?
Wouldn't be better just to put the <div>
container above the script then call the script without any decoration, as the container would be in the DOM at the moment of the call?