Last active
May 26, 2016 18:59
-
-
Save metadaddy/7327730 to your computer and use it in GitHub Desktop.
Visualforce page that uses the Force.com Analytics API to run a report and show a Google Chart based on the report data. We use the Force.com Streaming API to subscribe to a topic and, when the underlying data changes, show a button that allows the user to rerun the report.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<apex:page > | |
<apex:includeScript value="{!$Resource.cometd}"/> | |
<apex:includeScript value="{!$Resource.jquery191}" /> | |
<apex:includeScript value="{!$Resource.forcetk}" /> | |
<apex:includeScript value="{!$Resource.jquery_cometd}"/> | |
<apex:includeScript value="https://www.google.com/jsapi" /> | |
<script> | |
// Get an instance of the REST API client and set the session ID | |
var client = new forcetk.Client(); | |
client.setSessionToken('{!$Api.Session_ID}'); | |
function runReport() { | |
// In real-life, you might pass the report ID as a page parameter, | |
// or retrieve it from a custom setting | |
var reportId = '00Oi0000004kNOa'; | |
// Run the report synchronously | |
client.ajax("/v29.0/analytics/reports/"+reportId+"?includeDetails=true", function(report){ | |
// For debugging | |
$("#output").append(JSON.stringify(report, null, ' ')+'\n\n'); | |
renderPieChart(report); | |
// We're done with the status | |
$("#statusText").hide(); | |
// Show the pie chart | |
$("#reportChart").show(); | |
}, function(jqXHR, textStatus, errorThrown){ | |
// uh-oh | |
$("#statusText").text("Error: "+jqXHR.status+" "+jqXHR.statusText); | |
$("#output").append(jqXHR.responseText+'\n\n'); | |
}); | |
} | |
function renderPieChart(report) { | |
google.load("visualization", "1", {packages:["corechart"], 'callback' : function() { | |
// Legends (not shown on pie chart) | |
var dataArray = [[ | |
report.reportExtendedMetadata.detailColumnInfo[report.reportMetadata.detailColumns[0]].label, | |
report.reportExtendedMetadata.detailColumnInfo[report.reportMetadata.detailColumns[1]].label | |
]]; | |
// Iterate through summary data | |
$.each(report.factMap['T!T'].rows, function(index, row) { | |
dataArray.push([row.dataCells[0].label, row.dataCells[1].value]); | |
}); | |
var data = google.visualization.arrayToDataTable(dataArray); | |
var options = { | |
chartArea: { | |
left: 0 | |
}, | |
title: report.attributes.reportName, | |
is3D: true, | |
}; | |
// Create and draw the chart | |
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); | |
chart.draw(data, options); | |
}}); | |
} | |
// When the DOM is ready... | |
$(document).ready(function() { | |
// Show/hide raw data on click | |
$("#outputHeader").click(function(){ | |
$("#output").toggle(); | |
}); | |
// Rerun report on click | |
$("#rerun").click(function(){ | |
$("#rerun").hide(); | |
runReport(); | |
}); | |
// Initialize CometD | |
$.cometd.init({ | |
url: '/cometd/29.0/', | |
requestHeaders: { Authorization: 'Bearer {!$Api.Session_ID}'} | |
}); | |
// Subscribe to a topic. JSON-encoded update will be returned | |
// in the callback | |
$.cometd.subscribe('/topic/MerchandiseUpdates', function(message) { | |
$('#output').append(JSON.stringify(message, null, ' ')+'\n\n'); | |
// Prompt user to rerun report | |
$("#rerun").show(); | |
}); | |
// Run the report and render the chart | |
runReport(); | |
}); | |
</script> | |
<h1 id="statusText">Loading data...</h1> | |
<div id="reportChart" style="display: none"> | |
<div id="piechart_3d" style="width: 500px; height: 300px;"></div> | |
</div> | |
<button type="button" id="rerun" style="display: none"> | |
Data changed - click to rerun report! | |
</button> | |
<div> | |
<br/> | |
<button type="button" id="outputHeader">Click to show/hide raw response</button> | |
<pre id="output" style="display: none"></pre> | |
</div> | |
</apex:page> |
Bleeding edge, man. Cool stuff :-)
For pie chart data, is the Analytics API required? Would this not work equally well subscribing directly to the underlying data source?
I got the impression that Analytics API really shines for time-series analysis/line charts (?)
how can we get resources
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Where do I find the static resources?