grip_google.grp

INLEIDING

De code in deze file zijn javascript-snippets waarmee een website gemaakt kan worden. In de javascript zijn interpreteerbare GRIP-variabelen mogelijk die bij aanroep gesubstitueerd worden. Een speciale token is . Van de site https://developers.google.com/chart kan code gekopieerd worden en toegevoegd worden aan deze file.

edit grip_calls.grp edit doc

CALL INFO

INFO

BEGIN INFO 
  CALL STREEP
  DISP Filenaam : [[FILENAME]]
  DISP Versie : 6-10-2022 
  DISP Bevat diverse standaard zaken. 
  sound('x1')
  CALL RELEASE_NOTES
RETURN

RELEASE_NOTES

BEGIN RELEASE_NOTES
  CALL STREEP
  DISP Creatie:  6-10-2022 : verzamel-source voor de gangbare functionaliteit / GOOGLE-chart gebasseerd 
  CALL STREEP
RETURN  

STREEP

BEGIN  STREEP
  DISP _____________________________________________________________________________________________________________
RETURN

print ( grip_html.mk_datablok('| SQL select fie , sum(1) aantal from grip.grip_aud group by fie |'))

select fie , sum(1) aantal from grip.grip_aud group by fie

grip_lin

MAILING

find scanfile

EMAILING

BEGIN EMAILING
  MVAR> TEMPLATE = TEMPLATE_ALG@GRIP_LIB.grp
  MVAR> SUBJECT  = lijst met te onderzoeken vaccinaties 
  MVAR> MESSAGE  = Boodschap 123 

 CMD> mail('| TEMPLATE  [[TEMPLATE]]  | SUBJECT [[SUBJECT]] | MESSAGE [[MESSAGE]]  | FROM dolf@gripopdata.nl | TO  dolf@gripopdata.nl |')  
RETURN

TEMPLATE_ALG

BEGIN TEMPLATE_ALG  
  beste RegioMedewerker, 

  hieronder enkele datasets waar even zorgvuldig naar gekeken moet worden ... 

  HTMLQRY> '| SSQL   grip_aud  | TOP 6   | SHO WETL | HEADER log data van audit ... (deel-1) [[NOW]] | '
  HTMLQRY> '| SSQL   grip_aud  | TOP 6   | SHO WETL | HEADER log data van audit ... (deel-1) [[NOW]] | '
  HTMLQRY> '| SSQL   grip_aud  | TOP 7   | SHO WETL | HEADER log data van audit ... (deel-1) [[NOW]] | '

   met vriendelijke groet,

   <h4> J.A.G. Jansonius </h4> 
RETURN

grip_aud

BEGIN grip_aud  
  select * from grip_aud
RETURN

MAILING

CONTEXT

BEGIN CONTEXT
  data-context='[
 {"id":"search"  ,"label":"Search definition"   ,"type":"backend","view":"| TYPE SEARCH | ID oracle-id |"}
,{"id":"save"    ,"label":"Save"                ,"type":"backend","view":"| TYPE SAVE_SQL | ID oracle-id |"}
,{"id":"execute" ,"label":"Execute"             ,"type":"backend","view":"| TYPE EXEC_SQL | ID oracle-id |"}
,{"id":"reset"   ,"label":"Reset"               ,"type":"view","view":"contextmenu"}
]'
RETURN
BEGIN MENUUS
  nodes( '| LABEL Onderhoud      | CMD ENTRY  | SOURCE GRIP_GRAPH | MERGE_KEYS CODE | SEL_COLS,CODE,OMSCHR,SOURCE, | MERGE_VALUE MENU_OPZET | MESSAGE Wijzigen kenmerken | SUBJECT Wijzigen kenmerken  |'|)
  nodes( '| LABEL Visual         | CMD VISUAL | SQL select SOURCE from GRIP_GRAPH WHERE CODE = ~MENU_OPZET ~ | FRAMED| '|
  nodes( '| LABEL Parameters     | CMD SCAN   | SOURCE GBROWSER@grip_google.grp | SQL select code from grip_para  | DIV footer| FRAMED  | WIDTH 1600 | HEIGHT 450  |   
  nodes( '| LABEL running flows  | CMD SCAN   | SOURCE GBROWSER@grip_google.grp | SQL select * from grip_aud  |  TOP 100 | ORDER id desc  | DIV main | FRAMED  | WIDTH 1600 | HEIGHT 450  |   
  nodes( '| LABEL parameters     | CMD SCAN   | SOURCE GBROWSER@grip_google.grp | SQL select '33' T, code, description from grip_para   | DIV footer| FRAMED  | WIDTH 1600 | HEIGHT 450  |  
  nodes( '| LABEL footer-div         | CMD DISP   | DIV   footer | TEXT ............[[NOW]]  |
  nodes( '| LABEL debug-div          | CMD DISP   | DIV   debug  | TEXT ............[[NOW]]  |
  nodes( '| LABEL FileFuncionaliteit | CMD SCAN   | SOURCE TESTERT@grip_calls.grp | DIV   debug |
  nodes( '| LABEL Emailing regios    | CMD SCAN   | SOURCE EMAILING@google.grp      | DIV   debug  |

   nodes( '| LABEL t1 header   | CMD DISP   | TEXT ... header   [[NOW]]| DIV   header |
   nodes( '| LABEL t1 main     | CMD DISP   | TEXT ... main     [[NOW]]| DIV   main     |
   nodes( '| LABEL t1 footer   | CMD DISP   | TEXT ... footer   [[NOW]]| DIV   footer    |
   nodes( '| LABEL t1 debug    | CMD DISP   | TEXT ... debug    [[NOW]]| DIV   debug   |

  nodes( '| MENU | DIV header | DEB UG |')
RETURN

HELPME

BEGIN HELPME

DEZE file is van LIBRARY !! [[CON_TYPE]]

<pre>
   diverse google-functionaliteiten. aanroepbaar vanuit andere sources middels GEO.LIBRARY

   VAR> TITEL          = demo titel voor het javascript .. {TITEL} en {CHAINING}
   VAR> CHAINING       = DEMO_LABEL.LIBRARY
   variabelen: 
      TITEL     = [[TITEL]]
      CHAINING  = [[CHAINING]]      

 Aanwezige functionaliteit:
------
 H TML> CMD SCAN  | SOURCE GEO  | DATA GEO_DATA | FRAMED | WIDTH 1000| DE BUG| ')
 H TML> CMD SCAN  | SOURCE PIE  | DATA GEO_DATA | FRAMED | WIDTH 1000| DE BUG| ')
 H TML> CMD SCAN  | SOURCE ORG  | SQL  select distinct child, parent, 3 baloon   from xxx.grip_job   | FRAMED | HEIGHT 400 |  WIDTH 800 |
 H TML> CMD SCAN  | SOURCE TREEWORD@GRIP_LIB.grp | DATA WORDTREE_DATA@GRIP_LIB.grp  | WIDTH 600  |   FRAMED | 
 H TML> CMD SCAN  | SOURCE TREEMAP@GRIP_LIB.grp| DATA GEO_DATA@GRIP_LIB.grp | FRAMED | HEIGHT 800 | WIDTH 1800 | ')
 H TML> CMD SCAN  | SOURCE TIMELINES | DAT A GEO_DATA | FRAMED | HEIGHT 800 | WIDTH 1800 |  
 H TML> CMD SCAN  | SOURCE SCATTER  | SQL select  sel,elapse from xxx.grip_aud  | XAS Aantal records | YAS elapse |   FRAMED | HEIGHT 400 | DATABLOK |WIDTH 1000 | ')
 H TML> CMD SCAN  | SOURCE SANKEY   | DATA SANKEY_DATA | DATABLOK | FRAMED | WIDTH 1400 |
 H TML> CMD SCAN  | SOURCE LINES    | DATA LINES_DATA | WHERE 1=1 | FRAMED | WIDTH 1400 | HEIGHT 300 |
  ..
</pre>

 HTML> CMD SCAN  | SOURCE GEO  | DATA GEO_DATA | FRAMED | WIDTH 1000| DE BUG| ')
 HTML> CMD SCAN  | SOURCE PIE  | DATA GEO_DATA | FRAMED | HEIGHT 400 | WIDTH 1000| DE BUG| ')
 HTML> CMD SCAN  | SOURCE ORG  | SQL  select distinct child, parent, 3 baloon   from xxx.grip_job   | FRAMED | HEIGHT 400 | WIDTH 1000 |
 HTML> CMD SCAN  | SOURCE TREEWORD  | DATA WORDTREE_DATA   | HEIGHT 400 | WIDTH 600  |   FRAMED | 
 HTML> CMD SCAN  | SOURCE TREEMAP | DATA GEO_DATA | FRAMED | HEIGHT 400 | WIDTH 1800 | ')
 HTML> CMD SCAN  | SOURCE TIMELINES | DAT A GEO_DATA | FRAMED | HEIGHT 400 | WIDTH 1800 |  
# HTML> CMD SCAN  | SOURCE SCATTER   | SQL select  sel,elapse from xxx.grip_aud  | XAS Aantal records | YAS elapse |   FRAMED | HEIGHT 400 | DATABLOK |WIDTH 1000 | ')
# HTML> CMD SCAN  | SOURCE SANKEY    | DATA SANKEY_DATA | DATABLOK | FRAMED | WIDTH 1400 |HEIGHT 400 |
# HTML> CMD SCAN  | SOURCE LINES     | DATA LINES_DATA | WHERE 1=1 | FRAMED | WIDTH 1400 | HEIGHT 300 |
RETURN

DEMO_INHOUD

BEGIN DEMO_INHOUD
DEZE file is van LIBRARY !! [[CON_TYPE]]

<pre>
   diverse google-functionaliteiten. aanroepbaar vanuit andere sources middels GEO.LIBRARY

   VAR> TITEL          = demo titel voor het javascript .. 
   VAR> CHAINING       = DEMO_LABEL.LIBRARY
   variabelen: 
      TITEL     = [[TITEL]]
      CHAINING  = [[CHAINING]]      

 Aanwezige functionaliteit:
------
 H TML> CMD SCAN  | SOURCE GEO | DATA GEO_DATA | FRAMED | WIDTH 1200| DE BUG| ')
 H TML> CMD SCAN  | SOURCE PIE | DATA GEO_DATA | FRAMED | WIDTH 1200| DE BUG| ')
 H TML> CMD SCAN  | SOURCE ORG | SQL  select distinct child, parent, 3 baloon   from xxx.grip_job   | FRAMED | HEIGHT 400 |  WIDTH 800 |
  ..
</pre>

 HTML> CMD SCAN  | SOURCE GEO@google.grp  | DATA GEO_DATA | FRAMED | WIDTH 1200| DE BUG| ')
 HTML> CMD SCAN  | SOURCE PIE@google.grp  | DATA GEO_DATA | FRAMED | HEIGHT 400 | WIDTH 1200| DE BUG| ')
 HTML> CMD SCAN  | SOURCE ORG@google.grp  | SQL  select distinct child, parent, 3 baloon   from xxx.grip_job   | FRAMED | HEIGHT 400 | WIDTH 1400 |
RETURN

INCLUDES

BEGIN INCLUDES
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="/controller.js"></script>
    <script type="text/javascript">
RETURN

SELECT_HANDLER

BEGIN SELECT_HANDLER
       function selectHandler(e) {
          let SELECTION = chart.getSelection() 

          if (! SELECTION ) return false;
          if (! SELECTION.length ) return false;

          let ROW  = SELECTION[0].row
          let VALUE = data.getValue( ROW , 0)
        # get_server_response("| CMD PAYLOAD | OBJECT " + VALUE + " | DIV header | CHAIN | ")
          get_server_response("| CMD SCAN | SOURCE [[CHAINING]] | OBJECT " + VALUE + " | DIV debug | FILENAME [[BASE_FILENAME]]  |")
        }
RETURN

GOOGLE_BODY

BEGIN GOOGLE_BODY
 <body>  
    <div id="header"   >   </div> 
    <div id="div<DIV>" >   </div> 
    <div id="footer"   >   </div> 
    <div id="main"     >   </div>
    <div id="debug"    >   </div>
  </body>
RETURN

DEMO_LABEL

BEGIN DEMO_LABEL
  Selected : [[OBJECT]]
RETURN

GEO

BEGIN GEO
<html>
  <head>
    SCAN> INCLUDES@grip_google.grp
      google.charts.load('current', {  'packages':['geochart'], });

      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([ <DATA> ]);

        var options = {};
        var chart = new google.visualization.GeoChart(document.getElementById('div<DIV>'));
    google.visualization.events.addListener(chart, 'select', selectHandler);

        SCAN> SELECT_HANDLER@grip_google.grp

        chart.draw(data, options);
      }
    </script>
  </head>
  SCAN> GOOGLE_BODY
</html>
RETURN

GEO_DATA

BEGIN GEO_DATA
    ['Country', 'Popularity'],
    ['Germany', 200],
    ['United States', 300],
    ['Brazil', 400],
    ['Canada', 500],
    ['France', 600],
    ['RU', 700]
RETURN

PIE

BEGIN PIE
  <html>
  <head>
    SCAN> INCLUDES 

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([<DATA>]);

        var options = {  title: '[[TITEL]]' };
        var chart   = new google.visualization.PieChart(document.getElementById('div<DIV>'));

    google.visualization.events.addListener(chart, 'select', selectHandler);

        SCAN> SELECT_HANDLER

        chart.draw(data, options);
      }
    </script>
  </head>
   SCAN> GOOGLE_BODY
</html>
RETURN

PIE_DATA

BEGIN PIE_DATA
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
RETURN

ORG

BEGIN ORG
<html>
  <head>
    SCAN> INCLUDES 
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        <DATA>

        var chart = new google.visualization.OrgChart(document.getElementById('div<DIV>'));   

        google.visualization.events.addListener(chart, 'select', selectHandler);

    SCAN> SELECT_HANDLER

        chart.draw(data, {'allowHtml':true});
      }
   </script>
  </head> 
  SCAN> GOOGLE_BODY
</html>
RETURN

GBROWSER

BEGIN GBROWSER
<html>
  <head>
    SCAN> INCLUDES@grip_google.grp

      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        <DATA>

        var chart = new google.visualization.Table(document.getElementById('div<DIV>'));
        google.visualization.events.addListener(chart, 'select', selectHandler);


        SCAN> SELECT_HANDLER

        chart.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>
  </head>
   SCAN> GOOGLE_BODY
</html>
RETURN

DEMO_LABEL

BEGIN DEMO_LABEL
  Selected : [[OBJECT]]
RETURN

BAR

BEGIN BAR 
<html>
  <head>
     SCAN> INCLUDES 
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        SCAN> BAR_DATA 
        ]);

        var options = {
          chart: {
            title: '[[TITEL]]',
            subtitle: '[[SUBTITEL]]',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('div<DIV>'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
   SCAN> GOOGLE_BODY
</html>
RETURN

BAR_COMBI

BEGIN BAR_COMBI
<html>
  <head>
    SCAN> INCLUDES 
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var data = google.visualization.arrayToDataTable([
          SCAN> BAR_COMBI_DATA
        ]);

        var options = {
          title : 'Monthly Coffee Production by Country',
          vAxis: {title: 'Cups'},
          hAxis: {title: 'Month'},
          seriesType: 'bars',
          series: {5: {type: 'line'}}
        };

        var chart = new google.charts.Bar(document.getElementById('div<DIV>'));
        chart.draw(data, options);
      }
    </script>
  </head>
 SCAN> GOOGLE_BODY
</html>
RETURN

BAR_STACKED

BEGIN BAR_STACKED
<html>
  <head>
      SCAN> INCLUDES@grip_google.grp 
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        SCAN> BAR_DATA@grip_google.grp      
        ]);

        var options = { isStacked: true,
          chart: {
            title: '[[TITEL]]',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('div<DIV>'));
        google.visualization.events.addListener(chart, 'select', selectHandler);

        SCAN> SELECT_HANDLER@grip_google.grp

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  SCAN> GOOGLE_BODY@grip_google.grp 
</html>
RETURN

BAR_COMBI_DATA

BEGIN BAR_COMBI_DATA
          ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
          ['2004/05',  165,      938,         522,             998,           450,      614.6],
          ['2005/06',  135,      1120,        599,             1268,          288,      682],
          ['2006/07',  157,      1167,        587,             807,           397,      623],
          ['2007/08',  139,      1110,        615,             968,           215,      609.4],
          ['2008/09',  136,      691,         629,             1026,          366,      569.6]
RETURN

BAR_DATA

BEGIN BAR_DATA
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
RETURN

BAR_DATA

BEGIN BAR_DATA
        ['City', '2010 Population',],
        ['New York City, NY', 8175000],
        ['Los Angeles, CA', 3792000],
        ['Chicago, IL', 2695000],
        ['Houston, TX', 2099000],
        ['Philadelphia, PA', 1526000]
RETURN

DATA1

BEGIN DATA1
 ['Regio', 'COA', 'GBA', 'Anders'],
 ['Regio Noord', 1000, 400, 200],
 ['Regio Zuid', 1170, 460, 250],
 ['Regio Midden', 1030, 540, 350]
RETURN

DATA2

BEGIN DATA2
 ['Year', 'Sales', 'Expenses', 'Profit'],
 ['2014', 1000, 400, 200],
 ['2015', 1170, 460, 250],
 ['2016', 660, 1120, 300],
 ['2017', 1030, 540, 350]
RETURN

SANKEY

BEGIN SANKEY
 <html>
  <head>
  SCAN> INCLUDES
      google.charts.load('current', {'packages':['sankey']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();

        data.addColumn ('string', 'From');
        data.addColumn ('string', 'To');
        data.addColumn ('number', 'Weight');
        data.addRows([ <DATA> ]);

        var options = {  width: 600,  };// Sets chart options.

        var chart = new google.visualization.Sankey(document.getElementById('div<DIV>'));

        google.visualization.events.addListener(chart, 'select', selectHandler);

        SCAN> SELECT_HANDLER

        chart.draw(data, options);
      }
    </script>
  </head>
  SCAN> GOOGLE_BODY
</html>
RETURN

SANKEY_DATA

BEGIN SANKEY_DATA
          [ 'A', 'X', 5 ],
          [ 'A', 'Y', 7 ],
          [ 'A', 'Z', 6 ],
          [ 'B', 'X', 2 ],
          [ 'B', 'Y', 9 ],
          [ 'B', 'Z', 4 ]
RETURN

SCATTER

BEGIN SCATTER
<html>
  <head>
    SCAN> INCLUDES
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([ <DATA> ]);

        var options = {
          title: '<Xas> vs. <Yas> comparison',
          hAxis: {title: '<Xas> ', minValue: 0, maxValue: 15},
          vAxis: {title: '<Yas> ', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('div<DIV>'));
        google.visualization.events.addListener(chart, 'select', selectHandler);

        SCAN> SELECT_HANDLER 

        chart.draw(data, options);
      }
    </script>
  </head> 
  SCAN> GOOGLE_BODY 
</html>
RETURN

TREEWORD

BEGIN TREEWORD 
 <html> 
  <head>
      SCAN> INCLUDES 
      google.charts.load('current', {packages:['wordtree']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable(
          [ <DATA> ]
        );

        var options = {
          wordtree: {
            format: 'implicit',
            word: 'cats'
          }
        };

        var chart = new google.visualization.WordTree(document.getElementById('div<DIV>'));
        google.visualization.events.addListener(chart, 'select', selectHandler);

        SCAN> SELECT_HANDLER

        chart.draw(data, options);
      }
    </script>
  </head>
  SCAN> GOOGLE_BODY 
</html>
RETURN

WORDTREE_DATA

BEGIN WORDTREE_DATA
        ['Phrases'],
            ['cats are bettter than dogs'],
            ['cats eat kibble'],
            ['cats are better than hamsters'],
            ['cats are awesome'],
            ['cats are people too'],
            ['cats eat mice'],
            ['cats meowing'],
            ['cats in the cradle'],
            ['cats eat mice'],
            ['cats in the cradle lyrics'],
            ['cats eat kibble'],
            ['cats for adoption'],
            ['cats are family'],
            ['cats eat mice'],
            ['cats are better than kittens'],
            ['cats are evil'],
            ['cats are weird'],
            ['cats eat mice']
RETURN

LINES

BEGIN LINES
  <html>
  <head>
     SCAN> INCLUDES
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable(); 
        <DATA>

     var options = {
        chart: {
          title    : '[[TITEL]]'
        },
        width: '100%',
        height:'100%',
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('div<DIV>'));

      chart.draw(data, google.charts.Line.convertOptions(options));

      }
    </script>
  </head>
   SCAN> GOOGLE_BODY 
</html>
RETURN

TIMELINES

BEGIN TIMELINES
<html>
  <head>
      SCAN> INCLUDES 

      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('div<DIV>');
        var chart     = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        SCAN> TIMELINES_DATA
        SCAN> SELECT_HANDLER 

        chart.draw(dataTable);
      }
    </script>
  </head>
    SCAN> GOOGLE_BODY 
</html>
RETURN

TIMELINES_DATA

BEGIN TIMELINES_DATA
        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]
        ]);

RETURN

TREEMAP

BEGIN TREEMAP
<html>
  <head>
  SCAN> INCLUDES 
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          SCAN> TREEMAP_DATA
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('div<DIV>'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
   SCAN> GOOGLE_BODY
</html>
RETURN

TREEMAP_DATA

BEGIN TREEMAP_DATA
         ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['America',   'Global',             0,                               0],
          ['Europe',    'Global',             0,                               0],
          ['Asia',      'Global',             0,                               0],
          ['Australia', 'Global',             0,                               0],
          ['Africa',    'Global',             0,                               0],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
RETURN