salesforce apex + vf page + Google Chart
2013-08-03 17:29
417 查看
1. Google Chart apex class:
2. Google Chart VF page:
3. 实现效果
global with sharing class YUT_GoogleChartsController { @RemoteAction global static Opportunity[] loadOpps() { return [select Id, Name, ExpectedRevenue, Amount from Opportunity order by CreatedDate DESC limit 10]; } }
2. Google Chart VF page:
<apex:page controller="YUT_GoogleChartsController" sidebar="false"> <!-- Google API inclusion --> <apex:includeScript id="a" value="https://www.google.com/jsapi" /> <apex:sectionHeader title="Google Charts + Javascript Remoting" subtitle="Demoing - Opportunities by Exepected Revenue"/> <!-- Google Charts will be drawn in this DIV --> <div id="chartBlock" /> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(initCharts); function initCharts() { // Following the usual Remoting syntax // [<namespace>.]<controller>.<method>([params...,] <callbackFunction>(result, event) {...} // controller : GoogleChartsController // method : loadOpps YUT_GoogleChartsController.loadOpps( function(result, event){ // load Column chart var visualization = new google.visualization.ColumnChart(document.getElementById('chartBlock')); // Prepare table model for chart with columns var data = new google.visualization.DataTable(); data.addColumn('string', 'Opportunity'); data.addColumn('number', 'Expected Revenue'); data.addColumn('number', 'Amount'); // add rows from the remoting results for(var i =0; i<result.length;i++){ var r = result[i]; data.addRow([r.Name, r.ExpectedRevenue, r.Amount]); } // all done, lets draw the chart with some options to make it look nice. visualization.draw(data, {legend : {position: 'top', textStyle: {color: 'blue', fontSize: 10}}, width:window.innerWidth,vAxis:{textStyle:{fontSize: 10}},hAxis:{textStyle:{fontSize: 10},showTextEvery:1,slantedText:false}}); }, {escape:true}); } </script> </apex:page>
3. 实现效果
相关文章推荐
- salesforce apex + vf page + Google Chart II
- salesforce apex + vf page 动态显示object 和 动态加载显示的列
- Salesforce apex + vf page 服务器端分页 II
- salesforce VF page 显示 Dependent picklist field
- 在salesforce VF Page里面实现 Lookup 字段
- 最简单的 Salesforce + jQuery + vf page
- Salesforce + jQuery + dataTable + vf page
- salesforce vf page 导入其它网页
- salesforce apex + vf page 弹窗口
- salesforce 零基础学习(二十六)自定义图表chart简单介绍(使用apex和VF实现)
- apex:iframe 调用其他visaulforce page
- salesforce page layouts best practices
- How to use Ajax on Visualforce page on Salesforce platform
- Salesforce apex发email的小细节
- Salesforce Apex 开发环境设置以及测试
- insufficient_access_on_cross_reference_entity APEX / Salesforce
- 在Salesforce VF上面指定定制的html 属性
- Visualforce Pageにapex:paramタグの使用方法まとめ
- Salesforce Apex后台类控制页面跳转
- salesforce.com Apex语言介绍(二)