Integracja Google Charts z Salesforce

W systemie Salesforce możliwe jest wykorzystanie wykresów oferowanych przez Google: Google Charts. Nie jest wymagane, w przeciwieństwie do wielu innych bibliotek wykresów, tworzenie obiektów SControl. Wystarczy w kodzie strony dodać odwołanie do strony google z odpowiednią biblioteką oraz stworzyć funkcję JavaScript odpowiedzialną za ustawienie parametrów i renderowanie wykresu.

Kroki:
1. Stwórz stronę w Pages
2. W zależności od rodzaju wykresu wykresu dodaj odwołanie do odpowiedniej biblioteki. Przykład dla Gauge:

google.load('visualization', '1', {packages:['gauge']});

3. Stwórz funkcję renderującą i ustaw parametry:

function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Label'); data.addColumn('number', 'Value'); data.addRows(3); data.setValue(0, 0, 'Electricity'); data.setValue(0, 1, 80); data.setValue(1, 0, 'Water'); data.setValue(1, 1, 55); data.setValue(2, 0, 'Oil'); data.setValue(2, 1, 68); var chart = new google.visualization.Gauge(document.getElementById('gauge_div')); var options = {width: 600, height: 220, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5}; chart.draw(data, options); }

4. Stwórz DIV odpowiedzialny za przechowywanie wykresu.

<div id="gauge_div" style="width: 600px; height: 300px;"></div>

I oto mamy stronę wyglądającą tak:

A oto pełny tekst strony:

<apex:page >
<html>
  <head>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Label');
        data.addColumn('number', 'Value');
        data.addRows(3);
        data.setValue(0, 0, 'Electricity');
        data.setValue(0, 1, 80);
        data.setValue(1, 0, 'Water');
        data.setValue(1, 1, 55);
        data.setValue(2, 0, 'Oil');
        data.setValue(2, 1, 68);

        var chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
        var options = {width: 600, height: 220, redFrom: 90, redTo: 100,
            yellowFrom:75, yellowTo: 90, minorTicks: 5};
        chart.draw(data, options);
      }
    </script>
   </head>
  <body>
    <div id="gauge_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>
</apex:page>