How to draw a pie chart in Zul using JavaScript

Question

Since I'm new to the ZK framework and trying to implement javascript code inside zul.

My code is below:

<zk>
 <window id="HomePage" border="none" width="100%" height="100%" 
             hflex="min" style="background-color:green">

    <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'],
      ['Automation',     11],
      ['Manual',      2],
      ['Report',  2],
      ['Payroll', 2],
      ['MISC',    7]
    ]);

    var options = {
      title: 'My Daily Work Activities',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
    chart.draw(data, options);
  }
</script>        

When I execute the above code, I get a blank page. Can anyone suggest me how I can modify this code to get a pie chart.

Answer 1

You are missing an element for drawing a chart: document.getElementById('piechart_3d')it does not find anything.
Therefore you should add it:

<zk xmlns:n="native">
   <window>
    ...
   <n:div id="piechart_3d"></n:div>

Here I used my own ZK namespace to make it display the exact HTML divinstead of the zk widget. Then this can be solved with document.getElementById.

: hflex='min' window , .

: http://zkfiddle.org/sample/3env602/1-google-pi-chart

UPDATE:
javascript ZK, . .
zk.Widget.$("$piechart_3d") zk Widget, $n(), DOMElement, .

<zk>
   <window>
       ...
       <script>
          ...
          var chart = new google.visualization.PieChart(zk.Widget.$("$piechart_3d").$n());
          chart.draw(data, options);  
       </script>

       <div id="piechart_3d"></div>
   </window>
</zk>

: http://zkfiddle.org/sample/gnt3cl/3-google-pi-chart-zk