Startup animation from left to right in google line chart

Startup animation from left to right in google line chart - javascript

google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '84%'},
'hAxis': {'baselineColor': 'none', format: "dd.MM.yyyy" }
}
}
},
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart',
'options': {
animation:{
startup:true,
duration: 1000,
easing: 'out'
},
tooltip: {isHtml: true},
lineWidth: 4,
legend: {position: 'none'},
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '84%',interpolateNulls: true},
hAxis: {
title: ''
},
vAxis: { format :<?php echo "'#.## ".html_entity_decode($currencyhtml[$userCurrency])."'"; ?>,
viewWindowMode:'pretty',
gridlines: {
count: 4,
},
'slantedText': false,
title: ''
},
}
// Convert the first column from 'date' to 'string'.
});
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
var rawData = [
[new Date(2019,01,01), 1.00, 'example tooltip'],
[new Date(2019,01,03), 1.03, 'example tooltip'],
[new Date(2019,01,05), 2.00, 'example tooltip'],
[new Date(2019,01,07), 1.30, 'example tooltip'],
[new Date(2019,01,09), 1.00, 'example tooltip'],
[new Date(2019,01,11), 2.00, 'example tooltip'],
[new Date(2019,01,13), 1.10, 'example tooltip'],
[new Date(2019,01,15), 1.50, 'example tooltip'],
[new Date(2019,01,17), 1.20, 'example tooltip'],
[new Date(2019,01,19), 3.00, 'example tooltip'],
[new Date(2019,01,21), 1.30, 'example tooltip'],
[new Date(2019,01,23), 1.25, 'example tooltip']
];
dashboard.bind(control, chart);
drawChart();
setInterval(drawChart, 1200);
var rowIndex = 0;
function drawChart() {
if (rowIndex < rawData.length) {
data.addRow(rawData[rowIndex++]);
dashboard.draw(data);
}
}
});
its working great so far but I would like to implement this startup animation ( Google Visualization: Animated Line Graph --incremental rather than all at once? ) in my example. I tried to place
drawChart();
setInterval(drawChart, 1200);
var rowIndex = 0;
function drawChart() {
if (rowIndex < rawData.length) {
data.addRow(rawData[rowIndex++]);
chart.draw(data, options);
}
}
on the correct spot but the graph is not drawing at all :(. Anyone know what I have to do in my example to get this nice startup animation from left to right.

you need to add the data to a regular array,
then add one row at a time to the data table,
and draw the dashboard after adding each row.
see following snippet...
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
// Filter by the date axis.
filterColumnIndex: 0,
ui: {
chartType: 'LineChart',
chartOptions: {
chartArea: {
width: '84%'
},
hAxis: {
baselineColor: 'none',
format: "dd.MM.yyyy"
}
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart',
options: {
animation:{
startup:true,
duration: 1000,
easing: 'out'
},
tooltip: {
isHtml: true
},
lineWidth: 4,
legend: {
position: 'none'
},
// Use the same chart area width as the control for axis alignment.
chartArea: {
height: '80%',
width: '84%',
interpolateNulls: true
},
hAxis: {
title: ''
},
vAxis: {
format: <?php echo "'#.## ".html_entity_decode($currencyhtml[$userCurrency])."'"; ?>,
viewWindowMode: 'pretty',
gridlines: {
count: 4,
},
slantedText: false,
title: ''
},
}
});
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
rawData = [
[new Date(".$date."), '".$value."'], ";
...
... (and so on) ...
];
dashboard.bind(control, chart);
drawChart();
setInterval(drawChart, 1200);
var rowIndex = 0;
function drawChart() {
if (rowIndex < rawData.length) {
data.addRow(rawData[rowIndex++]);
dashboard.draw(data);
}
}
}
EDIT
it appears the control's range was getting stuck on the first draw.
see following working snippet,
here, I set the axis range on the chart and control,
before each draw...
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'LineChart',
chartOptions: {
animation:{
startup:true,
duration: 1000,
easing: 'out'
},
chartArea: {
width: '84%'
},
hAxis: {
baselineColor: 'none',
format: "dd.MM.yyyy"
}
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart',
options: {
animation:{
startup:true,
duration: 1000,
easing: 'out'
},
tooltip: {
isHtml: true
},
lineWidth: 4,
legend: {
position: 'none'
},
chartArea: {
height: '80%',
width: '84%',
interpolateNulls: true
},
hAxis: {
title: ''
},
vAxis: {
format: '#,##0',
gridlines: {
count: 4,
},
slantedText: false,
title: ''
},
}
});
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addRows([
[new Date(2019,01,01), 1.00, 'example tooltip'],
[new Date(2019,01,03), 1.03, 'example tooltip'],
[new Date(2019,01,05), 2.00, 'example tooltip'],
[new Date(2019,01,07), 1.30, 'example tooltip'],
[new Date(2019,01,09), 1.00, 'example tooltip'],
[new Date(2019,01,11), 2.00, 'example tooltip'],
[new Date(2019,01,13), 1.10, 'example tooltip'],
[new Date(2019,01,15), 1.50, 'example tooltip'],
[new Date(2019,01,17), 1.20, 'example tooltip'],
[new Date(2019,01,19), 3.00, 'example tooltip'],
[new Date(2019,01,21), 1.30, 'example tooltip'],
[new Date(2019,01,23), 1.25, 'example tooltip']
]);
var view = new google.visualization.DataView(data);
var dateRange = data.getColumnRange(0);
chart.setOption('hAxis.viewWindow', dateRange);
chart.setOption('vAxis.viewWindow', data.getColumnRange(1));
dashboard.bind(control, chart);
drawChart();
setInterval(drawChart, 1200);
var rowIndex = 0;
var viewRows = [];
function drawChart() {
if (rowIndex < data.getNumberOfRows()) {
viewRows.push(rowIndex++);
view.setRows(viewRows);
control.setState({range: {
begin: dateRange.min,
end: dateRange.max
}});
dashboard.draw(view);
}
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>

Related

Google Chart - stacked chart one data two filters

Location Company GR1 GR2 GR3 GR4 GR5
1 NYC CUSTOMERS 0 0 13 5 19
2 CALI ORG 270 210 0 32 51
3 CALI CUSTOMERS 35.942 39 0 50 126
4 WDC CUSTOMERS 0 0 35 52 88
5 WDC CUSTOMERS 44.507 0 25 18 88
6 NJ ORG 0 0 54 22 28
7 TXS CUSTOMERS 0 0 0 10 11
Filter Location :
[NYC, CALI, WDC, NJ, TXS, UT, GA]
Filter Company :
[CUSTOMERS, ORG]
IN ColumnChart-STACKED for CALI and WDC it shows two columns. there i want to show as a single column of a cumulated value of both CUSTOMERS and ORG. but for table it s ok to show two CALI and WDC.
My Code
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
drawMainDashboard();
});
function drawMainDashboard() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_division1'));
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div',
'options': {
'filterColumnIndex': 1,
'ui': {
'labelStacking': 'vertical',
'label': 'Company Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div1',
'options': {
'filterColumnIndex': 0,
'ui': {
'labelStacking': 'vertical',
'label': 'Location Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var columnchrt = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
title: "Locations charts today",
width: 850,
height: 500,
legend: { position: 'top', maxLines: 2 },
bar: { groupWidth: '70%' },
isStacked: true,
explorer: {keepInBounds: true, maxZoomIn: 10.0}
},
'view': {'columns': [0,2,3,4,5,7]}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
showRowNumber: true,
width: '100%',
height: '100%',
allowHtml: true
},
'view': {'columns': [0,1,2,3,4,5,6]}
});
var data = google.visualization.arrayToDataTable([
['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
<c:forEach items="${GrsByCompanyList}" var="entry">
[ '${entry.key}', '${entry.value7}', ${entry.value1}, ${entry.value2}, ${entry.value3}, ${entry.value4}, ${entry.value5}, ${entry.value6} ],
</c:forEach>
]);
dashboard.bind([categoryPicker,categoryPicker1], [columnchrt, table]);
dashboard.draw(data);
}
<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">
<div class="float_left panel" style="float:left; width:60%; padding:0px;">
<div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
<div class="table_bbar" style="background-color:#27ae60;" >
<h4>by Locations as on Today</h4>
<div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
<div id="categoryPicker_div1" ></div>
</div>
<div id="table_div"></div>
</div>
</div>

the reason there are two columns for CALI and WDC,
is because there are two rows in the data table.
in order to have one column, you need to aggregate the data table on location.
this could be performed by removing the chart from the dashboard,
then draw it separately when the table chart's 'ready' event fires.
to do this, you need to remove the view from the column chart.
when the ready event fires, aggregate the data table.
you will also need to build a data view over the aggregated data table,
in order to add back the total annotation.
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
drawMainDashboard();
});
function drawMainDashboard() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_division1'));
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div',
'options': {
'filterColumnIndex': 1,
'ui': {
'labelStacking': 'vertical',
'label': 'Company Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div1',
'options': {
'filterColumnIndex': 0,
'ui': {
'labelStacking': 'vertical',
'label': 'Location Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var columnchrt = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
title: "Locations charts today",
width: 850,
height: 500,
legend: { position: 'top', maxLines: 2 },
bar: { groupWidth: '70%' },
isStacked: true,
explorer: {keepInBounds: true, maxZoomIn: 10.0}
}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
showRowNumber: true,
width: '100%',
height: '100%',
allowHtml: true
},
'view': {'columns': [0,1,2,3,4,5,6]}
});
google.visualization.events.addListener(table, 'ready', function () {
// get filtered data table from table chart
var dt = table.getDataTable();
// build aggregation and view columns
var aggColumns = [];
var viewColumns = [0];
for (var i = 2; i < dt.getNumberOfColumns(); i++) {
if (i !== dt.getNumberOfColumns() - 2) {
if (dt.getColumnType(i) === 'number') {
if (dt.getColumnRole(i) === 'annotation') {
addAnnColumn(i);
} else {
addAggColumn(i);
viewColumns.push(i - 1);
}
}
}
}
function addAggColumn(index) {
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index,
label: dt.getColumnLabel(index),
type: dt.getColumnType(index)
});
}
function addAnnColumn(index) {
viewColumns.push({
calc: 'stringify',
role: 'annotation',
sourceColumn: aggColumns.length,
type: 'string'
});
}
// aggregate data table
var agg = google.visualization.data.group(
dt,
[0],
aggColumns
);
// create agg data view to add annotation
var view = new google.visualization.DataView(agg);
view.setColumns(viewColumns);
// draw chart
columnchrt.setDataTable(view);
columnchrt.draw();
});
var data = google.visualization.arrayToDataTable([
['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
['NYC', 'CUSTOMERS', 0, 0, 13, 5, 19, 19],
['CALI', 'ORG', 270, 210, 0, 32, 51, 51],
['CALI', 'CUSTOMERS', 35.942, 39, 0, 50, 126, 126],
['WDC', 'CUSTOMERS', 0, 0, 35, 52, 88, 88],
['WDC', 'CUSTOMERS', 44.507, 0, 25, 18, 88, 88],
['NJ', 'ORG', 0, 0, 54, 22, 28, 28],
['TXS', 'CUSTOMERS', 0, 0, 0, 10, 11, 11]
]);
dashboard.bind([categoryPicker,categoryPicker1], [table]);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">
<div class="float_left panel" style="float:left; width:60%; padding:0px;">
<div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
<div class="table_bbar" style="background-color:#27ae60;" >
<h4>by Locations as on Today</h4>
<div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
<div id="categoryPicker_div1" ></div>
</div>
<div id="table_div"></div>
</div>
</div>
EDIT
in the annotation columns, we'll need to manually calculate the total...
viewColumns.push({
calc: function (dt, row) {
var total = 0;
for (var c = 1; c < dt.getNumberOfColumns(); c++) {
total += dt.getValue(row, c);
}
return total.toFixed(0);
},
role: 'annotation',
type: 'string'
});
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
drawMainDashboard();
});
function drawMainDashboard() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_division1'));
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div',
'options': {
'filterColumnIndex': 1,
'ui': {
'labelStacking': 'vertical',
'label': 'Company Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div1',
'options': {
'filterColumnIndex': 0,
'ui': {
'labelStacking': 'vertical',
'label': 'Location Selection:',
'allowTyping': false,
'allowMultiple': false
}
}
});
var columnchrt = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
title: "Locations charts today",
width: 850,
height: 500,
legend: { position: 'top', maxLines: 2 },
bar: { groupWidth: '70%' },
isStacked: true,
explorer: {keepInBounds: true, maxZoomIn: 10.0}
}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
showRowNumber: true,
width: '100%',
height: '100%',
allowHtml: true
},
'view': {'columns': [0,1,2,3,4,5,6]}
});
google.visualization.events.addListener(table, 'ready', function () {
// get filtered data table from table chart
var dt = table.getDataTable();
// build aggregation and view columns
var aggColumns = [];
var viewColumns = [0];
for (var i = 2; i < dt.getNumberOfColumns(); i++) {
if (i !== dt.getNumberOfColumns() - 2) {
if (dt.getColumnType(i) === 'number') {
if (dt.getColumnRole(i) !== 'annotation') {
addAggColumn(i);
viewColumns.push(i - 1);
}
}
}
}
function addAggColumn(index) {
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index,
label: dt.getColumnLabel(index),
type: dt.getColumnType(index)
});
}
// aggregate data table
var agg = google.visualization.data.group(
dt,
[0],
aggColumns
);
viewColumns.push({
calc: function (dt, row) {
var total = 0;
for (var c = 1; c < dt.getNumberOfColumns(); c++) {
total += dt.getValue(row, c);
}
return total.toFixed(0);
},
role: 'annotation',
type: 'string'
});
// create agg data view to add annotation
var view = new google.visualization.DataView(agg);
view.setColumns(viewColumns);
// draw chart
columnchrt.setDataTable(view);
columnchrt.draw();
});
var data = google.visualization.arrayToDataTable([
['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
['NYC', 'CUSTOMERS', 0, 0, 13, 5, 19, 19],
['CALI', 'ORG', 270, 210, 0, 32, 51, 51],
['CALI', 'CUSTOMERS', 35.942, 39, 0, 50, 126, 126],
['WDC', 'CUSTOMERS', 0, 0, 35, 52, 88, 88],
['WDC', 'CUSTOMERS', 44.507, 0, 25, 18, 88, 88],
['NJ', 'ORG', 0, 0, 54, 22, 28, 28],
['TXS', 'CUSTOMERS', 0, 0, 0, 10, 11, 11]
]);
dashboard.bind([categoryPicker,categoryPicker1], [table]);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">
<div class="float_left panel" style="float:left; width:60%; padding:0px;">
<div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
<div class="table_bbar" style="background-color:#27ae60;" >
<h4>by Locations as on Today</h4>
<div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
<div id="categoryPicker_div1" ></div>
</div>
<div id="table_div"></div>
</div>
</div>

How can I filter two charts with different ways to get data with the same string filter?

here's my code:
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'ID');
data.addColumn('string', 'Customer_Name');
data.addColumn('number', 'Credits');
data.addColumn('string', 'Date');
data.addColumn('string', 'Seller');
data.addColumn('string', 'Branch');
data.addRows([
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
[213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
]);
var groupedBranch = google.visualization.data.group(data, [5], [{
column: 0,
type: 'number',
label: data.getColumnLabel(0),
aggregation: google.visualization.data.count
}]);
var branchFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'div_filter1',
'options': {
'filterColumnLabel': 'Branch',
'matchType': ('any'),
'ui': {label: 'Branch filter', labelSeparator:':', labelStacking:'vertical'}
}
});
var branchChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'div_chart1',
'options': {
'animation':{duration:666, easing:'inAndOut', startup:true},
'backgroundColor': {fill:'transparent' },
'title': 'Branches',
'hAxis': {title: 'Branch', titleTextStyle: {color: '#999'}, textStyle : {fontSize: 12}},
'vAxis': {minValue: 0},
'colors': ['#f39c12'],
'legend': 'none'
}
});
var tableChart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'div_chart3',
'options': {
'animation':{duration:666, easing:'inAndOut', startup:true},
'backgroundColor': {fill:'transparent' },
'title': 'a',
'hAxis': {title: 'Loja', titleTextStyle: {color: '#999'}, slantedText:true, slantedTextAngle:74, textStyle : {fontSize: 12}},
'vAxis': {minValue: 0},
'colors': ['#f39c12'],
'legend': 'none'
}
});
And then below, the way that my dashboard is drawing (my problem).
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(branchFilter, [branchChart, tableChart]);
dashboard.draw(groupedBranch);
}
here is my point.
I want to draw the Column Chart based on my var groupedBranch data and the Table based on my var data,
both using the same branchFilter
Image exemples:
The way my dashboard is now
The table now
The table I need

dashboards will only work with one data table
in this case, draw each chart independently, on the filter's 'statechange' event
google.visualization.events.addListener(branchFilter, 'statechange', drawCharts);
when the event fires, use data table method getFilteredRows to build a view for each chart
you will have to manually account for the filter's matchType
var filterValue = branchFilter.getState().value;
viewBranch.rows = groupedBranch.getFilteredRows([{
column: 0,
test: function (value) {
// same as matchType: 'any'
return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
}
}]);
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'ID');
data.addColumn('string', 'Customer_Name');
data.addColumn('number', 'Credits');
data.addColumn('string', 'Date');
data.addColumn('string', 'Seller');
data.addColumn('string', 'Branch');
data.addRows([
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
[213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
]);
var groupedBranch = google.visualization.data.group(data, [5], [{
column: 0,
type: 'number',
label: data.getColumnLabel(0),
aggregation: google.visualization.data.count
}]);
var branchFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'div_filter1',
dataTable: groupedBranch,
options: {
filterColumnLabel: 'Branch',
matchType: 'any',
ui: {label: 'Branch filter', labelSeparator:':', labelStacking:'vertical'}
}
});
google.visualization.events.addListener(branchFilter, 'ready', drawCharts);
google.visualization.events.addListener(branchFilter, 'statechange', drawCharts);
var branchChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'div_chart1',
dataTable: groupedBranch,
options: {
animation: {duration: 666, easing: 'inAndOut', startup: true},
backgroundColor: {fill:'transparent' },
title: 'Branches',
hAxis: {title: 'Branch', titleTextStyle: {color: '#999'}, textStyle: {fontSize: 12}},
vAxis: {minValue: 0},
colors: ['#f39c12'],
legend: 'none'
}
});
var tableChart = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'div_chart3',
dataTable: data
});
branchFilter.draw();
function drawCharts() {
var filterValue = branchFilter.getState().value;
var viewBranch = {};
var viewTable = {};
if (filterValue !== '') {
viewBranch.rows = groupedBranch.getFilteredRows([{
column: 0,
test: function (value) {
return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
}
}]);
viewTable.rows = data.getFilteredRows([{
column: 5,
test: function (value) {
return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
}
}]);
}
branchChart.setView(viewBranch);
branchChart.draw();
tableChart.setView(viewTable);
tableChart.draw();
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_filter1"></div>
<div id="div_chart1"></div>
<div id="div_chart3"></div>

Google chart ChartWrapper getting invalid column index

I've followed the google chart tutorial to make a ControlWrapper drive two charts, I've prepared a dataset with 4 columns:
data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'col1');
data.addColumn('number', 'col2');
data.addColumn('number', 'col3');
then I've setup the two charts with ChartWrapper:
chart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart1div',
'options': {
title: 'Chart1',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
animation:{
duration: 1000,
easing: 'out',
"startup": true
},
'chartArea': {'height': '90%', 'width': '90%'},
hAxis: {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
},
'view': {'columns': [0, 1]}
});
chart2 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart2div',
'options': {
title: 'chart2',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
animation:{
duration: 1000,
easing: 'out',
"startup": true
},
'chartArea': {'height': '90%', 'width': '90%'},
hAxis: {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
},
'view': {'columns': [0,2]}
});
Then:
timeRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'filter_div',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'curveType': 'function',
'chartArea': {'width': '90%'},
//'hAxis': {'baselineColor': 'none'}
'hAxis': {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
}
},
'chartView': {
'columns': [0, 1, 2, 3]
},
'minRangeSize': 43200000
}
}
});
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind(timeRangeSlider, [chart, chart2]);
dashboard.draw(data);
But I'm getting Invalid column index 2. Should be an integer in the range [0-1] for the second chart and I don't know why, because in the dataset there are 4 columns so there must exists a column index 2!
Anyone have experienced something like this?

it's a bug when using a view combined with animation on startup
remove "startup": true and the error doesn't occur
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart', 'controls']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'col1');
data.addColumn('number', 'col2');
data.addColumn('number', 'col3');
for (var i= 0; i < 10; i++) {
data.addRow([
new Date(2017, 0, 6, (i + 1)),
i * 1,
i * 2,
i * 3,
]);
}
chart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart1div',
'options': {
title: 'Chart1',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
animation:{
duration: 1000,
easing: 'out',
"startup": true
},
'chartArea': {'height': '90%', 'width': '90%'},
hAxis: {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
},
'view': {'columns': [0, 1]}
});
chart2 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart2div',
dataTable: data,
'options': {
title: 'chart2',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
animation:{
duration: 1000,
easing: 'out'
},
'chartArea': {'height': '90%', 'width': '90%'},
hAxis: {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
},
'view': {'columns': [0, 2]}
});
chart2.draw();
timeRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'filter_div',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'curveType': 'function',
'chartArea': {'width': '90%'},
//'hAxis': {'baselineColor': 'none'}
'hAxis': {
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']},
hours: {format: ['HH:mm', 'ha']},
}
},
'slantedText': false,
minorGridlines: {
units: {
hours: {format: ['hh:mm:ss a', 'ha']},
minutes: {format: ['HH:mm a Z', ':mm']}
}
}
}
},
'chartView': {
'columns': [0, 1, 2, 3]
},
'minRangeSize': 43200000
}
}
});
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind(timeRangeSlider, [chart]);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="chart1div"></div>
<div id="chart2div"></div>
<div id="filter_div"></div>
</div>

The error occures when you use 'setColumns': for instance view.setColumns([0,1,2])
As a workaround, when you make the columns calculated the error doesn't show up:
function r1(data, rowNum) {return (data.getValue(rowNum, 1))};
function r2(data, rowNum) {return (data.getValue(rowNum, 2))};
view.setColumns([0,
{
calc: r1,
type: 'number',
label: 'Max'
}, {
calc: r2,
type: 'number',
label: 'Gem'
}]);

Google Charts fractionDigits

I have a problem. Im relatively new to Javascript but I am working on a project where people want to have charts about their improvements. I have sucessfuly made 2 charts, while I do have problems for the 3rd one. The numbers consist of 0.000yyyyy when y stands for random numbers, and when you hover the chart, info shows 0. I put fractionDigits in options, but cant get them to work right.
Here is the code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015 , 03 , 15),0.000125],
[new Date(2015 , 04 , 09),0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],
]);
var options = {
hAxis: {
title: 'Time',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle:{color: '#FFF'},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {color: '#fff'}
},
NumberFormat: {
fractionDigits:15,
},
annotations: {
boxStyle: {
stroke: '#765e34',
strokeWidth: 10,
}
},
backgroundColor: "transparent",
colors: ['#876c3c'],
};
var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
chart.draw(data, options);
}

to format the number in the tooltip, use NumberFormat, after data is built
// format data
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
see following working snippet...
google.charts.load('current', {
callback: drawBackgroundColor,
packages: ['corechart']
});
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015 , 03 , 15), 0.000125],
[new Date(2015 , 04 , 09), 0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875]
]);
// format data
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
var options = {
hAxis: {
title: 'Time',
textStyle:{
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle:{
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {
color: '#fff'
}
},
annotations: {
boxStyle: {
stroke: '#765e34',
strokeWidth: 10,
}
},
backgroundColor: 'transparent',
colors: ['#876c3c']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
before styling annotations, you must include an annotation column
use a DataView to add the column using a function to "stringify" the series column
see following working snippet...
google.charts.load('current', {
callback: drawBackgroundColor,
packages: ['corechart']
});
function drawBackgroundColor(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Xaurum Gold Growth');
data.addRows([
[new Date(2015, 03, 15), 0.000125],
[new Date(2015, 04, 09), 0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],
[new Date(2015, 05, 22), 0.000126211199625],
[new Date(2015, 06, 07), 0.000127017994375],
[new Date(2015, 06, 08), 0.000127487763],
[new Date(2015, 06, 09), 0.000128022515125],
[new Date(2015, 06, 10), 0.00012886722975],
[new Date(2015, 06, 11), 0.00012921927025],
]);
// add annotation column
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 15
});
formatter.format(data, 1);
var options = {
hAxis: {
title: 'Time',
textStyle: {
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
vAxis: {
title: 'Value',
textStyle: {
color: '#FFF'
},
titleTextStyle: {
color: '#fff'
}
},
legend: {
textStyle: {
color: '#fff'
}
},
annotations: {
boxStyle: {
stroke: '#876c3c',
strokeWidth:3
},
textStyle: {
color: '#876c3c'
}
},
backgroundColor: "transparent",
colors: ['#876c3c']
};
var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
// use data view to draw chart
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="charta_div"></div>

Sum column in google viz DataTable dashboard

Here I have an simple demo: http://jsfiddle.net/36yve/
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael' , 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Age',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'title': 'Donuts eaten per person',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [0, 3]}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table]).
// Draw the entire dashboard.
draw(data);
}
all works fine.
What I want to know?
How I can add row at the end of table to sum column [Age and Donuts eaten] and also to work when I use filters-controls ?
is there any solution for that problem?

You need to take the Table out of the Dashboard and create a "ready" event handler for the PieChart that grabs the data used by the chart, aggregates it to get the totals, builds a new DataTable including the totals, and draws the Table using the new data:
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael' , 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Age',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'title': 'Donuts eaten per person',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
'view': {'columns': [0, 3]}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
google.visualization.events.addListener(pie, 'ready', function () {
var dt = pie.getDataTable().toDataTable();
var totals = google.visualization.data.group(dt, [{
type: 'number',
column: 0,
// make all values the same
modifier: function () {return 0;}
}], [{
type: 'number',
column: 2,
aggregation: google.visualization.data.sum
}, {
type: 'number',
column: 3,
aggregation: google.visualization.data.sum
}]);
dt.addRow(['Total', null, totals.getValue(0, 1), totals.getValue(0, 2)]);
table.setDataTable(dt);
table.draw();
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie]).
// Draw the entire dashboard.
draw(data);
}
see example here: http://jsfiddle.net/asgallant/x8f7J/

Develop Reference

JavaScript is the programming language of the Web.

Startup animation from left to right in google line chart - javascript

Related

Google Chart - stacked chart one data two filters

How can I filter two charts with different ways to get data with the same string filter?

Google chart ChartWrapper getting invalid column index

Google Charts fractionDigits

Sum column in google viz DataTable dashboard

Categories

Resources