Google Charts: ChartWrapper and Formatters (NumberFormat) - charts

Question

How do I use ChartWrapper and a formatter to add a suffix to the tooltip on line / bar charts?
This is my code for the ChartWrapper
function drawChartb() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataTable: [['Person', 'Score'], [1, .50], [2, .25]],
options: {'legend': 'bottom', 'colors': ['#D70005'], 'chartArea': {left: 40, top: 10, width: 450}, 'vAxis': {format: '#,###%', 'viewWindow': {max: 1.05, min: .2}}, 'pointSize': 6},
containerId: 'chart_div'
});
wrapper.draw();
}
This is how I did it without using a chartwrapper.
// set tooltip as percentage
var formatter = new google.visualization.NumberFormat({
pattern: '#%',
fractionDigits: 2
});
formatter.format(data, 1);
Thanks

Answer 1

You can define your data outside the wrapper, use the formatter on it, and then set the dataTable to be equal to that data source:
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Person', 'Score'], [1, .50], [2, .25]
]);
// set tooltip as percentage
var formatter = new google.visualization.NumberFormat({
pattern: '#%',
fractionDigits: 2
});
formatter.format(data, 1);
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataTable: data,
options: {'legend': 'bottom', 'colors': ['#D70005'], 'chartArea': {left: 40, top: 10, width: 450}, 'vAxis': {format: '#,###%', 'viewWindow': {max: 1.05, min: .2}}, 'pointSize': 6},
containerId: 'visualization'
});
wrapper.draw();
}
Result:

Answer 2

For those who generate their chart data using Google JSON schema and cannot get NumberFormat to work with ChartWrapper, you can apply formatting directly to the row "f":null
To note:
I have found the NumberFormat constructor method works with DataTables but not with ChartWrapper.
Using DataTable > OK
var chart = new google.visualization.PieChart(document.getElementById('chart'));
var dataTable = new google.visualization.DataTable(data);
var formatter = new google.visualization.NumberFormat({prefix: '$'});
formatter.format(dataTable, 1);
Using ChartWrapper > BAD
var formatter = new google.visualization.NumberFormat({prefix: '$'});
formatter.format(data, 1);
var wrapper = new google.visualization.ChartWrapper({
chartType: 'PieChart',
dataTable: data,
options: myPieChartOptions(),
containerId: 'chart_div'
});
This is how I properly formatted my data using Google JSON.
Example JSON:
{
"cols": [
{"id":"","label":"Product","pattern":"","type":"string"},
{"id":"","label":"Sales","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Nuts","f":null},{"v":945.59080870918,"f":"$945.59"}]}
]
}
And here's the PHP code to generate that JSON
setlocale(LC_MONETARY, 0);
// init arrays
$result['cols'] = array();
$result['rows'] = array();
// add col data
$result['cols'][] = array(
"id" => "",
"label" => "Product",
"pattern" => "",
"type" => "string"
);
$result['cols'][] = array(
"id" => "",
"label" => "Sales",
"pattern" => "",
"type" => "number"
);
$nutsTotalFormat = "$".number_format($nutsTotal, 2);
$result['rows'][]["c"] = array(array("v" => "Nuts","f" => null),array("v" => $nutsTotal,"f" => $nutsTotalFormat ));
Pie chart will show the formatted result of $nutsTotalFormat
"$945.59"