I have a workaround ... If i do not use a data view and use a data
table instead, and set the view option on the table (chart) to specify
the fields i want including calculated columns, it works.
eg.
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
},
view: [ 0,1,2,3,
//thumbnail column
{calc:formula1, type:'string', label:''},
//other column
{calc:formula2, type:'string', label:''} ]
});
I still think this might be a bug.
Max
On Jan 18, 12:37 pm, MadMax <[email protected]> wrote:
> Hi,
>
> When i use data view to populate a table (chart) within a dashboard
> none of my calculated fields appear in the table.
>
> Here is the code for those that are interested. (adapted Full
> dashboard example from playground)
>
> <!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]
> ]);
>
> var myView = new google.visualization.DataView(data);
>
> myView.setColumns([
> //the table columns
> 0,1,2,3,
> //thumbnail column
> {calc:formula1, type:'string', label:''},
> //other column
> {calc:formula2, type:'string', label:''}
> ]);
>
> // 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(myView);
> }
>
> function formula1(dataTable, rowNum){
> var output = "Blah" + dataTable.getValue(rowNum, 3);
> return output;
> }
>
> function formula2(dataTable, rowNum){
> var output = 'Foo' + dataTable.getValue(rowNum, 3);
> return output;
> }
>
> 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>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
