Single Callback to Draw Multiple Google Charts in Oracle APEX

Here, I am giving you an elegant way to draw multiple google charts in Oracle APEX using single callback method. This has been inspired by Google Charts. Google chart tools are powerful, simple to use, and free. We can try out Google's rich gallery of interactive charts and data tools.

For example, suppose you want to draw multiple charts (Pie, Bar, Line and Donut), showing top 10 covid-19 infected countries as on today. The following example shows how to display both charts side-by-side.

If you want to draw multiple charts for the same data, it may be more convenient to write a single callback for both charts.

Fig 1: Pie, Bar, Line & Donut Charts

Step 1: Create required objects (table, sequence, trigger) and populate sample data into a table. (As per your requirements)

Step 2: Create a new blank page.

Step 3: Create a region to the page. Change region type to PLSQL Dynamic Content.

Drawing Multiple Charts using Single Callback:

Copy and paste below PLSQL code into the region's PLSQL code source.

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;