Creating Google Line Charts with horizontal bands [duplicate] - google-visualization

I'm looking to draw a fairly simple google LineChart, but I'd like to have horizontal coloured bands across the chart area, to indicate low/middle/high values.
Looking at the chart API, it does not appear to be possibly directly, as chartArea.backgroundColor appears to be the only value I can set.
Being aware that this appears to be a limitation of the charts, is it possible to recreate this any other way, through any other methods or javascript wizardry?
Below is an example of what sort of effect I'm looking to produce.
Thanks in advance.

using a ComboChart
with seriesType: 'area'
and isStacked: true
you can define as many ranges as needed
visibleInLegend: false hides the area series from the legend
then you can set a custom type: for the series you want to track,
such as 'line', in the following working snippet...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'Time', type: 'number'},
{label: 'Low', type: 'number'},
{label: 'Avg', type: 'number'},
{label: 'High', type: 'number'},
{label: 'Dogs', type: 'number'}
],
rows: [
{c:[{v: 0}, {v: 25}, {v: 50}, {v: 25}, {v: 0}]},
{c:[{v: 5}, {v: 25}, {v: 50}, {v: 25}, {v: 24}]},
{c:[{v: 10}, {v: 25}, {v: 50}, {v: 25}, {v: 20}]},
{c:[{v: 15}, {v: 25}, {v: 50}, {v: 25}, {v: 48}]},
{c:[{v: 20}, {v: 25}, {v: 50}, {v: 25}, {v: 53}]},
{c:[{v: 25}, {v: 25}, {v: 50}, {v: 25}, {v: 61}]},
{c:[{v: 30}, {v: 25}, {v: 50}, {v: 25}, {v: 63}]},
{c:[{v: 40}, {v: 25}, {v: 50}, {v: 25}, {v: 66}]},
{c:[{v: 45}, {v: 25}, {v: 50}, {v: 25}, {v: 70}]},
{c:[{v: 50}, {v: 25}, {v: 50}, {v: 25}, {v: 75}]},
{c:[{v: 55}, {v: 25}, {v: 50}, {v: 25}, {v: 78}]},
{c:[{v: 60}, {v: 25}, {v: 50}, {v: 25}, {v: 80}]},
{c:[{v: 65}, {v: 25}, {v: 50}, {v: 25}, {v: 85}]},
{c:[{v: 70}, {v: 25}, {v: 50}, {v: 25}, {v: 90}]}
]
});
var options = {
chartArea: {
width: '60%'
},
hAxis: {
ticks: [0, 15, 30, 45, 60],
title: 'Time'
},
isStacked: true,
series: {
// low
0: {
areaOpacity: 0.6,
color: '#FFF59D',
visibleInLegend: false
},
// avg
1: {
areaOpacity: 0.6,
color: '#A5D6A7',
visibleInLegend: false
},
// high
2: {
areaOpacity: 0.6,
color: '#EF9A9A',
visibleInLegend: false
},
// dogs
3: {
color: '#01579B',
type: 'line'
}
},
seriesType: 'area',
title: 'Example',
vAxis: {
ticks: [0, 25, 50, 75, 100],
title: 'Popularity'
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related

Always show lines or bars shadows in google charts

Is there any way to always show shadows on line or bar google chart?.
I've tried searching solutions with css, svg, rect and g but no luck.
basically, line shadow should be same as they are shown when hovered over legend.
Thanks,
Ivan
there are no configuration options or settings, specifically for a shadow
but using a style column role, it is possible to add a semi-transparent border
see following working snippet,
a data view is used to apply a style to every other row
(so you can see the difference from the normal style)
google.charts.load('current', {
packages: ['controls', 'corechart', 'table']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'y0');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
var columnStyle = '';
if (row % 2 === 0) {
columnStyle = 'fill-color: #f44336; stroke-color: #d50000; stroke-opacity: 0.35; stroke-width: 5;';
}
return columnStyle;
},
role: 'style',
type: 'string'
}]);
var container = document.getElementById('chart-column');
var chartColumn = new google.visualization.ColumnChart(container);
var options = {
chartArea: {
bottom: 24,
left: 36,
right: 16,
top: 24,
width: '100%',
height: '100%'
},
colors: ['#f44336'],
height: '100%',
legend: {
position: 'none'
},
width: '100%'
};
window.addEventListener('resize', function () {
chartColumn.draw(view, options);
});
chartColumn.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-column"></div>

How can I set the number of hAxis text in google chart?

I am drawing the line chart which has date type hAxis.
drawing small chart which has many rows(data) make hAxis texts to '...'. I can not explicitly display hAxis text now.
How can I solve this problem?
when there are many data the text becomes slanted
reduce chartArea.height to provide enough room to display the labels
chartArea.left may need to be adjusted as well, to fully display the first label
see following working snippet...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable({
cols: [
{id: 'Date', type: 'date'},
{id: 'A', type: 'number'},
{id: 'B', type: 'number'},
{id: 'C', type: 'number'},
{id: 'D', type: 'number'}
],
rows: [
{c:[{v: new Date(2016, 0, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 0}]},
{c:[{v: new Date(2016, 1, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 24}]},
{c:[{v: new Date(2016, 2, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 20}]},
{c:[{v: new Date(2016, 3, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 48}]},
{c:[{v: new Date(2016, 4, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 53}]},
{c:[{v: new Date(2016, 5, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 61}]},
{c:[{v: new Date(2016, 6, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 63}]},
{c:[{v: new Date(2016, 7, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 66}]},
{c:[{v: new Date(2016, 8, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 70}]},
{c:[{v: new Date(2016, 9, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 75}]},
{c:[{v: new Date(2016, 10, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 78}]},
{c:[{v: new Date(2016, 11, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 80}]},
{c:[{v: new Date(2017, 0, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 85}]},
{c:[{v: new Date(2017, 1, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 90}]}
]
});
var options = {
chartArea: {
left: 52,
height: '50%'
},
hAxis: {
format: 'MMM dd, yyyy'
},
height: 200,
legend: 'none',
title: 'Example',
width: 240
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Setting Time as range value instead of date in google charts

Trying to work with Google charts and ended up with a range slider thru few code snippets provided by developer docs.
<https://jsfiddle.net/hari41980/gsvr18hw/11/>
Now I need someone to help me on getting the date range from date to TIME.
Expected:expected output
Regards
just need to set the desired format in the options for the slider...
'ui': {
'format': {
'pattern': 'h:mm a'
},
'labelStacking': 'vertical'
}
see following example...
google.charts.load('current', {
callback: function () {
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Time Stamp',
'ui': {
'format': {
'pattern': 'h:mm a'
},
'labelStacking': 'vertical'
}
}
});
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'AreaChart',
'containerId': 'programmatic_chart_div',
'options': {
'width': 600,
'height': 300,
'legend': 'none',
}
});
var data = google.visualization.arrayToDataTable([
['Time Stamp', 'Bulk'],
[new Date(2014, 9, 15, 10, 30) , 5],
[new Date(2014, 9, 15, 11, 30) , 10],
[new Date(2014, 9, 15, 12, 30) , 15],
[new Date(2014, 9, 15, 13, 30) , 5],
[new Date(2014, 9, 15, 14, 30) , 10],
[new Date(2014, 9, 15, 15, 30) , 8],
[new Date(2014, 9, 15, 16, 30) , 12],
[new Date(2014, 9, 15, 17, 30) , 15],
[new Date(2014, 9, 15, 18, 30) , 25]
]);
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
},
packages: ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="programmatic_control_div"></div>
<div id="programmatic_chart_div"></div>

Google Chart hAxis Title

options: {"title":"Overall Stats","height":230,"legend":{"position":"in"},"hAxis":{"title":"Division"}},
I have this as my options for my google column chart but this displays "Division" on both my vertical and horizontal axis and removes all the labels on the hAxis. Can anyone tell me why this is happening?
is there more you can share?
seems to work fine here...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data,
options: {"title":"Overall Stats","height":230,"legend":{"position":"in"},"hAxis":{"title":"Division"}}
}).draw();
},
packages: ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How to make a custom tooltip for each series in Google Line Chart

I am currently testing google charts and having difficulty in specifying my own custom tooltips.
my data is declared as below
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([0, 0, 0, 'hello'], [1, 10, 5, 'hello'],
[2, 23, 15, 'hello'],[3, 17, 9, 'hello'], [4, 18, 10, 'hello'],
[5, 9, 5, 'hello'],
see this jsFiddle http://jsfiddle.net/SecretSquirrel/rbwyhx1q/
It appears the custom tooltip is only affecting the first data column?
I thought it was pretty limited to only allow 1 tooltip per row, but if this is only 1 tooltip for the first column this is really quite useless.
Well you have to add another tooltip column for your second graft.
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([
[0, 0,'custom', 0, 'hello'], [1, 10,'custom', 5, 'hello'], [2, 23,'custom', 15, 'hello'],
[3, 17,'custom', 9, 'hello'], [4, 18,'custom', 10, 'hello'], [5, 9,'custom', 5, 'hello'],
[6, 11,'custom', 3, 'hello'], [7, 27,'custom', 19, 'hello'], [8, 33,'custom', 25, 'hello'],
[9, 40,'custom', 32, 'hello'], [10, 32,'custom', 24, 'hello'], [11, 35,'custom', 27, 'hello'],
[12, 30,'custom', 22, 'hello'], [13, 40,'custom', 32, 'hello'], [14, 42,'custom', 34, 'hello'],
[15, 47,'custom', 39,'hello'], [16, 44,'custom', 36,'hello'], [17, 48,'custom', 40, 'hello'],
[18, 52,'custom', 44,'hello'], [19, 54,'custom', 46,'hello'], [20, 42,'custom', 34, 'hello'],
[21, 55,'custom', 47,'hello'], [22, 56,'custom', 48,'hello'], [23, 57,'custom', 49,'hello']
]);
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('ex2'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="ex2"></div>