Question

我是一个新的API代码，真的需要帮助。

我一直在Salesforce.com工作，需要一个在SF（BCG Matrix（AKA气泡图））中没有开箱即用的特定图表。

我发现了Google Chart API并使用了此代码（直接从Google图表页面中拉取）在Salesforce页面中创建了一个可爱的饼图：

    <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<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(drawChart);

  // Callback that creates and populates a data table, 
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

  // Set chart options
  var options = {'title':'How Much Pizza I Ate Last Night',
                 'width':400,
                 'height':300};

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
</script>

问题是：此图表的数据在脚本中是硬编码的。我需要对Salesforce中的自定义对象进行数据调用。这就是一切都为我而破裂的地方。我只是不具备这方面的专业知识，并希望得到一些指导。

我知道要从（Employee__c）中提取数据的对象的API名称以及我想在图表中使用的两个字段:(名称（标准字段））和（Years_Experience__c）。

我也知道如何将PieChart更改为BarChart。

有人可以帮忙吗？

谢谢，劳拉

Answer 1

请阅读using JavaScript on VisualForce pages并尝试将此信息应用于您的案例。我更喜欢使用@RemoteAction来做这些事情，但你可以选择任何选项。我想在VF上的JS是非常简单的主题。但如果您遇到任何问题，请将您的代码添加为您的问题的更新，并在评论此更新时标记我，我会帮助您。

Answer 2

请检查以下代码

VF页面

Google_Bubble_Chart

<apex:page controller="BubbleChartController" >  
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<apex:form >


        <!-- Right Section Start-->
        <div class="rightSectHome fR">
            <!-- Open Case Status Section Start -->
            <div class="section ">
                <h2>Open Case Status</h2>
                <div id="chart_div" class = "openCaseChart" ></div>
            </div>
            <!-- Open Case Status Section End -->


        <!-- Right Section End-->
        <div class="clr"></div>
    </div>
</apex:form>

<!-- javascript -->
<script type = "text/javascript">

    // Load the Visualization API and the Bar Chart package.
    google.load("visualization", "1", {packages:["corechart"]});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    var status, priority;

    /*Draw Bar Chats*/
    function drawChart() {
        /*Call Remoting*/
        BubbleChartController.loadOpenCases(
        function(result, event){
        console.log(result);
        var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
        var data = new google.visualization.DataTable(result);

        var options = {
             hAxis: {
                minValue:0,
                maxValue:6,
                format:'#',
                 viewWindow: {
                    min: 0
                }
            },

            title: ''
        };
        chart.draw(data, options);


        },{escape:false});
    }






</script>

控制器

BubbleChartController.cs

global with sharing class BubbleChartController {

    @RemoteAction
    global static String loadOpenCases() {

        Integer noOfCase, count = 0;
        List<CaseStatus> statusVal;
        /* json string for all open cases */
        String status, priority, json = '{"cols": [{"id": "Status", "label": "Status", "type": "string"}';

        /* Map of priority with column Order */
        map<integer, string> mapOrderPriority = new map<integer, string>();
        try {
            /* List of Open Cases */
            List<aggregateResult> results = [Select count(id) caseCount, Status, Priority
                                             From Case
                                             Where IsClosed != true
                                             Group By Status, Priority];



            /*Get Status Picklist Value*/
            statusVal = [SELECT Id, MasterLabel
                         FROM CaseStatus
                         WHERE IsClosed != true
                         ORDER BY SortOrder DESC];


            /*Get Priority Picklist Value*/
            Schema.DescribeFieldResult fieldResult = Case.Priority.getDescribe();
            List<Schema.PicklistEntry> priorityVal = fieldResult.getPicklistValues();

            /*Create json For Chart column*/
            for (Schema.PicklistEntry value : priorityVal ) {
                json += ',{"id": "Name", "label": "' + value.getValue() + '", "type": "number"},{"id": "annotation", "type": "number", "role":"annotation"}';
            }

            json += '],"rows": [';

            /*Create json For Chart row*/
            for (Integer sValCount = statusVal.size() - 1; sValCount >= 0; sValCount-- ) {
                json += '{"c":[{"v": "' + statusVal[sValCount].MasterLabel + '"}';

                for (Schema.PicklistEntry value : priorityVal ) {
                    noOfCase = 0;
                    // Get number of cases for Respective Status and Priority
                    for (aggregateResult resultVal : results ) {
                        status = (String)resultVal.get('Status');
                        priority = (String)resultVal.get('Priority');

                        if (status == statusVal[sValCount].MasterLabel && priority == value.getValue()) {
                            noOfCase = (Integer)resultVal.get('caseCount');
                            break;
                        }
                    }
                    json += ',{"v": ' + noOfCase + '},{"v": ' + noOfCase + '}';
                    //json += ',{"Row":"'+noOfCase+'"}';
                }
                json += ']},';
            }
            json += ']}';
        } catch (QueryException e) {
            system.debug( 'Exception IS====' + e.getMessage() );
        }
        return json;
    }

}

请在salesforce org中运行这些文件，如果您在运行上述代码时遇到任何问题，请与我们联系。

Salesforce.com和Google Charts API数据查询

2 个答案:

VF页面

控制器