Hi,
I am building a simple dashboard.
Using the ChartRangeFilter to specify a range of dates, I want the sum of
these rows to display as one stacked bar.
On the same chart I want to display 2 other stacked bars that are NOT in
that range of dates.
Below is the relevant code that I have working but this only displays the
single stacked bar that is the sum of rows.
I do not know how to add the other two, where the chartrangefilter will not
affect them.
Please help.
//-------------------------------------
var dashboard = new google.visualization.Dashboard(
document.getElementById('dash'));
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'E');
data.addColumn('number', 'D');
data.addColumn('number', 'O');
//add a bunch of data
//add two rows that are 1 year ahead and 1 year behind all the other
data
//these two rows should not be affected by the chart range filter
data.sort([{column: 0}]);
//this intermediate control would be hidden so that the user can only
manipulate the date ranges of the
var intermediate_control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'hidden_div',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'ComboChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'},
'seriesType': 'bars',
'isStacked': true
},
// Display a single series that shows the closing value of the
sales.
// Thus, this view has two columns: the date (axis) and the stock
value (line series).
'chartView': {
'columns': [0,1,2,3],
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize': 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
'state': {'range': {'start': new Date(today.getFullYear() - 1,0,1),
'end': new Date(today.getFullYear() - 1, 12,31)}}
});
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'rows' : [1],
'ui': {
'chartType': 'ComboChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'},
'seriesType': 'bars',
'isStacked': true
},
// Display a single series that shows the closing value of the
sales.
// Thus, this view has two columns: the date (axis) and the stock
value (line series).
'chartView': {
'columns': [0,
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < r; i++){
res += dT.getValue(i,1);
}
return res;
},
'type' : 'number',
'label' : 'E'
},
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < r; i++){
res += dT.getValue(i,2);
}
return res;
},
'type' : 'number',
'label' : 'D'
},
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < r; i++){
res += dT.getValue(i,3);
}
return res;
},
'type' : 'number',
'label' : 'O'
}
],
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize': 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
'state': {'range': {'start': new Date(today.getFullYear() - 1,0,1),
'end': new Date(today.getFullYear() - 1, today.getMonth(),
today.getDate())}}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '70%'},
'hAxis': {'slantedText': false},
'vAxis': {'title' : 'Sales'},
'seriesType': 'bars',
'isStacked': true
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 0) + ' - ' +
dataTable.getFormattedValue(dataTable.getNumberOfRows() - 1, 0);//'Last
Year YTD';
},
'type': 'string'
},
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < dT.getNumberOfRows(); i++){
res += dT.getValue(i,1);
}
return res;
},
'type' : 'number',
'label' : 'E'
},
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < dT.getNumberOfRows(); i++){
res += dT.getValue(i,2);
}
return res;
},
'type' : 'number',
'label' : 'D'
},
{
'calc' : function(dT, r) {
var res = 0;
for (var i = 0; i < dT.getNumberOfRows(); i++){
res += dT.getValue(i,3);
}
return res;
},
'type' : 'number',
'label' : 'O'
},
],
'rows' : [0]
}
});
dashboard.bind(intermediate_control, control);
dashboard.bind(control, chart);
dashboard.draw(data);
console.log(data);
console.log(control);
--
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.
For more options, visit https://groups.google.com/groups/opt_out.
