Hi I have a need to display a google bubble chart that aggregates data from a child records. It works perfect with data hard coded, but I cannot figure out how to display data pulled from an aggregate query in a controller method. Below is the example code that displays properly
VF CODE
<apex:page>
<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(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="series_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
</apex:page>
this displays perfectly
The goal is to display a bubble chart that shows related records with the same Hour__c and Day_Of_Week__c values. The aggregate query I would like to display data from is
SELECT Hour__c, Day_Of_Week__c, COUNT(Id) Total FROM Custom_Object__c where Related_Case_Record__c =: recID group by Hour__c, Day_Of_Week__c
with 'recId' being the id of the current page. The query functions correctly, I just can't figure out how to load the datatable with the information.
I have tried to replicate this solution
https://www.biswajeetsamal.com/blog/google-charts-in-visualforce-page/
but had no luck. I think it is similar to what I need but I could not set it up correctly for a bubble chart.
{}
button to format code, or use the triple-backtick to outline code (edit the question to see how I did this).