Google Chart Tooltip Doesn't Work

Google Chart Tooltip Doesn't Work - javascript

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'
}]);

Related

Show/hide/toggle Data Series on Google Chart by clicking Legend

I have a Google line chart which displays 11 different series of data. I want the user to be able to show/hide a series by clicking on the relevant series in the legend. I found this similar question and solution elsewhere on Stackoverflow. However nothing happens when I click on a series in the legend after incorporating what I believe is the applicable code from the above solution. I've commented where the modified code from the solution starts at the end of my code below.
Would really appreciate some help please.
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['controls']}).then(initialize);
function initialize() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1001YnF8LCwKyzpS4pgmZnwFVigL-LlnqwWn6xjnso2k/edit#gid=0&range=A:BT');
query.send(drawDashboard);
}
function drawDashboard(response) {
var data = response.getDataTable();
//Asign units of 'mm' to data.
var formatMS = new google.visualization.NumberFormat({pattern: '# mm'});
// format data into mm.
for (var colIndex = 1; colIndex < data.getNumberOfColumns(); colIndex++) {formatMS.format(data, colIndex);}
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0,1,2,{sourceColumn: 3, role: 'interval'}, {sourceColumn: 4, role: 'interval'}, 5,{sourceColumn: 6, 'type': 'string', role: 'tooltip', 'p': {'html': true}},7,8,9,10,11,12,13,14,15,{sourceColumn: 16, role: 'interval'}, {sourceColumn: 17, role: 'interval'}, 18,{sourceColumn: 19, 'type': 'string', role: 'tooltip', 'p': {'html': true}},20,21,22,23,24,25,26,27,28,{sourceColumn: 29, role: 'interval'}, {sourceColumn: 30, role: 'interval'},31,{sourceColumn: 32, 'type': 'string', role: 'tooltip', 'p': {'html': true}},33,34,35,36,37,38,39,40,41,{sourceColumn: 42, role: 'interval'}, {sourceColumn: 43, role: 'interval'}, 44,{sourceColumn: 45, 'type': 'string', role: 'tooltip', 'p': {'html': true}},46,47,48,49,50,51,52,53,54,{sourceColumn: 55, role: 'interval'}, {sourceColumn: 56, role: 'interval'}, 57,{sourceColumn: 58, 'type': 'string', role: 'tooltip', 'p': {'html': true}},59,60,61,62,63,64,65,66,67,68,69,70,71]);
var YearPicker = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'filter_div',
options: {
maxValue: 2150,
minValue: 1891,
filterColumnLabel: 'Year',
ui: {
cssClass: 'filter-date',
format: {pattern: '0000'},
labelStacking: 'vertical',
allowTyping: true,
allowMultiple: false
}
},
state: {lowValue: 1891, highValue: 2150},
});
google.visualization.events.addListener(YearPicker, 'statechange', function () {
var state = YearPicker.getState();
state.lowValue = Math.min(2021, state.lowValue);
YearPicker.setState({
lowValue: state.lowValue,
highValue: state.highValue
});
YearPicker.draw();
});
var MSLChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: dataView,
options: {
fontSize: '20',
title: 'NZ Annual Relative Mean Sea Level Summary',
hAxis: {title: 'Year', format: '0000'},
vAxis: {title: 'Height above 1986-2005 IPCC Baseline (mm)', format:'###0'},
height: 600,
chartArea: {height: '81%', width: '85%', left: 100},
legend: {position: 'top', maxLines: 5, alignment: 'start', textStyle: {fontSize: 9}},
colors: ['blue'],
tooltip: {
isHtml: true
},
trendlines: {
9: {
type: 'linear',
color: 'black',
visibleInLegend: true,
showR2: true,
},
10: {
type: 'polynomial',
color: 'purple',
degree: 2,
visibleInLegend: true,
showR2: true,
},
},
series: {
0: {color:'navy', visibleInLegend: true}, //Auckland
1: {color:'green', visibleInLegend: true }, //Taranaki
2: {color:'gold', visibleInLegend: true}, //Wellington
3: {color:'red', visibleInLegend: true}, //Lyttelton
4: {color:'DeepSkyBlue', visibleInLegend: true}, //Dunedin
5: {color:'#47d045', visibleInLegend: true}, //NZ RCP2.6 M
6: {color:'#0e038d', visibleInLegend: true}, //NZ RCP4.5 M
7: {color:'#b8bb62', visibleInLegend: true}, //NZ RCP8.5 M
8: {color:'#b22123', visibleInLegend: true}, //NZ RCP8.5 H
9: {color:'blue', visibleInLegend: true}, //NZ Mean
10: {color:'blue', visibleInLegend: false}, //NZ Mean
},
intervals: { 'style':'bars','color': '#6292dc' },
interpolateNulls: 'True',
},
view: {columns: [0,7,20,33,46,59,66,67,68,69,70,71]}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).bind(YearPicker, MSLChart).draw(dataView);
//Code taken from above solution begins here:
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
google.visualization.events.addListener(MSLChart, 'select', function () {
var sel = MSLChart.getChart().getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
} else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
MSLChart.draw();
}
}
});
}
</script>
</head>
<body>
<div id="dashboard_div" >
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
</body>
</html>

first, need to assign chart events before chart is drawn,
just need to move select event above dashboard.draw
next, since you are setting specific view columns on the chart wrapper,
we need to take those into account when making changes to the series.
we'll save a reference to the view columns...
var viewColumns = [0,7,20,33,46,59,66,67,68,69,70,71];
then use that reference when hiding / showing the series...
var col = viewColumns[sel[0].column];
next, when the new columns are set and the chart is to be re-drawn,
we have to update the chart's datatable with the new view...
var view = new google.visualization.DataView(dataView);
view.setColumns(columns);
MSLChart.setDataTable(view); // <-- here
something that didn't work in the referenced answer,
was making the chart legend for the series grayed out.
once we make changes to the series colors,
we have to reset the series option...
MSLChart.setOption('series', series);
finally, I added one other routine, to prevent the y-axis from changing,
when a series is removed and the chart is re-drawn.
we can use chart method getVAxisValue to determine the min and max values of the y-axis, from the initial draw.
var chartArea = MSLChart.getChart().getChartLayoutInterface().getChartAreaBoundingBox();
var vAxisTop = MSLChart.getChart().getChartLayoutInterface().getVAxisValue(chartArea.top);
var vAxisBtm = MSLChart.getChart().getChartLayoutInterface().getVAxisValue(chartArea.top + chartArea.height);
MSLChart.setOption('vAxis.viewWindow.max', vAxisTop);
MSLChart.setOption('vAxis.viewWindow.min', vAxisBtm);
following is the updated code...
google.charts.load('current', {packages: ['controls']}).then(initialize);
function initialize() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1001YnF8LCwKyzpS4pgmZnwFVigL-LlnqwWn6xjnso2k/edit#gid=0&range=A:BT');
query.send(drawDashboard);
}
function drawDashboard(response) {
var data = response.getDataTable();
//Asign units of 'mm' to data.
var formatMS = new google.visualization.NumberFormat({pattern: '# mm'});
// format data into mm.
for (var colIndex = 1; colIndex < data.getNumberOfColumns(); colIndex++) {formatMS.format(data, colIndex);}
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0,1,2,{sourceColumn: 3, role: 'interval'}, {sourceColumn: 4, role: 'interval'}, 5,{sourceColumn: 6, 'type': 'string', role: 'tooltip', 'p': {'html': true}},7,8,9,10,11,12,13,14,15,{sourceColumn: 16, role: 'interval'}, {sourceColumn: 17, role: 'interval'}, 18,{sourceColumn: 19, 'type': 'string', role: 'tooltip', 'p': {'html': true}},20,21,22,23,24,25,26,27,28,{sourceColumn: 29, role: 'interval'}, {sourceColumn: 30, role: 'interval'},31,{sourceColumn: 32, 'type': 'string', role: 'tooltip', 'p': {'html': true}},33,34,35,36,37,38,39,40,41,{sourceColumn: 42, role: 'interval'}, {sourceColumn: 43, role: 'interval'}, 44,{sourceColumn: 45, 'type': 'string', role: 'tooltip', 'p': {'html': true}},46,47,48,49,50,51,52,53,54,{sourceColumn: 55, role: 'interval'}, {sourceColumn: 56, role: 'interval'}, 57,{sourceColumn: 58, 'type': 'string', role: 'tooltip', 'p': {'html': true}},59,60,61,62,63,64,65,66,67,68,69,70,71]);
var viewColumns = [0,7,20,33,46,59,66,67,68,69,70,71];
var YearPicker = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'filter_div',
options: {
maxValue: 2150,
minValue: 1891,
filterColumnLabel: 'Year',
ui: {
cssClass: 'filter-date',
format: {pattern: '0000'},
labelStacking: 'vertical',
allowTyping: true,
allowMultiple: false
}
},
state: {lowValue: 1891, highValue: 2150},
});
google.visualization.events.addListener(YearPicker, 'statechange', function () {
var state = YearPicker.getState();
state.lowValue = Math.min(2021, state.lowValue);
YearPicker.setState({
lowValue: state.lowValue,
highValue: state.highValue
});
YearPicker.draw();
});
var series = {
0: {color:'navy', visibleInLegend: true}, //Auckland
1: {color:'green', visibleInLegend: true }, //Taranaki
2: {color:'gold', visibleInLegend: true}, //Wellington
3: {color:'red', visibleInLegend: true}, //Lyttelton
4: {color:'DeepSkyBlue', visibleInLegend: true}, //Dunedin
5: {color:'#47d045', visibleInLegend: true}, //NZ RCP2.6 M
6: {color:'#0e038d', visibleInLegend: true}, //NZ RCP4.5 M
7: {color:'#b8bb62', visibleInLegend: true}, //NZ RCP8.5 M
8: {color:'#b22123', visibleInLegend: true}, //NZ RCP8.5 H
9: {color:'blue', visibleInLegend: true}, //NZ Mean
10: {color:'blue', visibleInLegend: false}, //NZ Mean
};
// save series colors
var seriesColors = {};
for (var column in series) {
if (series.hasOwnProperty(column)) {
seriesColors[column] = series[column].color;
}
}
var MSLChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: dataView,
options: {
fontSize: '20',
title: 'NZ Annual Relative Mean Sea Level Summary',
hAxis: {title: 'Year', format: '0000'},
vAxis: {title: 'Height above 1986-2005 IPCC Baseline (mm)', format:'###0'},
height: 600,
chartArea: {height: '81%', width: '85%', left: 100},
legend: {position: 'top', maxLines: 5, alignment: 'start', textStyle: {fontSize: 9}},
colors: ['blue'],
tooltip: {
isHtml: true
},
trendlines: {
9: {
type: 'linear',
color: 'black',
visibleInLegend: true,
showR2: true,
},
10: {
type: 'polynomial',
color: 'purple',
degree: 2,
visibleInLegend: true,
showR2: true,
},
},
series: series,
intervals: { 'style':'bars','color': '#6292dc' },
interpolateNulls: 'True',
},
view: {columns: viewColumns}
});
//Code taken from above solution begins here:
var columns = [];
for (var i = 0; i < dataView.getNumberOfColumns(); i++) {
columns.push(i);
}
google.visualization.events.addListener(MSLChart, 'select', function () {
var chartArea = MSLChart.getChart().getChartLayoutInterface().getChartAreaBoundingBox();
var vAxisTop = MSLChart.getChart().getChartLayoutInterface().getVAxisValue(chartArea.top);
var vAxisBtm = MSLChart.getChart().getChartLayoutInterface().getVAxisValue(chartArea.top + chartArea.height);
var sel = MSLChart.getChart().getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if ((sel[0].row === null) && (sel[0].column > 0)) {
// get actual column number from view
var col = viewColumns[sel[0].column];
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: dataView.getColumnLabel(col),
type: dataView.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[sel[0].column - 1].color = '#CCCCCC';
} else {
// show the data series
columns[col] = col;
series[sel[0].column - 1].color = seriesColors[sel[0].column - 1];
}
// set new view columns
var view = new google.visualization.DataView(dataView);
view.setColumns(columns);
MSLChart.setDataTable(view);
// prevent y-axis from changing when series is removed
MSLChart.setOption('series', series);
MSLChart.setOption('vAxis.viewWindow.max', vAxisTop);
MSLChart.setOption('vAxis.viewWindow.min', vAxisBtm);
// re-draw chart
MSLChart.draw();
}
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).bind(YearPicker, MSLChart).draw(dataView);
}

When using two google charts, one vertical axis disappears

When using two google charts, one vertical axis disappears.
The vertical axis of the first google chart works fine.
But the vertical axis of the second google chart is not visible.
Obviously I made two charts copy & paste,
I have two divs, what's wrong?
//This is my code
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var year1 = /*[[ ${reallist3} ]]*/; //년별 매매
var year2 = /*[[ ${reallist4} ]]*/; //년별 전월세
/*]]>*/
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data1 = new google.visualization.DataTable();
data1.addColumn('string', 'Element');
data1.addColumn('number', '가격');
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'Element');
data2.addColumn('number', '가격');
for(var i = 0; i < year1.length; i++){
data1.addRow([year1[i].date + "(만원)", Number(year1[i].price)]);
}
for(var i = 0; i < year2.length; i++){
data2.addRow([year2[i].date + "(만원)", Number(year2[i].price)]);
}
var view1 = new google.visualization.DataView(data1);
view1.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }
]);
var options1 = {
width: 1100,
height: 500,
bar: {groupWidth: "50%"},
legend: { position: "none" },
vAxis: {minValue : 0},
colors: ["pink","#81BEF7"],
chartArea:{left:60,top:20,width:"80%",height:"85%"}
};
var chart1 = new google.visualization.ColumnChart(document.getElementById("chart_real1"));
chart1.draw(view1, options1);
var view2 = new google.visualization.DataView(data2);
view2.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }
]);
var options2 = {
width: 1100,
height: 500,
bar: {groupWidth: "50%"},
legend: { position: "none" },
vAxis: {minValue : 0},
colors: ["pink","#81BEF7"],
chartArea:{left:60,top:20,width:"80%",height:"85%"}
};
var chart2 = new google.visualization.ColumnChart(document.getElementById("chart_real2"));
chart2.draw(view2, options2);
}
</script>

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 column chart - set selected column color

I have simple column chart and I need to change color of selected (clicked) column. By default it adds white line around the column.
var options = {
title: 'Motivation and Energy Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
}
};
Here is simple example on jSFiddle
So if I click any column how to change its color to black?
I can't use Material Charts.
Thanks

Finally I found an answer here
Frankly I thought that there is simpler option, like setting configuration option e.g. hAxis.selected.color: '#000000'.
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data,
options: {
// setting the "isStacked" option to true fixes the spacing problem
isStacked: true,
height: 300,
width: 600,
series: {
1: {
// set the color to change to
color: '00A0D0',
// don't show this in the legend
visibleInLegend: false
}
}
}
});
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getChart().getSelection();
if (selection.length > 0) {
var newSelection = [];
// if row is undefined, we selected the entire series
// otherwise, just a single element
if (typeof(selection[0].row) == 'undefined') {
newSelection.push({
column: 2
});
chart.setView({
columns: [0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function () {
// this series is just a placeholder
return 0;
}
}, 1]
});
}
else {
var rows = [];
for (var i = 0; i < selection.length; i++) {
rows.push(selection[i].row);
// move the selected elements to column 2
newSelection.push({
row: selection[i].row,
column: 2
});
}
// set the view to remove the selected elements from the first series and add them to the second series
chart.setView({
columns: [0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
return (rows.indexOf(row) >= 0) ? null : {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)};
}
}, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
return (rows.indexOf(row) >= 0) ? {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)} : null;
}
}]
});
}
// re-set the selection when the chart is done drawing
var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
google.visualization.events.removeListener(runOnce);
chart.getChart().setSelection(newSelection);
});
}
else {
// if nothing is selected, clear the view to draw the base chart
chart.setView();
}
chart.draw();
});
chart.draw();
}
UPDATE:
Above solution works only if you are using a ChartWrapper.
I actually needed solution just for chart.
Finally I solved this by adding style.color to the data row. If my selected index = rowIndex then I change the color. Simple and works like a charm.
I hope it will help others.
var data = new google.visualization.DataTable();
data.addColumn({ id: 'name', type: 'string' });
data.addColumn({ id: 'm1', type: 'number' });
data.addColumn({type: 'string', role:'tooltip', 'p': {'html': true}});
data.addColumn({type: 'string', role:'style'});
$.each(scatterData.data, function (index, value) {
if (index == chartSelectedIndex) {
data.addRow([ {v:value.park}, {v:value.m1}, {v:getColumnChartHTMLTooltip(value.park,value.name,value.m1)}, 'color: #32CCFF' ]);
} else{
data.addRow([ {v:value.park}, {v:value.m1}, {v:getColumnChartHTMLTooltip(value.park,value.name,value.m1)}, null ]);
};
});

This worked for me
.my-div svg>g>g>g>g>rect {
fill: #79baeb;
}

Develop Reference

JavaScript is the programming language of the Web.

Google Chart Tooltip Doesn't Work - javascript

Related

Show/hide/toggle Data Series on Google Chart by clicking Legend

When using two google charts, one vertical axis disappears

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

Stacked Column Annotations Google Charts

Google column chart - set selected column color

Categories

Resources