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 ChartsGoogle 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;



Output: Then your output would then display like this,


The demo is here.

That's it. Happy APExing!!!...

Comments

Popular posts from this blog

Highlight the cell of Interactive Report based on Search Criteria in Oracle APEX

Number of Tables by The Number of Rows in Oracle Database

Querying Data From Flat Files in Oracle

Highlight Data That Meet Certain Criteria in Oracle APEX Report

Return a Validation Message using JavaScript if the Oracle Application Express Item is Empty

Find Where Specific Table or View is Used in Oracle Database

Save Selected Interactive Grid Records into a Collection - Oracle APEX

Remove X (Close Mark) from Oracle APEX Modal Dialog

[Loner Tables] Find Tables Without Relationships in Oracle Database

Change the color of the rows alternatively using a Simple CSS in Oracle APEX IR & IG Reports