You need to sign in to do that
Don't have an account?
Google Visualization data source problem
Hi all;
I have successfully incorporated numerous GV in my Visualforce pages. One type that I am struggling with is the ‘interactive’ types; example: the GV ‘Full Dashboard’.
In that example the JSON data is hard coded. What I want to do is pull data from a SOQL source. There are examples of this in the Code Share project for Google Visualizations, but for some reason I cannot get this to work for the Full Dashboard.
For all VF pages I am using Visualforce Components. Here is one, as taken from the Code Share for Bar Charts add in; it uses a jsondata data source: var data = new google.visualization.DataTable( eval( '({!jsondata})' ) )
<apex:component >
<apex:attribute name="jsondata" description="This is the chart data" type="string" required="true" />
<apex:attribute name="title" description="This is the chart title" type="string" required="true" />
<apex:attribute name="enableTooltip" description="If set to true, tooltips are shown when the user clicks on a data point." type="Boolean"/>
<apex:attribute name="height" description="This is the chart height" type="integer" default="400" />
<apex:attribute name="width" description="This is the chart width" type="integer" default="500" />
<apex:attribute name="is3D" description="This determines whether or not the chart is 3D." type="boolean" default="true"/>
<apex:attribute name="legend" description="This is the legend location" type="string" default="right" />
<apex:attribute name="showCategories" description="If true, will show category labels. If false, will not." type="Boolean"/>
<apex:attribute name="colors" description="This is the list of colors for the columns." type="string[]"/>
<apex:attribute name="borderColor" description="This is the color of the border around chart elements." type="string" default="white" />
<apex:attribute name="focusBorderColor" description="This is the color of the border around chart elements that are in focus." type="string" default="red" />
<apex:outputPanel id="chart_div">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages: ["Barchart" ]});
google.setOnLoadCallback(drawLineChart);
function drawLineChart() {
var data = new google.visualization.DataTable( eval( '({!jsondata})' ) );
var chart = new google.visualization.BarChart(document.getElementById('{!$Component.chart_div}'));
chart.draw(data, {width: {!width}, height: {!height},
legend: '{!legend}', // should be passed in via attribute
smoothLine: true, // should be passed in via attribute
title: '{!title}',
is3D : {!is3D},
colors : [{!colors}],
borderColor : '{!borderColor}',
focusBorderColor : '{!focusBorderColor}'
});
/*
google.visualization.events.addListener(table, 'select', function() {
var row = chart.getSelection()[0].row;
// alert('You selected ' + data.getValue(row, 0));
window.location.href = '/'+data.getValue(row, 0);
});*/
}
</script>
</apex:outputPanel>
</apex:component>
Here is the html for the Full Dashboard (from Google Code Playground), for which I need to supply the SFDC data source from custom objects:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael' , 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Age',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'title': 'Donuts eaten per person',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [0, 3]}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table]).
// Draw the entire dashboard.
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: left;" id="chart3"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
I have been successful at implementing this script within a VF page with hard coded data, but I have tried every variation of the ‘var data’ markup but no data is passed to the GV. I have searched endlessly in this board, and Google searches, but have found no examples of anyone attempting to use this particular GV in Visualforce.
In the ‘var data = google.visualization.arrayToDataTable’ markup I need something like ‘var data = new google.visualization.DataTable( eval( '({!jsondata})' ) );’ but cannot figure out the correct syntax.
Thank you in advance for any help or suggestions.