Revision history [back]

click to hide/show revision 1
initial version

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

Anubhav gravatar image Anubhav

How to implement Javascript in Zul

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"]});
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);
  }
</h:script>

</window> </zk>

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.

How to implement Javascript in Zul

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

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"]});
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);
  }
</h:script>
</h:script>      

 </window>
 </zk>

</window> </zk>

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.

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