Evaluate Consulting Services

Google Pie Charts in Oracle APEX


DECLARE

l_task VARCHAR2(240) := ‘List out Top 10 Infected Countries’;

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

l_chart_values VARCHAR2(4000);

— Getting Top 10 infected countries details

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.print(‘<div id=”piechart” style=”width: 700px; height: 500px;”></div>’);

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

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

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

— Load google charts

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

htp.print(‘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 the chart and set the chart values

htp.print(‘function drawChart() {

  var data = google.visualization.arrayToDataTable([

  [”Task”, ”’||l_title||”’],

  ‘||l_chart_values||

])’);

— Optional; add a title and set the width and height of the chart

htp.print(‘var options = {”title”:”’||l_title||”’}’);

— Display the chart inside the <div> element with id=”piechart”

htp.print(‘var chart = new google.visualization.PieChart

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

htp.print(‘chart.draw(data, options)’);

htp.print(‘}’);

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

END;

Leave a Comment

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