Hi guys,
In the code below the formatter color does not work. It should color red
all negative numbers. However, the % suffix and the parentheses on negative
numbers do work. Is this a bug in the API or am I doing something wrong?
I have used a formatter successfully in another table but without the
ChartWrapper object. Could this be part of the issues.
Thanks in advance!
Cheers!
<html>
<head>
<meta charset="utf-8" />
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi";
></script>
<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js";></script>
<style type='text/css'>
.tableFontSize { font-size: 10px; }
</style>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['controls', 'corechart',
'table']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTableTR?>);
// data=data.toJSON().replace(/\:0/g, ':null');
var tableCSSClassNames = {
'headerRow': 'tableFontSize',
'tableRow': 'tableFontSize',
'oddTableRow': 'tableFontSize',
'selectedTableRow': '',
'hoverTableRow': '',
'headerCell': '',
'tableCell': '',
'rowNumberCell': ''};
var memberOfTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div1',
// dataTable: data,
options: {
scrollLeftStartPosition: 1000,
width: '100%',
height: '100%',
'cssClassNames': tableCSSClassNames
}
});
var tableOptions = {
scrollLeftStartPosition: 1000,
width: '100%',
height: '100%',
'cssClassNames': tableCSSClassNames
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
// var memberOfTable = new
google.visualization.Table(document.getElementById('table_div1'));
// Define a category picker for the 'MemberOf' column.
var memberOfPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control_div1',
'options': {
'filterColumnLabel': 'Клиент',
'ui': {
'allowTyping': true,
'allowMultiple': false,
'allowNone' : false,
'allowHTML': true,
'selectedValuesLayout': 'belowStacked',
'label': 'Клиент',
'labelSeparator': ':',
'caption': 'Избери клиент...'
}
},
});
// Define a category picker for the 'MemberOf' column.
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'category_control_div1',
'options': {
'filterColumnLabel': 'Продуктова категория',
'ui': {
'allowTyping': false,
'allowMultiple': false,
'allowNone' : true,
'allowHTML': true,
'selectedValuesLayout': 'belowStacked',
'label': 'Продуктова категория',
'labelSeparator': ':',
'caption': 'Избери категория...'
}
},
});
var formatter = new google.visualization.NumberFormat({
suffix: '%',
fractionDigits: 0,
negativeColor: 'red',
negativeParens: true
});
formatter.format(data, 8);
// Create the dashboard.
var dashboard = new google.visualization.Dashboard(document.
getElementById('dash_div1')).
// Configure the category picker to affect the gauge chart
bind([memberOfPicker, categoryPicker], memberOfTable).
// Draw the dashboard
draw(data);
}
</script>
</head>
<body>
<div id="dash_div1" style="font-size : 12px;">
<div id="control_div1"></div>
<div id="category_control_div1"></div>
<div id="table_div1"></div>
</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/0c60733f-34b2-486f-b4d6-ec5937f6fdd9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
