Tuesday, 9 January 2018

Google Pie Chart In Oracle Apex

Url: https://apex.oracle.com/pls/apex/f?p=131188:3:7582634102136::NO:::

Create Page Item 1

P12_JSON_DATA

Item Type Hidden

Create Dynamic Action 

Action --> Plsql

DECLARE
CUR_SQL SYS_REFCURSOR;
BEGIN
OPEN CUR_SQL FOR
'select account_head ,SUM(qty) from GP t
Group By account_head';

apex_json.initialize_clob_output;
apex_json.open_object();
apex_json.open_array('cols');
apex_json.open_object();
apex_json.write('id',' ');
apex_json.write('label','Team');
apex_json.write('pattern',' ');
apex_json.write('type','string');
apex_json.close_object();
apex_json.open_object();
apex_json.write('id',' ');
apex_json.write('label','Goals');
apex_json.write('pattern',' ');
apex_json.write('type','number');
apex_json.close_object();
apex_json.close_array();

apex_json.open_array('rows');

FOR i IN ( select null  as link, account_head as label ,SUM(qty)  as value from GP
Group By account_head ) LOOP

apex_json.open_object();
apex_json.open_array('c');
apex_json.open_object();
apex_json.write('v',i.label);
apex_json.write('f','',TRUE);
apex_json.close_object();
apex_json.open_object();
apex_json.write('v',i.value);
apex_json.write('f','',TRUE);
apex_json.close_object();
apex_json.close_array();
apex_json.close_object();

END LOOP;
apex_json.close_array();
apex_json.close_object();

:P12_JSON_DATA := apex_json.get_clob_output;
apex_json.free_output;

END;

Create  Region

Static Content

Source

<html>
  <head>
    <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 jsonData = &P12_JSON_DATA!RAW.;
var data = new google.visualization.DataTable(jsonData);
  var options = {
          title: 'My Daily Activities'
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>



No comments:

Post a Comment