Develop Reference

How can I render a ColumnChart slider

I'm here because I'm in struggle with some sliders for my dataviz app.
I already did a chart with a slider and it work fine, but now I want to do the same with ColumnChart instead of LineChart... :
Here is the working code :
width={"100%"}
chartType="LineChart"
loader={<div>Loading Chart</div>}
data={[
["Date", "Value"],
[new Date(2000, 11, 26), 13],
[new Date(2000, 11, 27), 50],
[new Date(2000, 11, 28), 32],
//there is very much lines here but for simplicity i removed them
]}
options={{
// Use the same chart area width as the control for axis alignment.
interpolateNulls: false,
chartArea: { height: "80%", width: "90%" },
hAxis: { slantedText: false },
vAxis: { viewWindow: { min: 0, max: 55 } },
legend: { position: "none" },
colors: ['#f6c7b6']
}}
rootProps={{ "data-testid": "0" }}
chartPackages={["corechart", "controls"]}
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "LineChart",
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
colors: ['green'],
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 1, 1),
end: new Date(2000, 4, 6),
},
},
},
},
]}
/>
Here is the result : Here is the result
Now I want the same data but with ColumnChart,
I did that :
<Chart
width={"100%"}
chartType="ColumnChart"
loader={<div>Loading Chart</div>}
data={[
["Date", "Value"],
[new Date(2000, 11, 11), 32],
[new Date(2000, 11, 12), 5],
[new Date(2000, 11, 13), 46],
[new Date(2000, 11, 14), 31],
[new Date(2000, 11, 15), 17],
[new Date(2000, 11, 16), 17],
[new Date(2000, 11, 17), 6],
[new Date(2000, 11, 18), 43],
[new Date(2000, 11, 19), 11],
[new Date(2000, 11, 20), 44],
[new Date(2000, 11, 21), 44],
[new Date(2000, 11, 22), 37],
[new Date(2000, 11, 23), 43],
[new Date(2000, 11, 24), 26],
[new Date(2000, 11, 25), 13],
[new Date(2000, 11, 26), 50],
[new Date(2000, 11, 27), 32],
[new Date(2000, 11, 28), 25],
]}
options={{
// Use the same chart area width as the control for axis alignment.
interpolateNulls: false,
chartArea: { height: "80%", width: "90%" },
hAxis: { slantedText: false },
// vAxis: { viewWindow: { min: 0, max: 55 } },
legend: { position: "none" },
is3D: true,
colors: ['orange'],
}}
rootProps={{ "data-testid": "1" }}
chartPackages={["corechart", "controls"]}
/*
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "ColumnChart",
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 11, 1),
end: new Date(2000, 11, 6),
},
},
},
},
]}
*/
/>
And the result
But when I uncomment the code of time slider, i have a weird result :
weirdResult
What I missing ? how can i have the same kind of slider with ColumnChart ?
Thanks for any helps !
I'm working with React and React google Chart which is a wrapper for Google Chart

as noted in the reference for the ChartRangeFilter,
ColumnChart is not a valid chart type (see option --> ui.chartType)
try using ComboChart instead,
and set the seriesType chart option to bars
see following snippet...
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "ComboChart", // <-- use ComboChart
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
seriesType: "bars", // <-- set series type
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 11, 1),
end: new Date(2000, 11, 6),
},
},
},
},
]}

How can I set the google ChartRangeFilter to hour?

The example for ChartRangeFilter is showing only years, I would like to set it up to hours, for example: starting from midnight to 23:59:59 pm.
range :
00:00:00
01:00:00
02:00:00
03:00:00
04:00:00
...
23:00:00
here is the example code on jsfiddle from Alex https://jsfiddle.net/alex4uthis/ZmVcZ/128/
code :
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRow([new Date(2014, 0, 1), 1,123]);
data.addRow([new Date(2014, 1, 1), 6,42 ]);
data.addRow([new Date(2014, 2, 1), 4,49 ]);
data.addRow([new Date(2014, 3, 1), 23,486 ]);
data.addRow([new Date(2014, 4, 1), 89,476 ]);
data.addRow([new Date(2014, 5, 1), 46,444 ]);
data.addRow([new Date(2014, 6, 1), 178,442 ]);
data.addRow([new Date(2014, 7, 1), 12,274 ]);
data.addRow([new Date(2014, 8, 1), 123,4934 ]);
data.addRow([new Date(2014, 9, 1), 144,4145 ]);
data.addRow([new Date(2014, 10, 1), 135,946 ]);
data.addRow([new Date(2014, 11, 1), 178,747 ]);
data.addRow([new Date(2015, 0, 1), 31,1253]);
data.addRow([new Date(2015, 1, 1), 24,4532 ]);
data.addRow([new Date(2015, 2, 1), 234,349 ]);
data.addRow([new Date(2015, 3, 1), 2009,3486 ]);
data.addRow([new Date(2015, 4, 1), 589,4756 ]);
data.addRow([new Date(2015, 5, 1), 946,4744 ]);
data.addRow([new Date(2015, 6, 1), 878,4542 ]);
data.addRow([new Date(2015, 7, 1), 1562,9874 ]);
data.addRow([new Date(2015, 8, 1), 4123,934 ]);
data.addRow([new Date(2015, 9, 1), 7144,145 ]);
data.addRow([new Date(2015, 10, 1), 8135,46 ]);
data.addRow([new Date(2015, 11, 1), 9178,47 ]);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 600,
chartArea: {
width: '80%'
}
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: 620,
chartArea: {
width: '80%'
},
hAxis: {
format: 'MMM',
slantedText: false,
maxAlternation: 1
}
}
});
function setOptions() {
var firstDate;
var lastDate;
var v = control.getState();
if (v.range) {
document.getElementById('dbgchart').innerHTML = v.range.start + ' to ' + v.range.end;
firstDate = new Date(v.range.start.getTime() + 1);
lastDate = new Date(v.range.end.getTime() - 1);
data.setValue(v.range.start.getMonth(), 0, firstDate);
data.setValue(v.range.end.getMonth(), 0, lastDate);
} else {
firstDate = data.getValue(0, 0);
lastDate = data.getValue(data.getNumberOfRows() - 1, 0);
}
var ticks = [];
for (var i = firstDate.getMonth(); i <= lastDate.getMonth(); i++) {
ticks.push(data.getValue(i, 0));
}
chart.setOption('hAxis.ticks', ticks);
chart.setOption('hAxis.viewWindow.min', firstDate);
chart.setOption('hAxis.viewWindow.max', lastDate);
if (dash) {
chart.draw();
}
}
setOptions();
google.visualization.events.addListener(control, 'statechange', setOptions);
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
dash.bind([control], [chart]);
dash.draw(data);
}
</script>
<div id="dashboard">
<div id="chart_div"></div>
<div id="control_div"></div>
<p><span id='dbgchart'></span></p>
</div>
How to set the range to show only hours?, please help

Multi-colored line chart with google visualization

I'm using google line chart in my project and facing a problem that I need to change color for some segments to visualize the target status changes over time. It should look like this:
I've searched around for quite long but couldn't find a way to do that with google chart.
My workaround is to add another series to the chart and alternately set the value of the second line eq to the first line based on the status but it looks tedious.
Is there a proper way to do this? Here is a sample of my workaround solution:
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 200, 0],
[new Date(2013, 4, 02), 500, 0],
[new Date(2013, 5, 03), 700, 0],
[new Date(2013, 6, 04), 800, 800],
[new Date(2013, 7, 05), 500, 500],
[new Date(2013, 8, 06), 900, 0],
[new Date(2014, 0, 07), 800, 0],
[new Date(2014, 1, 08), 1100, 1100],
[new Date(2014, 2, 09), 1000, 1000],
[new Date(2014, 2, 10), 1000, 0],
[new Date(2014, 3, 11), 800, 0],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip: {
isHtml: true
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8', '#00dddd'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 50,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {
packages: ['corechart'],
callback: drawMultipleTrendlineChart
});
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
</html>

After looking at this answer How to change color for negative values, I tried and this works for me. The answer is using DataView API to manipulate the data.
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
}
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// variance
{
calc: function(data, row) {
return data.getValue(row, 1);
},
type: 'number',
label: 'Y'
},
// variance color
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val >= 0) {
return '#0000FF';
}
return '#FF0000';
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google charts text padding and hide axis lines

I have a problem with google charts.
How to make padding between horizontal axil line and labels. And align them differently (first to right, last - to left) - so, they will be inside chart area
How can i remove vertical axis at the end of the chart and leave only zero axis.
code:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(this.drawBasic);
function drawBasic () {
let data1 = new google.visualization.DataTable();
data1.addColumn('date', 'Date');
data1.addColumn('number', 'K/D');
data1.addRows([
[new Date(2016, 11, 11), 0], [new Date(2016, 11, 12), 10], [new Date(2016, 11, 13), 43], [new Date(2016, 11, 14), 20], [new Date(2016, 11, 15), 56],]);
let options1 = {
height: 125,
chartArea: {
left: 30,
top: 10,
right: 30,
bottom: 20
},
legend: {position: 'none'},
colors: ['#3ec8de'],
tooltip: {trigger: 'none'},
backgroundColor: 'transparent',
hAxis: {
format: 'dd.M',
gridlines: {
color: '#333',
},
ticks: [new Date(2016, 11, 11), new Date(2016, 11, 15)]
},
vAxis: {
gridlines: {
count: 3,
color: 'transparent',
}
},
crosshair: {trigger: 'both', orientation: 'vertical', color: '#b5b5b5'}
};
let chart1 = new google.visualization.LineChart(document.getElementById('overtime-chart1'));
chart1.draw(data1, options1);
}
Here the picture.
And this is link to codepen with code

How to make the data studs always appear on a classic Google Line Chart

I have to use classic Google Line Chart because the Material version doesn't support the curved lines yet, but I like curves. Unfortunately though it seems that only Material chart displays the datum stems (I'm not sure if I describe that properly, but I mean those dots which represent the data points on the line), and only when you hover over a line (anywhere along the line).
Here is a screenshot, to the left is a Google Material Chart and I'm hovering over the line, to the right is a chartjs chart, shows the studs even without hovering over anything.
Google Line Chart JSFiddle where you can see how the Material and the Classic Google Charts behave: https://jsfiddle.net/csabatoth/yyhLwkaf/
var classicOptions = {
title: 'Foo',
width: 900,
height: 500,
theme: 'material',
curveType: 'function'
// TODO
};
When in Material mode, you have to hover over a line to cause the data studs to appear. Classic charts is even worse in this respect: you have to "follow" the line until you hit a data point, and that's when it is only revealed.
What I desire is something like that (see the first visible line chart):
http://www.chartjs.org/docs/#line-chart-introduction
The data studs are visible regardless you hover over the line or not. I cannot seem to find out which is the proper option for that.

I think you are looking for pointSize
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addRows([
[new Date(2014, 0), -.5, 5.7],
[new Date(2014, 1), .4, 8.7],
[new Date(2014, 2), .5, 12],
[new Date(2014, 3), 2.9, 15.3],
[new Date(2014, 4), 6.3, 18.6],
[new Date(2014, 5), 9, 20.9],
[new Date(2014, 6), 10.6, 19.8],
[new Date(2014, 7), 10.3, 16.6],
[new Date(2014, 8), 7.4, 13.3],
[new Date(2014, 9), 4.4, 9.9],
[new Date(2014, 10), 1.1, 6.6],
[new Date(2014, 11), -.2, 4.5]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
}
}
};
var classicOptions = {
curveType: 'function',
pointSize: 10,
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
hAxis: {
ticks: [
new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(view, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(view, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawClassicChart();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="change-chart">Change to Material</button>
<br><br>
<div id="chart_div"></div>