Develop Reference

How to show annotations on column chart? [duplicate]

I've been trying to add annotations to google bar chart. I've seen related questions about this, but can't solve it. There are 2 bar in charts and i want to show numbers on bars. I added 2 annotation column to my datatable. Chart draw works without annotations and there is no error at console. So i need some help. Here is my code:
var options = {
chart: {
title: 'xxxx',
subtitle: 'xxxx',
focusTarget:'category'
},
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
},
alwaysOutside: true
},
height:300,
vAxis: {format: 'short'},
colors: ['#17807E', '#4285F4']
};
function drawAudits(Data) //data comes from another function with ajax call
{
var dataTbl = new google.visualization.DataTable();
dataTbl.addColumn('string', 'Months');
dataTbl.addColumn('number', 'Scheduled');
dataTbl.addColumn('number', 'Done');
dataTbl.addColumn({ type:'number' , role: 'annotation' });
dataTbl.addColumn({ type:'number' , role: 'annotation' });
for (var i = 0; i < Data.length; i++)
{
dataTbl.addRow([Data[i].month, Data[i].AllAudits, Data[i].DoneAudits, Data[i].AllAudits, Data[i].DoneAudits]);
} //last 2 column for annotations
var chart = new google.charts.Bar(document.getElementById('columnChartDiv'));
chart.draw(dataTbl,options);
}
thanks in advance.

annotations.* are not supported by Material charts, along with several other options...
see --> Tracking Issue for Material Chart Feature Parity #2143
the following option will style Core charts, similar to Material...
theme: 'material'
note: the annotation column should directly follow the series it represents...
see following working snippet...
google.charts.load('current', {
callback: function () {
var options = {
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
},
alwaysOutside: true
},
chartArea: {
left: 36,
width: '100%'
},
colors: ['#17807E', '#4285F4'],
focusTarget:'category',
height:300,
legend: {
position: 'bottom'
},
theme: 'material',
title: 'xxxx',
vAxis: {
format: 'short',
viewWindow: {
max: 12
}
},
};
drawAudits();
window.addEventListener('resize', drawAudits, false);
function drawAudits(Data) {
var dataTbl = new google.visualization.DataTable();
dataTbl.addColumn('string', 'Months');
dataTbl.addColumn('number', 'Scheduled');
dataTbl.addColumn({ type:'number' , role: 'annotation' });
dataTbl.addColumn('number', 'Done');
dataTbl.addColumn({ type:'number' , role: 'annotation' });
Data = [
{month: 'Jan', AllAudits: 10, DoneAudits: 5},
{month: 'Feb', AllAudits: 10, DoneAudits: 6}
];
for (var i = 0; i < Data.length; i++) {
dataTbl.addRow([Data[i].month, Data[i].AllAudits, Data[i].AllAudits, Data[i].DoneAudits, Data[i].DoneAudits]);
}
var chart = new google.visualization.ColumnChart(document.getElementById('columnChartDiv'));
chart.draw(dataTbl,options);
}
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnChartDiv"></div>

Google Scatter Chart multiple tooltips overlapping each other

I am using google charts and showing 3 tooltips by default when chart is loaded for that i have used
tooltip: { trigger: 'selection' },
aggregationTarget: 'none',
selectionMode: 'multiple'
Every thing is working fine but when the points get very close to each other like (1,1) and (1,1.5) the tool tips comes over each other please see this image. Is there any option or a way to overcome this.
google.charts.load('current', {
packages: ['corechart']
}).then(drawScatterChart);
function drawScatterChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'brand');
data.addColumn('number', 'store');
data.addColumn({
type: 'string',
role: 'tooltip'
});
data.addColumn({
type: 'string',
role: 'style'
});
var datarows = "";
var json = JSON.parse('[{"store":4.73977695167286,"brand":4.95353159851301,"empty":false,"tooltip":true,"tooltiptext":"Alpha Bravo"},{"store":0.362526138475839,"brand":0.835487337360595,"empty":false,"tooltip":true,"tooltiptext":"Avg. For Age"},{"store":0.598803222730479,"brand":1.14256989262171,"empty":false,"tooltip":true,"tooltiptext":"Franchisee Avg."},{"store":0.0929368029739777,"brand":0.288104089219331,"empty":false,"tooltip":true,"tooltiptext":"Andrew Richardson"},{"store":4.64684014869888,"brand":7.00743494423792,"empty":false,"tooltip":true,"tooltiptext":"April Singer"},{"store":4.64684014869888,"brand":7.00743494423792,"empty":false,"tooltip":true,"tooltiptext":"April Singer"}]');
$.each(json, function(ind, ele) {
//Every row given must be either null or an array.
var arr = [];
//'point {stroke-color: #A3A3A3; stroke-width: 0; fill-color: none;');/
if (ele.empty == true) {
arr.push(ele.brand, ele.store, "", 'point {stroke-color: #A3A3A3; stroke-width: 0; fill-color: none;'); //" Franchise Avg. ");fill-color: #a52714;
} else {
if (ele.tooltip == true) {
datarows += ind + ",";
}
arr.push(ele.brand, ele.store, ele.tooltiptext, 'point {stroke-color: #A3A3A3; stroke-width: 1'); //" Franchise Avg. ");fill-color: #a52714;
}
data.addRows([arr]);
});
var container = document.getElementById('chart_div');
var chart = new google.visualization.ScatterChart(container);
var options = {
width: 500,
height: 440,
legend: 'none',
hAxis: {
title: 'Brand Engagement',
gridlines: {
count: 11
}
}, //, minValue: 0
vAxis: {
title: 'Performance',
gridlines: {
count: 11
}
}, //, minValue: 0
backgroundColor: 'none',
colors: ['#fff'],
chartArea: {
left: 50,
top: 20,
width: "80%",
height: "87%"
},
tooltip: {
isHtml: true,
trigger: 'selection'
},
aggregationTarget: 'none',
pointSize: 5,
selectionMode: 'multiple',
};
google.visualization.events.addListener(chart, 'ready', setChartSelection);
function setChartSelection() {
var arrRows = datarows.split(",");
chart.setSelection([{
row: arrRows[0],
column: 1
},
{
row: arrRows[1],
column: 1
},
{
row: arrRows[2],
column: 1
}
]);
}
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart_div" style="float: left;">
</div>

there are no options you can set to avoid overlap...
a possible solution would be to use the explorer option to pan and zoom
explorer: {
actions: ['dragToZoom', 'rightClickToReset']
}
see following working snippet, when the chart loads,
use the mouse to draw a square around the two points on the lower left,
once zoomed, both tooltips are displayed fully...
google.charts.load('current', {
packages: ['corechart']
}).then(drawScatterChart);
function drawScatterChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'brand');
data.addColumn('number', 'store');
data.addColumn({
type: 'string',
role: 'tooltip'
});
data.addColumn({
type: 'string',
role: 'style'
});
var datarows = "";
var json = JSON.parse('[{"store":4.73977695167286,"brand":4.95353159851301,"empty":false,"tooltip":true,"tooltiptext":"Alpha Bravo"},{"store":0.362526138475839,"brand":0.835487337360595,"empty":false,"tooltip":true,"tooltiptext":"Avg. For Age"},{"store":0.598803222730479,"brand":1.14256989262171,"empty":false,"tooltip":true,"tooltiptext":"Franchisee Avg."},{"store":0.0929368029739777,"brand":0.288104089219331,"empty":false,"tooltip":true,"tooltiptext":"Andrew Richardson"},{"store":4.64684014869888,"brand":7.00743494423792,"empty":false,"tooltip":true,"tooltiptext":"April Singer"},{"store":4.64684014869888,"brand":7.00743494423792,"empty":false,"tooltip":true,"tooltiptext":"April Singer"}]');
$.each(json, function(ind, ele) {
//Every row given must be either null or an array.
var arr = [];
//'point {stroke-color: #A3A3A3; stroke-width: 0; fill-color: none;');/
if (ele.empty == true) {
arr.push(ele.brand, ele.store, "", 'point {stroke-color: #A3A3A3; stroke-width: 0; fill-color: none;'); //" Franchise Avg. ");fill-color: #a52714;
} else {
if (ele.tooltip == true) {
datarows += ind + ",";
}
arr.push(ele.brand, ele.store, ele.tooltiptext, 'point {stroke-color: #A3A3A3; stroke-width: 1'); //" Franchise Avg. ");fill-color: #a52714;
}
data.addRows([arr]);
});
var container = document.getElementById('chart_div');
var chart = new google.visualization.ScatterChart(container);
var options = {
width: 500,
height: 440,
legend: 'none',
hAxis: {
title: 'Brand Engagement',
gridlines: {
count: 11
}
}, //, minValue: 0
vAxis: {
title: 'Performance',
gridlines: {
count: 11
}
}, //, minValue: 0
backgroundColor: 'none',
colors: ['#fff'],
chartArea: {
left: 50,
top: 20,
width: "80%",
height: "87%"
},
tooltip: {
isHtml: true,
trigger: 'selection'
},
aggregationTarget: 'none',
pointSize: 5,
selectionMode: 'multiple',
explorer: {
actions: ['dragToZoom', 'rightClickToReset']
}
};
google.visualization.events.addListener(chart, 'ready', setChartSelection);
function setChartSelection() {
var arrRows = datarows.split(",");
chart.setSelection([{
row: arrRows[0],
column: 1
},
{
row: arrRows[1],
column: 1
},
{
row: arrRows[2],
column: 1
}
]);
}
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart_div" style="float: left;">
</div>

Google chart - role: annotation in candlestick bar [duplicate]

i'm trying to use Google Chart API for building an Waterfall chart. I noticed that Candlestick/Waterfall charts are not supporting the annotations.
See this jsfiddle sample
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'MinimumLevel');
data.addColumn('number', 'MinimumLevel1');
data.addColumn('number', 'MaximumLevel');
data.addColumn('number', 'MaximumLevel1');
data.addColumn({type: 'number', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type: 'number', role: 'annotation'});
data.addRow(['Category 1', 0 , 0, 5, 5, 5,'gray',5]);
data.addRow(['Category 2', 5 , 5, 10, 10, 10,'red',10]);
data.addRow(['Category 3', 10 , 10, 15, 15, 15,'blue',15]);
data.addRow(['Category 4', 15 , 15, 10, 10, 10,'yellow',10]);
data.addRow(['Category 5', 10 , 10, 5, 5, 5,'gray',5]);
var options = {
legend: 'none',
bar: { groupWidth: '60%' } // Remove space between bars.
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I would like to put the value of the 5th column at the top of every candlestick.
It should look like this :
Is there a way to do this?
Thanks

I add annotations to candlestick charts by adding annotations to a hidden scatter plot. You can set exactly where you want the annotations to sit by changing the plot.
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number'); //scatter plot for annotations
data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
var high, low, open, close = 160;
for (var i = 0; i < 10; i++) {
open = close;
close += ~~(Math.random() * 10) * Math.pow(-1, ~~(Math.random() * 2));
high = Math.max(open, close) + ~~(Math.random() * 10);
low = Math.min(open, close) - ~~(Math.random() * 10);
annotation = '$' + close;
annotation_text = 'Close price: $' + close;
data.addRow([new Date(2014, 0, i + 1), low, open, close, high, high, annotation, annotation_text]);
}
var view = new google.visualization.DataView(data);
var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
explorer: {},
chartArea: {
left: '7%',
width: '70%'
},
series: {
0: {
color: 'black',
type: 'candlesticks',
},
1: {
type: 'scatter',
pointSize: 0,
targetAxisIndex: 0,
},
},
candlestick: {
color: '#a52714',
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
},
});
}
<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

just so happens, i ran into the same problem this week
so I added my own annotations, during the 'animationfinish' event
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var dataChart = new google.visualization.DataTable({"cols":[{"label":"Category","type":"string"},{"label":"Bottom 1","type":"number"},{"label":"Bottom 2","type":"number"},{"label":"Top 1","type":"number"},{"label":"Top 2","type":"number"},{"role":"style","type":"string","p":{"role":"style"}}],"rows":[{"c":[{"v":"Budget"},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"}]},{"c":[{"v":"Contract Labor"},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"}]},{"c":[{"v":"Contract Non Labor"},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"}]},{"c":[{"v":"Materials and Equipment"},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"}]},{"c":[{"v":"Other"},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"}]},{"c":[{"v":"Labor"},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"}]},{"c":[{"v":"Travel"},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"}]},{"c":[{"v":"Training"},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"}]},{"c":[{"v":"Actual"},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"}]}]});
var waterFallChart = new google.visualization.ChartWrapper({
chartType: 'CandlestickChart',
containerId: 'chart_div',
dataTable: dataChart,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
groupWidth: '85%'
},
chartArea: {
backgroundColor: 'transparent',
height: 210,
left: 60,
top: 24,
width: '100%'
},
hAxis: {
slantedText: false,
textStyle: {
color: '#616161',
fontSize: 9
}
},
height: 272,
legend: 'none',
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
gridlines: {
count: -1
},
textStyle: {
color: '#616161'
},
viewWindow: {
max: 24000000,
min: 16000000
}
},
width: '100%'
}
});
google.visualization.events.addOneTimeListener(waterFallChart, 'ready', function () {
google.visualization.events.addListener(waterFallChart.getChart(), 'animationfinish', function () {
var annotation;
var chartLayout;
var container;
var numberFormatShort;
var positionY;
var positionX;
var rowBalance;
var rowBottom;
var rowFormattedValue;
var rowIndex;
var rowTop;
var rowValue;
var rowWidth;
container = document.getElementById(waterFallChart.getContainerId());
chartLayout = waterFallChart.getChart().getChartLayoutInterface();
numberFormatShort = new google.visualization.NumberFormat({
pattern: 'short'
});
rowIndex = 0;
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
switch (rect.getAttribute('fill')) {
// use colors to identify bars
case '#922b21':
case '#1e8449':
case '#007fff':
rowWidth = parseFloat(rect.getAttribute('width'));
if (rowWidth > 2) {
rowBottom = waterFallChart.getDataTable().getValue(rowIndex, 1);
rowTop = waterFallChart.getDataTable().getValue(rowIndex, 3);
rowValue = rowTop - rowBottom;
rowBalance = Math.max(rowBottom, rowTop);
positionY = chartLayout.getYLocation(rowBalance) - 6;
positionX = parseFloat(rect.getAttribute('x'));
rowFormattedValue = numberFormatShort.formatValue(rowValue);
if (rowValue < 0) {
rowFormattedValue = rowFormattedValue.replace('-', '');
rowFormattedValue = '(' + rowFormattedValue + ')';
}
annotation = container.getElementsByTagName('svg')[0].appendChild(container.getElementsByTagName('text')[0].cloneNode(true));
$(annotation).text(rowFormattedValue);
annotation.setAttribute('x', (positionX + (rowWidth / 2)));
annotation.setAttribute('y', positionY);
annotation.setAttribute('font-weight', 'bold');
rowIndex++;
}
break;
}
});
});
});
$(window).resize(function() {
waterFallChart.draw();
});
waterFallChart.draw();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Stacked Column Annotations Google Charts

While creating a stacked column chart using google charts, the annotations are getting overlapped due to large amount data. Is there anyway to get it adjusted. Like displaying only for every 3rd column. I know this concept works fine with highcharts but I was looking for free charts.
Annotation function call is :--
function drawVisualization() {
var json;
$.getJSON('end.json', function (json) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time');
data.addColumn('number', 'Run 3');
data.addColumn({ type: 'number', role: 'annotation' });
data.addColumn('number', 'Run 2');
data.addColumn({ type: 'number', role: 'annotation' });
data.addColumn('number', 'Run 1');
data.addColumn({ type: 'number', role: 'annotation' });
for (var i = 0; i< json[0].data.length; i++){
data.addRow([json[0].data[i], json[3].data[i],json[3].data[i],json[2].data[i],json[2].data[i],json[1].data[i], json[1].data[i]]);
}
var options = {
title: "End to End Processing",
tooltip: {isHtml: true},
legend:{position:"right"},
isStacked:true,
height:window.innerHeight,
width: window.innerWidth,
bar: {groupWidth: '3'},
focusTarget: 'category',
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:60,
min:0
},
gridlines :{count:6},
title:'Time in mins',
format: 'short'
},
hAxis: {
format: 'd/m/y',
textStyle : {
fontSize: 9
},
slantedText: true,
slantedTextAngle: 270
},
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
fontStyle: 'bold'
},
 stemLength: 20,
displayAnnotationsFilter: true,
legendPosition: 'newRow'
},
series: {
0:{color:'lightgreen'},
1:{color:'black'},
2:{color:'#1E90FF',},
3:{ type: 'line', lineWidth: 0, visibleInLegend:false, pointSize: 0}
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
$(window).resize(function(){
drawVisualization();
});
}
Regards.

there isn't a standard option, but you can use null for blank annotations
when loading, try the following to show annotations for every third row...
for (var i = 0; i< json[0].data.length; i++){
var annotation1 = null;
var annotation2 = null;
var annotation3 = null;
if ((i % 3) === 0) {
var annotation3 = json[3].data[i];
var annotation2 = json[2].data[i];
var annotation1 = json[1].data[i];
}
data.addRow([
json[0].data[i],
json[3].data[i],
annotation3,
json[2].data[i],
annotation2,
json[1].data[i],
annotation1
]);
}

Google Chart Tooltip Doesn't Work

I am trying to change my Google Chart Tooltip, but it doesn't work. According to the Google, I should have to put:
data.addColumn({ type: 'string', role: 'tooltip' });
and
tooltip: { isHtml: true },
But doesn't work. I am just trying to put a phrase, instead, he puts a default value.
It is my code:
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Value');
**data.addColumn({ type: 'string', role: 'tooltip' });**
data.addColumn('number', 'Id');
for (i = 0; i < Object.keys(dataDB).length; i++) {
var year = dataDB[i].Year.toString();
var value = (dataDB[i].Value);
var message = "test";
var id = (dataDB[i].Id);
data.addRow([year, value, message, id]);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}]);
var options = {
width: 1000,
height: 400,
focusTarget: 'category',
hAxis: { textPosition: 'none' },
legend: { position: 'none' },
chartArea: { left: 50, top: 30, width: "70%", height: "200%" },
bar: { groupWidth: "65%" },
tooltip: { isHtml: true },
};
var formatter = new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: 'R$ ' });
formatter.format(data, 1);
var chart = new google.visualization.BarChart(document.getElementById("divResult"));
chart.draw(view, options);
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length) {
var row = selection[0].row;
var _year = data.getValue(row, 0);
var _id = data.getValue(row, 3);
CallMensal(_id, _year);
}
});
}

also need to add column property
// col prop
data.addColumn({ type: 'string', role: 'tooltip', p: {html: true}});
EDIT
the column also needs to be included in the view which is used to draw the chart
include the column index when using view.setColumns
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);