formatter with red color for negative values does not work
343 views
Skip to first unread message
Hristo Stefanov
Nov 17, 2015, 2:28:41 AM11/17/15
to Google Visualization API
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>
Daniel LaLiberte
Nov 17, 2015, 9:03:39 AM11/17/15
to Google Visualization API
Hi Hristo,
Sounds like you have found a bug. The problem is probably not the ChartWrapper, but the fact that you are passing the data through a Dashboard, and the color property is getting lost along the way. This is probably a bug in the DataView that is used internally by the Dashboard to pass the filtered data on to the chart. Seems like this should be fixable, but I can't promise when we will be able to get to it.
--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
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.
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
Hristo Stefanov
Nov 17, 2015, 9:22:17 AM11/17/15
to Google Visualization API
Hi Daniel. Thanks for your response. I am happy that the problem is not in my work. It's not a big issue since the parentheses still work and my users will have a visual clue to the negative values.
Have a great week!
-itso
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
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.
Reply all
Reply to author
Forward
0 new messages