function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
code redcode red 

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.