Thanks to White Hat in this post ,I was able to make a custom annotation for the area chart. Somehow it doesn't work the stepped area chart.
The chart draws at first everything correctly but then sets the annotation in the stepped area chart back. With help of the MutationObserver, the settings should be overridden when the chart is drawn but this applies just for the area chart.
How can I solve this ?
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'green');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'red');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
annotations: {
stem: {
length: 10
}
},
title: 'Playground',
colors: ['#007f01', '#fe0002'],
interpolateNulls: true,
hAxis: {
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
direction: 1
},
orientation: 'horizontal',
// customize colum
series: {
0: {type: "steppedArea"},
1: {type: "area"},
},
// legend: {position : 'left'},
animation: {
startup: true,
duration: 1000,
easing: 'out',
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
var observer = new MutationObserver(moveAnnotations);
observer.observe(container, {
childList: true,
subtree: true
});
function moveAnnotations() {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = container.getElementsByTagName('text');
var labelSize = 0;
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
if (options.colors.indexOf(label.getAttribute('fill')) > -1) {
labelSize = (parseFloat(label.getAttribute('font-size')) / 2);
label.setAttribute('y', chartBounds.top + labelSize);
}
}
});
var stems = container.getElementsByTagName('rect');
Array.prototype.forEach.call(stems, function(stem) {
if ((parseInt(stem.getAttribute('height')) === options.annotations.stem.length) && (stem.getAttribute('fill') === '#999999')) {
var height = parseFloat(stem.getAttribute('y')) - chartBounds.top;
stem.setAttribute('height', height);
stem.setAttribute('y', chartBounds.top + labelSize);
}
});
}
chart.draw(view.toDataTable(), options);
});
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
the default annotation settings for stepped area charts differ from normal area charts
for stepped, the annotations appear inside the area, which changes the color to white,
which is not a color used to find the labels and move them
an easy fix is to specify that the annotation always be outside the area...
annotations: {
alwaysOutside: true,
...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'green');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'red');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
annotations: {
alwaysOutside: true,
stem: {
length: 10
}
},
title: 'Playground',
colors: ['#007f01', '#fe0002'],
interpolateNulls: true,
hAxis: {
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
direction: 1
},
orientation: 'horizontal',
// customize colum
series: {
0: {type: "steppedArea"},
1: {type: "area"},
},
// legend: {position : 'left'},
animation: {
startup: true,
duration: 1000,
easing: 'out',
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
var observer = new MutationObserver(moveAnnotations);
observer.observe(container, {
childList: true,
subtree: true
});
function moveAnnotations() {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = container.getElementsByTagName('text');
var labelSize = 0;
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
if (options.colors.indexOf(label.getAttribute('fill')) > -1) {
labelSize = (parseFloat(label.getAttribute('font-size')) / 2);
label.setAttribute('y', chartBounds.top + labelSize);
}
}
});
var stems = container.getElementsByTagName('rect');
Array.prototype.forEach.call(stems, function(stem) {
if ((parseInt(stem.getAttribute('height')) === options.annotations.stem.length) && (stem.getAttribute('fill') === '#999999')) {
var height = parseFloat(stem.getAttribute('y')) - chartBounds.top;
stem.setAttribute('height', height);
stem.setAttribute('y', chartBounds.top + labelSize);
}
});
}
chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
How I can make vertical lines on a scatter google chart?
I need to put the red line vertically:
here is my current code:
//making array with data
var dataArray = [];
dataArray.push(["", "", { role: 'annotation' }, "", ""]);
projects.forEach(function(item, index){
dataArray.push([parseFloat(item["bottomData"]), parseFloat((item["leftData"])), index+1, 10, 15]);
});
var data = google.visualization.arrayToDataTable(dataArray);
//define ticks
var rangeX = data.getColumnRange(0);
var ticksX = [];
for (var i = (Math.floor(rangeX.min / 5) * 5); i <= (Math.ceil(rangeX.max / 5) * 5); i = i + 5) {
ticksX.push(i);
}
var rangeY = data.getColumnRange(1);
var ticksY = [];
for (var i =(Math.floor(rangeY.min/5) * 5); i <= Math.ceil(rangeY.max/5) * 5; i=i+5) {
ticksY.push(i);
}
//define options
var options = {
series: {
1: {
lineWidth: 2,
pointSize: 0,
color: 'green'
},
2: {
lineWidth: 2,
pointSize: 0,
color: 'red'
},
},
colors:['002060'],
vAxis: {
ticks: ticksY,
},
hAxis: {
ticks: ticksX,
},
};
//print chart
var chart = new google.visualization.ScatterChart(document.getElementById("chartDiv"));
chart.draw(data, options);
I also tried using multiple axes putting some with direction=-1 or orientation=vertical but it doesn't work
in order to mix line series with scatter,
you will need to use a ComboChart
and to get vertical lines,
you will need to add multiple rows with the same x axis value,
with values for the min and max y axis values.
in the options, set the seriesType to 'scatter'
and change the series type to 'line'
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', {role: 'annotation', type: 'number'}],
[26, 1, 1],
[33, 5, 2],
[36, 1, 3],
[38, 6, 4],
[58, 1, 5]
]);
var ticksX = [25, 30, 35, 40, 45, 50, 55, 60];
var ticksY = [0, 5, 10, 15, 20, 25];
data.addColumn('number', 'y1');
data.addColumn('number', 'y2');
//red line (vertical)
ticksY.forEach(function (value) {
data.addRow([40, null, null, null, value]);
});
//green line (horizontal)
ticksX.forEach(function (value) {
data.addRow([value, null, null, 10, null]);
});
data.sort([{column: 0}]);
var options = {
interpolateNulls: true,
seriesType: 'scatter',
series: {
1: {
color: 'green',
type: 'line'
},
2: {
color: 'red',
type: 'line'
},
},
colors:['002060'],
vAxis: {
ticks: ticksY
},
hAxis: {
ticks: ticksX
},
};
var chart = new google.visualization.ComboChart(document.getElementById("chartDiv"));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartDiv"></div>
I am trying to apply animation on google chart on first load, its working with normal bar chart but when I am making it stacked, Animation not working. Please help me out
Tried almost every option from documentation but nothing is helping out.
there is no error in console.
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Months', 'EL', 'CL'],
['Jan', 2, 4],
['Feb', 1, 4],
['Mar', 6, 1],
['Apr', 3, 5],
['May', 1, 4],
['Jun', 3, 4],
['Jul', 2, 5],
['Aug', 2, 4],
['Sep', 1, 4],
['Oct', 6, 1],
['Dec', 1, 4]
]);
var options = {
chart: {
title: 'Leave Info',
subtitle: 'Total EL and CL consumed in a year',
},
bars: 'vertical',
height: 300,
width: 500,
animation:{
startup: 'true',
duration: 1000,
easing: 'out'
},
bar: {groupWidth: "40%"},
isStacked: true,
series: {
0: { color: 'red' },
1: { color: '#999' }
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
With the great help by White-hat from comments above, I am able to get this result, Thought of posting it here if anyone else need the help
google.charts.load('current', {
callback: function() {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Months', 'EL', 'CL'],
['Jan', 2, 4],
['Feb', 1, 4],
['Mar', 6, 1],
['Apr', 3, 5],
['May', 1, 4],
['Jun', 3, 4],
['Jul', 2, 5],
['Aug', 2, 4],
['Sep', 1, 4],
['Oct', 6, 1],
['Dec', 1, 4]
]);
var options = {
animation: {
duration: 1000,
easing: 'linear',
startup: true
},
isStacked: true,
height: 600,
theme: 'material',
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have difficulties in getting the vertical axis on the right side, I read this post but it was 5 years ago and didn't work out for the vertical graph orientation. I was also not able to display vertical axis on the left and right side of the chart.
I hope there is a better way than making a dummy column ....
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'y1');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'y2');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
title: 'playground',
colors: ['#FA7F01', '#AEAAA2'],
interpolateNulls: true,
hAxis: {
title: 'x',
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
title: 'y',
direction: 1
},
orientation: 'vertical',
annotations: {
alwaysOutside: true,
stem: {
color: '#ff00ff',
length: 10
},
},
// customize colum
series: {
0: {type: "steppedArea"},
1: {type: "steppedArea"},
},
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
chart.draw(view.toDataTable(), options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<div id="visualization"></div>
</body>
</html>
normally, you could use targetAxisIndex to move the axis to the right side,
but this doesn't appear to work with --> orientation: 'vertical'
although not ideal, you could manually move the axis on the chart's 'ready' event...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'y1');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'y2');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
title: 'playground',
colors: ['#FA7F01', '#AEAAA2'],
interpolateNulls: true,
hAxis: {
title: 'x',
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
title: 'y',
direction: 1
},
orientation: 'vertical',
annotations: {
alwaysOutside: true,
stem: {
color: '#ff00ff',
length: 10
},
},
// customize colum
series: {
0: {type: "steppedArea"},
1: {type: "steppedArea"},
},
legend: {
alignment: 'end',
position: 'top'
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', moveAxis);
function moveAxis() {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labelGap;
var labelIndex = -1;
var labelWidth;
var xCoord;
var yTitle;
// move axis labels
var labels = container.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
labelWidth = 0;
if (label.getAttribute('text-anchor') === 'end') {
labelIndex++;
labelWidth = chartLayout.getBoundingBox('vAxis#0#label#' + labelIndex).width;
labelGap = chartBounds.left - parseFloat(label.getAttribute('x'));
xCoord = chartBounds.left + chartBounds.width + labelWidth + labelGap;
label.setAttribute('x', xCoord);
} else if ((label.getAttribute('text-anchor') === 'middle') && (label.hasAttribute('transform'))) {
yTitle = label;
}
});
yTitle.setAttribute('y', xCoord + 92);
// swap axis baselines
var lines = container.getElementsByTagName('rect');
Array.prototype.forEach.call(lines, function(line) {
if ((parseFloat(line.getAttribute('x')) === (chartBounds.left + chartBounds.width - 1)) && (parseFloat(line.getAttribute('width')) === 1)) {
line.setAttribute('x', chartBounds.left);
} else if ((parseInt(line.getAttribute('x')) === chartBounds.left) && (parseInt(line.getAttribute('width')) === 1) && (line.getAttribute('fill') === '#333333')) {
line.setAttribute('x', chartBounds.left + chartBounds.width - 1);
}
});
}
chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Try adding this to your options:
series: {
0: { targetAxisIndex: 1, },
1: { targetAxisIndex: 1, },
}
What this means is that both your series should use the right-side axis.
I'm a bit new with google charts, I was playing around to learn it but I got two problems with my chart:
1) I'm not sure why the second chart (red) displays without animation
2) How can I extend the annotation lines with the values to the top of my graph?
The best case would be that the values are shown under the chart title
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'green');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'red');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
title: 'Playground',
colors: ['#007F01', '#FE0002'],
interpolateNulls: true,
hAxis: {
title: 'Price',
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
direction: 1
},
orientation: 'horizontal',
// customize colum
series: {
0: {type: "area"},
1: {type: "area"},
},
// legend: {position : 'left'},
animation: {
startup: true,
duration: 1000,
easing: 'out',
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
Here you can run it:
jsfiddle
there is bug within google charts when working with data views and animation.
an easy fix is to convert the view back to a data table when drawing the chart...
view.toDataTable()
e.g.
chart.draw(view.toDataTable(), options);
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'green');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'red');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
title: 'Playground',
colors: ['#007F01', '#FE0002'],
interpolateNulls: true,
hAxis: {
title: 'Price',
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
direction: 1
},
orientation: 'horizontal',
// customize colum
series: {
0: {type: "area"},
1: {type: "area"},
},
// legend: {position : 'left'},
animation: {
startup: true,
duration: 1000,
easing: 'out',
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
UPDATE
as for extending the annotation lines,
you can change the length,
but this will just increase the size of each,
and they still will not be aligned at the top
annotations: {
stem: {
length: 10
}
},
the only way would be to modify the chart manually, after it draws
you can move the labels and increase the height of the lines
but this will create two issues
1) the chart will move them back, anytime there is interactivity, such as hovering the labels or data points
to fix, you can use a MutationObserver
this will override the settings, every time the chart tries to move them back
2) if you use chart method getImageURI to get an image of the chart, the changes will not appear
to fix this, use html2canvas to get the image instead of the chart method
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'x');
data1.addColumn('number', 'green');
data1.addRows([
[0.005, 3],
[0.006, 6],
[0.007, 5],
[0.008, 8],
[0.009, 2],
[0.010, 5],
[0.011, 5],
[0.012, 4],
[0.013, 8]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'x');
data2.addColumn('number', 'red');
data2.addRows([
[0.016, 5],
[0.017, 1],
[0.018, 3],
[0.019, 9],
[0.020, 4],
[0.021, 5],
[0.022, 7],
[0.023, 7],
[0.024, 3]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full',
[[0, 0]], [1], [1]);
var options = {
annotations: {
stem: {
length: 10
}
},
title: 'Playground',
colors: ['#007f01', '#fe0002'],
interpolateNulls: true,
hAxis: {
title: 'Price',
titleTextStyle: {
color: '#333'
},
direction: 1,
format: 'decimal'
},
vAxis: {
direction: 1
},
orientation: 'horizontal',
// customize colum
series: {
0: {type: "area"},
1: {type: "area"},
},
// legend: {position : 'left'},
animation: {
startup: true,
duration: 1000,
easing: 'out',
}
};
var view = new google.visualization.DataView(joinedData);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
var observer = new MutationObserver(moveAnnotations);
observer.observe(container, {
childList: true,
subtree: true
});
function moveAnnotations() {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = container.getElementsByTagName('text');
var labelSize = 0;
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
if (options.colors.indexOf(label.getAttribute('fill')) > -1) {
labelSize = (parseFloat(label.getAttribute('font-size')) / 2);
label.setAttribute('y', chartBounds.top + labelSize);
}
}
});
var stems = container.getElementsByTagName('rect');
Array.prototype.forEach.call(stems, function(stem) {
if ((parseInt(stem.getAttribute('height')) === options.annotations.stem.length) && (stem.getAttribute('fill') === '#999999')) {
var height = parseFloat(stem.getAttribute('y')) - chartBounds.top;
stem.setAttribute('height', height);
stem.setAttribute('y', chartBounds.top + labelSize);
}
});
}
chart.draw(view.toDataTable(), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
notes:
1) the move function (moveAnnotations) uses colors from the options in order to identify the annotation labels from the rest of the chart labels
the chart changes all colors to lowercase, so had to change colors in options to lowercase
2) move function also uses option annotations.stem.length to identify the annotation lines
How do i display the vertical number in a column bar??
This a simple Google Column Chart, how do i display the numbers in the column bars on top???
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period Incident');
data.addColumn('number', '# of Incidents');
data.addRows([
['Mushrooms', 3],
['Onions', 4],
['Olives', 5],
['Zucchini', 11],
['Pepper', 7],
['Avocado', 4],
['Tomato', 5],
['Pepperoni', 2]
]);
// Set chart options
var options = {
'title':'How Much Pizza I Ate Last Night',
legend: { position: 'top', alignment: 'start' },
'width':570,
'height':420};
var chart = new google.visualization.ColumnChart(
document.getElementById('columnchartIncidents'));
chart.draw(data, options);
}
use the 'annotation' column role...
1) add annotation column to the data table...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period Incident');
data.addColumn('number', '# of Incidents');
// add annotation column role
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
['Mushrooms', 3, '3'], // <-- add annotations to the data
['Onions', 4, '4'],
['Olives', 5, '5'],
['Zucchini', 11, '11'],
['Pepper', 7, '7'],
['Avocado', 4, '4'],
['Tomato', 5, '5'],
['Pepperoni', 2, '2']
]);
var options = {
title: 'How Much Pizza I Ate Last Night',
legend: {
position: 'top',
alignment: 'start'
},
width: 570,
height: 420
};
var chart = new google.visualization.ColumnChart(
document.getElementById('columnchartIncidents')
);
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchartIncidents"></div>
2) or use a data view to add a calculated column for the annotation role...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period Incident');
data.addColumn('number', '# of Incidents');
data.addRows([
['Mushrooms', 3],
['Onions', 4],
['Olives', 5],
['Zucchini', 11],
['Pepper', 7],
['Avocado', 4],
['Tomato', 5],
['Pepperoni', 2]
]);
// create data view
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
role: 'annotation',
sourceColumn: 1,
type: 'string'
}]);
var options = {
title: 'How Much Pizza I Ate Last Night',
legend: {
position: 'top',
alignment: 'start'
},
width: 570,
height: 420
};
var chart = new google.visualization.ColumnChart(
document.getElementById('columnchartIncidents')
);
chart.draw(view, options); // <-- draw chart with view
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchartIncidents"></div>