Related
I have a combo chart containing area, bars and line graphs. I'd like the area and line charts to align maximally to the left and right side. For bars chart it's not required. Unfortunately I'm unable to align the graphs properly. I went through the documentation and couldn't find a solution to my problem.
Current chart:
Expected chart:
Here is the GoogleChartInterface object of the chart (I'm adding dataTable and ticks dynamically):
{
chartType: 'ComboChart',
dataTable: [],
options: {
focusTarget: 'category',
animation: {
startup: true,
easing: 'out',
duration: 500,
},
height: '160',
chartArea: {
width: '90%',
height: '79%',
},
vAxes: {
0: {
titlePosition: 'none',
textStyle: {
color: '#febd02',
bold: true,
fontSize: 13,
},
format: '#',
gridlines: {
color: '#eaeaea',
count: '5',
},
interpolateNulls: true,
},
1: {
titlePosition: 'none',
format: '#',
gridlines: {
color: 'transparent'
},
interpolateNulls: true,
},
2: {
groupWidth: '100%',
titlePosition: 'none',
textStyle: {
color: '#0284ff',
bold: true,
fontSize: 13,
},
format: 'decimal',
gridlines: {
color: 'transparent'
},
},
},
hAxis: {
textStyle: {
color: '#393939',
bold: true,
fontSize: 13,
},
format: 'EEEE',
gridlines: {
count: 0,
color: 'transparent'
},
ticks: [],
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
type: 'line'
},
2: {
targetAxisIndex: 2,
type: 'bars',
dataOpacity: 0.5,
},
},
colors: [
'#febd02',
'#a5a5a5',
'#0284ff',
],
bar: {
groupWidth: '35'
},
legend: {
position: 'none'
},
},
};
in order to stretch the area and line series to the edges of the chart,
we must first use a data type that will render a continuous x-axis.
in this case, we will use date time.
next, we use option hAxis.viewWindow to control where the series start and end.
viewWindow has two properties, min & max.
the values of min & max should match the data type of the x-axis.
in this case, we set the values to the dates where the series should begin and end.
hAxis: {
viewWindow: {
min: new Date(2020, 10, 13),
max: new Date(2020, 10, 19)
}
}
this will stretch the series to the edges of the chart.
see following working snippet for an example...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function() {
var data = google.visualization.arrayToDataTable([
['Date', 'y0', 'y1', 'y2'],
[new Date(2020, 10, 13), 100, 50, 25],
[new Date(2020, 10, 14), 110, 45, 5],
[new Date(2020, 10, 15), 90, 40, 60],
[new Date(2020, 10, 16), 80, 30, 10],
[new Date(2020, 10, 17), 70, 20, 0],
[new Date(2020, 10, 18), 60, 10, 0],
[new Date(2020, 10, 19), 50, 5, 0]
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'chart',
dataTable: data,
options: {
focusTarget: 'category',
animation: {
startup: true,
easing: 'out',
duration: 500,
},
chartArea: {
left: 60,
top: 12,
right: 60,
bottom: 72,
height: '100%',
width: '100%'
},
height: '100%',
width: '100%',
vAxes: {
0: {
titlePosition: 'none',
textStyle: {
color: '#febd02',
bold: true,
fontSize: 13,
},
format: '#',
gridlines: {
color: '#eaeaea',
count: '5',
},
interpolateNulls: true,
},
1: {
titlePosition: 'none',
format: '#',
gridlines: {
color: 'transparent'
},
interpolateNulls: true,
},
2: {
groupWidth: '100%',
titlePosition: 'none',
textStyle: {
color: '#0284ff',
bold: true,
fontSize: 13,
},
format: 'decimal',
gridlines: {
color: 'transparent'
},
},
},
hAxis: {
textStyle: {
color: '#393939',
bold: true,
fontSize: 13,
},
format: 'dd MMM. yyyy',
gridlines: {
color: 'transparent'
},
ticks: data.getDistinctValues(0),
viewWindow: data.getColumnRange(0)
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
type: 'line'
},
2: {
targetAxisIndex: 2,
type: 'bars',
dataOpacity: 0.5,
},
},
colors: [
'#febd02',
'#a5a5a5',
'#0284ff',
],
bar: {
groupWidth: '35'
},
legend: {
position: 'none'
},
},
});
chart.draw();
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart {
min-height: 160px;
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
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>
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>
I am not sure if this is going to make sense, or if this is every possible. I have a chart which the columns below
feis, dancers not placed, tooltip, dancers placed, tooltip, placement, tooltip.
so I have 4 columns not including tooltips.
But, I want 2 additional columns for the purpose of FILTERING ONLY. It should not be visible, or affect the chart in anyway.
I want to include a daterange and a columnfilter.
I tried just simply adding the columns and then hiding them with setview, but then the chart wouldn't draw.
here's my code without adding the additional columns
function comboChart(){
var data = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}],
['Garden State Feis - 01-05-2014', -18, 'Total Dancers Not Placed: 18', 22, 'Total Dancers Placed: 22', 20, 'Lace\'s Placement: 20th Place'],['GEM CITY FEIS - 02-14-2018', -42, 'Total Dancers Not Placed: 42', 38, 'Total Dancers Placed: 38', - 1, 'Lace\'s Placement: 1st place'],['Broesler Feis - 07-09-2018', -15, 'Total Dancers Not Placed: 15', 15, 'Total Dancers Placed: 15', 1, 'Lace\'s Placement: 1st place'],['GEM CITY FEIS - 08-21-2018', -21, 'Total Dancers Not Placed: 21', 26, 'Total Dancers Placed: 26', - 2, 'Lace\'s Placement: 2nd place'],['Garden State Feis - 12-01-2018', -48, 'Total Dancers Not Placed: 48', 12, 'Total Dancers Placed: 12', - 15, 'Lace\'s Placement: 15th Place'],
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'feis',
'ui': {
label: 'Filter by feis'
},
'matchType': 'any'
}
});
// Create a combo chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'combo_chart',
'options': {
tooltip: {isHtml: true},
legend:'none',
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#9ACB00', '#616161'],
hAxis: {
title: 'Feis Competiton and date'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -40, f: '40'},
{v: -20, f: '20'},
0,
20,
40
],
title: 'Placement'
},
width: '100%'
},
view: {
columns: ['feis', 'Dancers Not Placed', 'Dancers Placed', 'Placement']
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(searchfilter, barChart);
// Draw the dashboard.
dashboard.draw(data);
}
EDIT
Chart is still not drawing, I took out the date because I thought it might be the problem. When I remove date and recalled the chart draws, but doesn't draw when I add them in.
This is my updated code:
function majorChart(){
var data = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'recalled'],
['Garden State Feis - Jan-05-2014', -18, 'Total Dancers Not Placed: 18', 22, 'Total Dancers Placed: 22', 20, 'Lace\'s Placement: 20th Place', Yes],['Oireachtas MidAtlantic - Apr-01-2014', -14, 'Total Dancers Not Placed: 14', 30, 'Total Dancers Placed: 30', 14, 'Lace\'s Placement: 14th place', Yes],['GEM CITY FEIS - Feb-14-2018', -42, 'Total Dancers Not Placed: 42', 38, 'Total Dancers Placed: 38', - 1, 'Lace\'s Placement: 1st place', No],['Broesler Feis - Jul-09-2018', -15, 'Total Dancers Not Placed: 15', 15, 'Total Dancers Placed: 15', 1, 'Lace\'s Placement: 1st place', Yes],['GEM CITY FEIS - Aug-21-2018', -21, 'Total Dancers Not Placed: 21', 26, 'Total Dancers Placed: 26', - 2, 'Lace\'s Placement: 2nd place', No],['Garden State Feis - Dec-01-2018', -48, 'Total Dancers Not Placed: 48', 12, 'Total Dancers Placed: 12', - 15, 'Lace\'s Placement: 15th Place', No],
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('major_chart'));
// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_major',
'options': {
'filterColumnLabel': 'feis',
'ui': {
label: 'Filter by feis or year'
},
'matchType': 'any'
}
});
var colfilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'col_filter_major',
options: {
filterColumnLabel: 'recalled',
}
});
// Create a combo chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'major',
'options': {
tooltip: {isHtml: true},
legend:'none',
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#9ACB00', '#616161'],
hAxis: {
title: 'Feis Competiton and date'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -40, f: '40'},
{v: -30, f: '30'},
{v: -20, f: '20'},
{v: -10, f: '10'},
0,
10,
20,
30,
40
],
title: 'Placement'
},
width: '100%'
},
view: {
columns: [0, 1, 2, 3, 4, 5]
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(searchfilter, colfilter, barChart);
// Draw the dashboard.
dashboard.draw(data);
}
EDIT 2
Okay this is my updated code:
function majorChart(){
var data = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'date', 'recalled', {type: 'string', role: 'annotation'}],
['Halloween Feis - Oct-27-2018', -36, 'Total Dancers Not Placed: 36', 30, 'Total Dancers Placed: 30', 1, 'Rob placed 1st out of 66 total dancers', new Date(10-27-2018), 'Yes', '1st place'],['North Coast Feis - Feb-03-2019', -44, 'Total Dancers Not Placed: 44', 34, 'Total Dancers Placed: 34', 11, 'Rob placed 11th out of 78 total dancers', new Date(02-03-2019), 'No', '11th place'], ]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_major',
'options': {
'filterColumnLabel': 'feis',
'ui': {
label: 'Filter by feis'
},
'matchType': 'any'
}
});
var datefilter = new google.visualization.ControlWrapper({
controlType: 'DateRangeFilter',
containerId: 'date_filter_major',
options: {
filterColumnLabel: 'date',
}
});
var colfilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'recalled_filter_major',
options: {
filterColumnLabel: 'recalled',
'ui': {
label: 'Show Recalled'
}
}
});
// Create a combo chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'combo_chart',
'options': {
tooltip: {isHtml: true},
legend:'none',
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#9ACB00', '#616161'],
hAxis: {
title: 'Feis Competiton and date'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -40, f: '40'},
{v: -30, f: '30'},
{v: -20, f: '20'},
{v: -10, f: '10'},
0,
10,
20,
30,
40
],
title: 'Placement'
},
width: '100%'
},
view: {
columns: [0, 1, 2, 3, 4, 5, 6, 9]
}
});
dashboard.bind([searchfilter, datefilter, colfilter], barChart);
dashboard.draw(data);
}
The filters are appearing.. But the chart itself is not drawing. The date filter is also incorrect..
when using view on either a control or chart wrapper,
the columns and rows property should be indexes,
not labels...
instead of columns labels here...
columns: ['feis', 'Dancers Not Placed', 'Dancers Placed', 'Placement']
use the column indexes...
columns: [0, 1, 2, 3, 4, 5, 6]
then you can add additional columns to the data table, that the chart will ignore.
see following working snippet...
google.charts.load('current', {
packages: ['controls']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'date', 'column'],
['Garden State Feis - 01-05-2014', -18, 'Total Dancers Not Placed: 18', 22, 'Total Dancers Placed: 22', 20, 'Lace\'s Placement: 20th Place', new Date(2018, 11, 1), 'A'],
['GEM CITY FEIS - 02-14-2018', -42, 'Total Dancers Not Placed: 42', 38, 'Total Dancers Placed: 38', - 1, 'Lace\'s Placement: 1st place', new Date(2018, 11, 2), 'B'],
['Broesler Feis - 07-09-2018', -15, 'Total Dancers Not Placed: 15', 15, 'Total Dancers Placed: 15', 1, 'Lace\'s Placement: 1st place', new Date(2018, 11, 3), 'C'],
['GEM CITY FEIS - 08-21-2018', -21, 'Total Dancers Not Placed: 21', 26, 'Total Dancers Placed: 26', - 2, 'Lace\'s Placement: 2nd place', new Date(2018, 11, 4), 'D'],
['Garden State Feis - 12-01-2018', -48, 'Total Dancers Not Placed: 48', 12, 'Total Dancers Placed: 12', - 15, 'Lace\'s Placement: 15th Place', new Date(2018, 11, 5), 'E'],
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'feis',
'ui': {
label: 'Filter by feis'
},
'matchType': 'any'
}
});
var datefilter = new google.visualization.ControlWrapper({
controlType: 'DateRangeFilter',
containerId: 'date_filter',
options: {
filterColumnLabel: 'date',
}
});
var colfilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'col_filter',
options: {
filterColumnLabel: 'column',
}
});
// Create a combo chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'combo_chart',
'options': {
tooltip: {isHtml: true},
legend:'none',
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#9ACB00', '#616161'],
hAxis: {
title: 'Feis Competiton and date'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -40, f: '40'},
{v: -20, f: '20'},
0,
20,
40
],
title: 'Placement'
},
width: '100%'
},
view: {
columns: [0, 1, 2, 3, 4, 5, 6]
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind([searchfilter, datefilter, colfilter], barChart);
// Draw the dashboard.
dashboard.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="filter_div"></div>
<div id="date_filter"></div>
<div id="col_filter"></div>
<div id="combo_chart"></div>
</div>
UPDATE
there is a problem with your date constructor,
in the following, the date should enclosed in quotes as a string.
new Date(10-27-2018) // <-- bad
new Date('10-27-2018') // <-- good
without the quotes, the statement equates to...
new Date(-2035) // <-- 10 minus 27 minus 2018 = -2035
which is why it still works, but you get a bad date.
see following working snippet...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'date', 'recalled', {type: 'string', role: 'annotation'}],
['Halloween Feis - Oct-27-2018', -36, 'Total Dancers Not Placed: 36', 30, 'Total Dancers Placed: 30', 1, 'Rob placed 1st out of 66 total dancers', new Date('10-27-2018'), 'Yes', '1st place'],['North Coast Feis - Feb-03-2019', -44, 'Total Dancers Not Placed: 44', 34, 'Total Dancers Placed: 34', 11, 'Rob placed 11th out of 78 total dancers', new Date('02-03-2019'), 'No', '11th place'],
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_major',
'options': {
'filterColumnLabel': 'feis',
'ui': {
label: 'Filter by feis'
},
'matchType': 'any'
}
});
var datefilter = new google.visualization.ControlWrapper({
controlType: 'DateRangeFilter',
containerId: 'date_filter_major',
options: {
filterColumnLabel: 'date',
}
});
var colfilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'recalled_filter_major',
options: {
filterColumnLabel: 'recalled',
'ui': {
label: 'Show Recalled'
}
}
});
// Create a combo chart, passing some options
var barChart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'combo_chart',
options: {
tooltip: {isHtml: true},
legend:'none',
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#9ACB00', '#616161'],
hAxis: {
title: 'Feis Competiton and date'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -40, f: '40'},
{v: -30, f: '30'},
{v: -20, f: '20'},
{v: -10, f: '10'},
0,
10,
20,
30,
40
],
title: 'Placement'
},
width: '100%'
},
view: {
columns: [0, 1, 2, 3, 4, 5, 6, 9]
}
});
dashboard.bind([searchfilter, datefilter, colfilter], barChart);
dashboard.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="filter_major"></div>
<div id="date_filter_major"></div>
<div id="recalled_filter_major"></div>
<div id="combo_chart"></div>
</div>
Is it possible to hide null values on hAxis?
or better to set pointSize: 0 when the point is on the hAxis
if yes, which Option?
I tried a ComboChart
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
var options = {
width: 2500,
height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: { 3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
just a little confused, title says hide 0, but question says hide null...
but if you use null instead of 0, then the star will not appear...
['', 2, 4, null, null, null, null, null], // <-- star will NOT appear
['', 2, 4, 0, 0, 0, 0, 0], // <-- star will appear at the bottom
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var jsonData = [
['', 2, 4, null, null, null, null, null],
['', 2, 4, 0, 0, 0, 0, 0],
];
var options = {
//width: 2500,
//height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: {
3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = google.visualization.arrayToDataTable(jsonData, true);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
you can use a data view with calculated columns to change zero to null,
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var jsonData = [
['', 2, 4, null, null, null, null, null],
['', 2, 4, 0, 0, 0, 0, 0],
];
var options = {
//width: 2500,
//height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: {
3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = google.visualization.arrayToDataTable(jsonData, true);
// build view
var view = new google.visualization.DataView(data);
var viewColumns = [];
$.each(new Array(data.getNumberOfColumns()), function (col) {
viewColumns.push({
calc: function (dt, row) {
var value = dt.getValue(row, col);
if (value === 0) {
value = null;
}
return value;
},
label: data.getColumnLabel(col),
type: data.getColumnType(col)
});
});
view.setColumns(viewColumns);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
// draw view
chart.draw(view, options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>