Hi everybody,
My webpage contains a combo chart, a table chart and a date range filter. I
connected both charts to the filter in a dashboard and everything is
working except I want my table to have different columns then the one used
in my combo chart. For that I have a DataView for each chart both modifying
the same DataTable, I was wondering if I could filter the data directly
from the DataTable so then both chart would be filtered.
Here is my code
var view = new google.visualization.DataView(data);
view.setColumns([
{
label: 'Date',
type: 'date',
calc: function (dt, row) {
var d = dt.getValue(row, 0);
var strLbl = (months(d.getMonth())+' '+d.getFullYear());
return { v: d, f: strLbl };
}
},
{
label: 'P1',
type: 'number',
calc: function (dt, row) {
var p1 = dt.getValue(row, 1);
p1 = parseFloat(p1);
return { v: p1, f: p1.toString() };
}
},
{
role: 'annotation',
type: 'string',
calc: function (dt, row) {
var p1 = dt.getValue(row, 1);
var sumFloat = parseFloat(Math.round(p1 * 100) / 100).toFixed(2);
var sumStr = sumFloat.toString();
return { v: sumStr, f: sumStr.toString() };
}
},
{
label: 'P2',
type: 'number',
calc: function (dt, row) {
var p2 = dt.getValue(row, 2);
p2 = parseFloat(p2);
return { v: p2, f: p2.toString() };
}
},
{
role: 'annotation',
type: 'string',
calc: function (dt, row) {
var p2 = dt.getValue(row, 2);
var sumFloat = parseFloat(Math.round(p2 * 100) / 100).toFixed(2);
var sumStr = sumFloat.toString();
return { v: sumStr, f: sumStr.toString() };
}
},
{
label: 'Cible',
type: 'number',
calc: function (dt, row) {
var avg = dt.getValue(row, 3);
avg = parseFloat(avg);
return { v: avg, f: avg.toString() };
}
}
]);
var tableview = new google.visualization.DataView(data);
tableview.setColumns([
{
label: 'Date',
type: 'date',
calc: function (dt, row) {
var d = dt.getValue(row, 0);
var strLbl = (months(d.getMonth())+' '+d.getFullYear());
return { v: d, f: strLbl };
}
},
{
label: 'P1',
type: 'number',
calc: function (dt, row) {
var p1 = dt.getValue(row, 1);
var sumFloat = parseFloat(Math.round(p1 * 100) / 100).toFixed(2);
var sumStr = sumFloat.toString(); //Parse la variable en String.
return { v: p1, f: sumStr };
}
},
{
label: 'P2',
type: 'number',
calc: function (dt, row) {
var p2 = dt.getValue(row, 2);
var sumFloat = parseFloat(Math.round(p2 * 100) / 100).toFixed(2);
var sumStr = sumFloat.toString();
return { v: p2, f: sumStr };
}
},
{
label: 'Total',
type: 'number',
calc: function (dt, row) {
var p1 = dt.getValue(row, 1);
var p2 = dt.getValue(row, 2);
var initTotal = p1+p2;
var total = parseFloat(Math.round((initTotal) * 100) / 100).toFixed(2);
return { v: initTotal, f: total.toString() };
}
},
{
label: 'Cible',
type: 'number',
calc: function (dt, row) {
var goal = dt.getValue(row, 3);
goal = parseFloat(goal);
return { v: goal, f: goal.toString() };
}
},
{
label: 'Différence',
type: 'number',
calc: function (dt, row) {
var goal = dt.getValue(row, 3);
var p1 = dt.getValue(row, 1);
var p2 = dt.getValue(row, 2);
var total = p1+p2;
var diff = goal - total;
difference = parseFloat(Math.round((diff) * 100) / 100).toFixed(2);
return { v: diff, f: difference.toString() }
}
}
]);
var wid = view.getNumberOfRows() * 50;
var chartWidth = view.getNumberOfRows() * 45;
var screenWidth = screen.width;
wid = screenWidth-115 ;
chartWidth = screenWidth - 250;
var rangeSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'slider',
'options': {
'filterColumnIndex': 0,
'ui': {
'format': {pattern: "MMMM, yyyy"},
'label': '',
'cssClass': 'filterwidth table table-hover',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
}
},
backgroundColor: { fill:'transparent' }
}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'chart',
'options': {
'allowHtml': true,
'titleY': 'Moyenne des RFC Approuvés',
'title': 'Moyenne journalière des RFC Approuvés',
'width': wid,
'height': 500,
chartArea: {width: chartWidth, left:50, right:55},
'isStacked': true,
'hAxis': {'slantedText':true,'slantedTextAngle':100, 'titleTextStyle':
{'italic': false, color: '#FFFFFF'}, 'textStyle': {color: '#FFFFFF'}},
'vAxis': {'ticks': [5,10,15,20,25], 'titleTextStyle': {'italic': false,
color: '#FFFFFF'}, 'textStyle': {color: '#FFFFFF'}},
legend: {textStyle: {color: '#FFFFFF'}},
'seriesType': 'bars',
backgroundColor: { fill:'transparent' },
'bar': {'groupWidth': 38},
'titleTextStyle': {'italic': false, color: '#FFFFFF'},
domainAxis: {type: 'category'},
series: {1: {color: '#728F29'}, 0: {color: '#637CC9'}, 2:
{type:"steppedArea", areaOpacity:"0.0"}},
fontSize: 14
}
});
var dashboard = new
google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(rangeSlider, chart);
var wid = tableview.getNumberOfRows() * 50;
var tableCssStyling = {headerRow: 'bolded', tableCell: 'cellSpacing',
rowNumberCell: 'rowNumStyle'};
var tableoptions = {
allowHtml: true,
alternatingRowStyle: false,
width: wid-290,
backgroundColor: 'transparent',
cssClassNames: tableCssStyling,
showRowNumber: true,
}
var table = new google.visualization.ChartWrapper({
'chartType' : 'Table',
'containerId' : 'table',
'allowHtml': true,
'alternatingRowStyle': false,
'width': wid-290,
'backgroundColor': 'transparent',
'cssClassNames': tableCssStyling,
'showRowNumber': true,
});
dashboard.bind(rangeSlider, table);
dashboard.draw(view);
Thanks for your answers
--
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/d/optout.
