google visualization formatter - no table values

Question

I have a google.visualization Datatable that shows up correcty with the values handed over by the data source

But if I try to add a formatter to the datatable then it fails and does not show the datatable

This is the Format of the Data in "dataTable"

dataTable=Object { cols=[2], rows=[2]}

cols [Object { type="string", id="Description", label="Description"}, Object { type="number", id="1", label="1"}]

0 Object { type="string", id="Description", label="Description"}

1 Object { type="number", id="1", label="1"}

rows [Object { c=[2] }]

0 Object { v=59.38}

1 Object { v=19.12}

This Table is correctly shown like follows:

Description | 1

First Value | 59.38

Second Value | 19.12

This is the code I use and that produces above result ...

       var dtWrapper = new google.visualization.ChartWrapper({
            chartType: "Table",
            dataTable: dataTable,
            options: {width: tableWidth},
            containerId: tableHolder
        });

        // here the formatter will be inserted (before .draw)

        dtWrapper.draw();

If I insert the following formatter code it throws an Error in the console:

        var formatter = new google.visualization.NumberFormat(
              {prefix: "Value: "});
        formatter.format(dataTable, 1); // Apply formatter to second column

This is the Error Message I am seeing in the firebug- console:

TypeError: a[da] is not a function

...is.N?K:t(this.N))&&0>d&&ala}}});$[H].formatValue=function...

http://www.google.com/uds/api/visualization/1.0/4086f2e8fc632adc52e6d6795a5637a4/format+de,default,controls,corechart.I.js

Line 56

Here is the Data that is handed over by my ashx-handler:

dataTable =  
{
"cols": 
  [
     {"type": "string" , "id": "Timerange" ,"label": "Timerange"},
     {"type": "number" ,"id": " 2013" ,"label": " 2013" }
  ], 
"rows" :
   [
     {"c" : [
              {"v": "< 15"}, {"v": 0}
            ]
     },
     {"c" : [
              {"v": "16 - 20"}, {"v": 15.63}
            ]
     }, 
     {"c" : [
               {"v": "21 - n"}, {"v": 15.63}
            ]
     },
     {"c" : [
              {"v": "> n"}, {"v": 68.75}
            ]
     }
  ]
}

Please can anybody assist how to solve this problem ?

Thanks in advance for any guidance Don

asgallant asgallant · Accepted Answer · 2013-09-04T14:59:28

If dataTable only contains "cols" and "rows" properties, then it is not a proper DataTable object. At a guess, dataTable is something like this:

var dataTable = {
    cols: [
        {type: 'string', id: 'Description', label: 'Description'},
        {type: 'number', id: '1', label: '1'}
    ],
    rows: [
        {c: [{v: 'First Value'}, {v: 59.38}]},
        {c: [{v: 'Second Value'}, {v: 19.12}]}
    ]
};

right? If so, then you need to pass it to a DataTable constructor:

var data = new google.visualization.DataTable(dataTable);

You can then format and draw your table with data.

Edit:

Here's an example fiddle that shows how to make this work: http://jsfiddle.net/asgallant/vT4Re/

google visualization formatter - no table values

1 Answers