How to implement Javascript in Zul

asked 2016-07-19 09:28:44 +0800

Anubhav gravatar image Anubhav

updated 2016-07-19 09:29:13 +0800

Hi All, I am new to ZUl and trying to implement the below code.

<zk xmlns:h="native">

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

    <h:script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></h:script>
<h:script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
  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);


However whenever I am running this code I am not getting. I am able to see only the screen which is showing processing. Can anyone please help me in executing this code or let me any other way to implement Javascript.

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2016-07-24 07:48:21 +0800

Darksu gravatar image Darksu
1991 1 4

Hello Anubhav,

Please find below a working example i built from various sources:

<zk xmlns:h="native" xmlns:zk="zk" xmlns:w="client">


    <timer repeats="true" delay="600000" onTimer=""/>
      <hlayout style="text-align:center"><label style="font-size:16px" value="Google Chart Pie"></label></hlayout>
      <h:div id="chart_div" style="width: 900px; height: 500px;"></h:div>

      <script type="text/javascript" src="http://www.google.com/jsapi?fake=.js"></script>
      <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        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('chart_div'));
        chart.draw(data, options);



Best Regards,


link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2016-07-19 09:28:44 +0800

Seen: 67 times

Last updated: Jul 24 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More