Google charts in visualization

KarolisL

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 errors

Error: 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>

Mic

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

Community Forum

NEWS

Google charts in visualization

Support us

395

32.5k

81.7k

1.3m