In next example a App with Google Chart is created

 

 

In this example we read all data and create

 

 

// Read all items from work order, group by item
 
instance datastore lds
lds=select top 10 left("ItemCode",9),count(*) from "BEAS_FTPOS" group by "ItemCode" order by count(*) desc
// Export to Json array format without any prefix
lds.saveas=json=format=array,noheader
destroy=lds
// insert in first row the title
setvar=value=[["ItemNumber","Orders"],<value,mid 2>
 
// Header
_header()
 
// now the complete html / JavaScript
[html]
    <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() {
         // we insert directly the result of datastore as Array in the google donut via @value@
        var data = google.visualization.arrayToDataTable(@value@);
 
        var options = {
          title: 'Production items',
          pieHole: 0.4,
        };
 
        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    
   // insert the donut container in the app container
   document.getElementById("app-container").innerHTML =    '<div id="donutchart" style="width: 700px; height: 500px;"></div>';
    </script>
 
[/html]
 
_footer()