Evaluate Consulting Services

Single Callback to Draw Multiple Google Charts in Oracle APEX


DECLARE

l_title VARCHAR2(240) := ‘Breakdown of Top 10 Infected Countries’;

l_chart_values VARCHAR2(4000);

CURSOR cur_top10_countries IS

SELECT country, total_cases

  FROM (SELECT COUNTRY, TOTAL_CASES,

        RANK() OVER (ORDER BY total_cases DESC) AS rank 

      FROM fxgn_global_data)

 WHERE rank <= 10;

BEGIN 

  htp.p(‘<html>’);

  htp.p(‘<head>’);

  htp.p(‘<script type=”text/javascript” 

src=”https://www.gstatic.com/charts/loader.js”></script>’);

  htp.p(‘<script type=”text/javascript”>’);

  — Load Charts and the corechart and barchart packages.

  htp.p(‘google.charts.load(”current”, {”packages”:[”corechart”]})’);

  — Draw the pie chart and bar chart when Charts is loaded.

  htp.p(‘google.charts.setOnLoadCallback(drawChart)’);

  — Construct chart values

  FOR i IN cur_top10_countries

  LOOP

    l_chart_values := l_chart_values || ‘[”’||i.country||”’,’||i.total_cases||‘],’;

  END LOOP;

    l_chart_values := substr(l_chart_values,1, length(l_chart_values)1);

  –dbms_output.put_line (l_chart_values);

— draw chart

  htp.p(‘function drawChart() {

        var data = new google.visualization.DataTable();

        data.addColumn(”string”, ”Country”);

        data.addColumn(”number”, ”Total Cases”);

        data.addRows([‘||l_chart_values||

        ])’);

— setup pie chart options

  htp.p(‘var piechart_options = {title:”Piechart: ‘||l_title||”’,

                                 width:500,

                                 height:300}’);

  htp.p(‘var piechart = new google.visualization.PieChart

(document.getElementById(”piechart_div”))’);

  htp.p(‘piechart.draw(data, piechart_options)’);

— setup bar chart options

  htp.p(‘var barchart_options = {title:”Barchart: ‘||l_title||”’,

                                 width:500,

                                 height:300,

                                 legend: ”none”}’);

  htp.p(‘var barchart = new google.visualization.BarChart

(document.getElementById(”barchart_div”))’);

  htp.p(‘barchart.draw(data, barchart_options)’);

— setup line chart options

htp.p(‘var linechart_options = {title:”Linechart: ‘||l_title||”’,

                                 width:500,

                                 height:300,

                                 legend: ”none”}’);

  htp.p(‘var linechart = new google.visualization.LineChart

(document.getElementById(”linechart_div”))’);

  htp.p(‘linechart.draw(data, linechart_options)’);

— setup donut chart options

  htp.p(‘var donutchart_options = {title:”Donutchart: ‘||l_title||”’,

                                 width:500,

                                 height:300,

                                 pieHole: 0.4}’);

  htp.p(‘var donutchart = new google.visualization.PieChart

(document.getElementById(”donutchart_div”))’);

  htp.p(‘donutchart.draw(data, donutchart_options)’);

  htp.p(‘}’);

  htp.p(‘</script>’);

  htp.p(‘</head>’);

  htp.p(‘<body>’);

  –Table and divs that hold the pie, bar, line, donut charts

  htp.p(‘<table class=”columns”>’);

  htp.p(‘<tr>’);

  htp.p(‘<td><div id=”piechart_div” style=”border: 1px solid #ccc”></div></td>’);

  htp.p(‘<td><div id=”barchart_div” style=”border: 1px solid #ccc”></div></td>’);

  htp.p(‘<tr>’);

  htp.p(‘<tr>’);

  htp.p(‘<td><div id=”linechart_div” style=”border: 1px solid #ccc”></div></td>’);

  htp.p(‘<td><div id=”donutchart_div” style=”border: 1px solid #ccc”></div></td>’);

  htp.p(‘</tr>’);

  htp.p(‘</table>’);

END;

Leave a Comment

Your email address will not be published. Required fields are marked *