How to draw a pie-chart in Zul using JavaScript

Question

As I am new to 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 am executing the above code I am getting a blank page. Can anyone please suggest me how I can modify this code to get a pie-chart.

Answer 1

You are lacking an element to draw the chart to: document.getElementById('piechart_3d') does not find anything.
So you have to add it:

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

Here I used the native namespace of ZK to cause it to render an exact HTML-div instead of a zk widget. This then can be resolved by document.getElementById.

Another hint: hflex='min' of the window produced some issues with my tests, so I removed it in the working example below.

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

UPDATE:
Another option would be to use ZK's javascript classes to find the element to draw to. This eliminates the use of the native namespace.
zk.Widget.$("$piechart_3d") get's you the zk Widget, on which you can call the $n() function to get the DOMElement it is bound to.

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

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