Google charts in visualization
-
Hello,
does anybody have an idea how to render google charts?
In editor everything seems to be ok, but in visualization debug window I get these errorsError: can't render tplHtml w00006 on "TEST": conn.js:1137 Error: 0 - ReferenceError: google is not definedReferenceError: google is not defined conn.js:1137 Error: 1 - at eval (eval at <anonymous> (http://localhost:8082/lib/js/jquery-1.11.2.min.js:2:2622), <anonymous>:2:7) conn.js:1137 Error: 2 - at eval (<anonymous>) conn.js:1137 Error: 3 - at http://localhost:8082/lib/js/jquery-1.11.2.min.js:2:2622 conn.js:1137 Error: 4 - at Function.globalEval (http://localhost:8082/lib/js/jquery-1.11.2.min.js:2:2633) conn.js:1137 Error: 5 - at m.fn.init.domManip (http://localhost:8082/lib/js/jquery-1.11.2.min.js:3:23107) conn.js:1137 Error: 6 - at m.fn.init.t.fn.domManip (http://localhost:8082/vis/lib/js/can.custom.min.js:28:2469) conn.js:1137 Error: 7 - at m.fn.init.append (http://localhost:8082/lib/js/jquery-1.11.2.min.js:3:20620) conn.js:1137 Error: 8 - at Object.renderWidget (http://localhost:8082/vis/js/vis.js:1465:27) conn.js:1137 Error: 9 - at http://localhost:8082/vis/js/vis.js:739:120 conn.js:1137 Error: 10 - at http://localhost:8082/vis/js/vis.js:2560:31 hqwidgets.js:899 Version vis-hqwidgets: 1.1.2 loader.js?_=1556481690293:229 Uncaught Error: Google Charts loader.js can only be loaded once. at loader.js?_=1556481690293:229 at loader.js?_=1556481690293:233 (anonymous) @ loader.js?_=1556481690293:229 (anonymous) @ loader.js?_=1556481690293:233 2VM6327:20 Uncaught (in promise) TypeError: google.visualization.PieChart is not a constructor at drawChart (eval at <anonymous> (jquery-1.11.2.min.js:2), <anonymous>:20:21)Code is:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html> -
I had the same issue, Google charts was not working reliable when using the HTML Basic widget in vis.
Therefore, I generate an html file using the Javascript adapter and display it within an iframe widget. This way, it works perfectly, and I can also use all functions like getState(), etc.Example script: https://forum.iobroker.net/topic/22779/vorlage-google-charts-beispiel
