I'm trying to add tooltips to a Google Area Chart, but I'm getting unexpected behavior. I took the Area Chart JSFiddle example and modified it to add a custom tooltip as described here. My content looks like this:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', { type: 'string', role: 'tooltip'}],
['2013', 1000, 400, 'wtf'],
['2014', 1170, 460, 'hithere'],
['2015', 660, 1120, 'doh'],
['2016', 1030, 540, 'moohaha']
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
focusTarget: 'category'
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
JSFiddle here: https://jsfiddle.net/accelerate/y18tb8eq/
Rather than replacing the entire tooltip content, like I expected, the 'expenses' line in the tooltip gets replaced with my tooltip data. For example, the tooltip for the first set of data looks like:
2013
Sales: 1,000
Expenses: wtf
Can someone explain to me what I'm doing wrong?
I figured it out. Which column the tooltip is in matters. I needed to put the tooltip column immediately after the first column. So my header column has to look like this:
['Year', { type: 'string', role: 'tooltip'}, 'Sales', 'Expenses']
Related
I'm using a standard bar chart based on Google's code description
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
The problem is that I have more data, like the variation in Sales in 2014, that I would like to get included in the chart = maybe as whisker lines or an additional number that overlay when you mouseover a bar. Is this even possible? If so, how is it done?
It turns out you can do this (it's a bit more complicated with html because you have to find the classic graph options)
add specific tooltip to arraytoDataTable
I'm trying to create a scatter plot using Google charts and I don't seem to be able to add a column to be a tooltip. I read various sources that state that the data definition should be as:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
// A column for custom tooltip content
data.addColumn({type: 'string',role: 'tooltip',});
data.addRows([
['Name1', 1000, 'Tooltip string'],
['Name2', 1170, 'Tooltip string'],
['Name3', 660, 'Tooltip string'],
]);
However, it doesn't work.
JSFiddle to demonstrate the issue: https://jsfiddle.net/shakedk/c37L0d1n/
column roles are not supported by material charts,
along with several other options.
see --> Tracking Issue for Material Chart Feature Parity
for custom tooltips, you will need to use a classic chart.
material = google.charts.Scatter -- package: 'scatter'
classic = google.visualization.ScatterChart -- package: 'corechart'
see following working snippet...
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', 'Sales');
// A column for custom tooltip content
data.addColumn({
type: 'string',
role: 'tooltip',
});
data.addRows([
['Name1', 1000, 'Tooltip string'],
['Name2', 1170, 'Tooltip string'],
['Name3', 660, 'Tooltip string'],
]);
var options = {
width: 800,
height: 500,
chart: {
title: 'Example',
},
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatterchart_material'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="scatterchart_material"></div>
To add to the answer of WhiteHat:
ScatterChart + Tooltip + Dashboard filter column:
I experienced with the ScatterChart that tooltips also do not work with the "arrayToDataTable method" IF there is also a string column that is used as the filter column of the google.visualization.ControlWrapper.
The "arrayToDataTable method" works well with just 2 columns with data and a 3rd column with the tooltip.
It also works well if the 3rd column contains the input for the dashboard filter.
But there is a 3rd and a 4th column then the "arrayToDataTable method" cannot be used (for ScatterCharts).
It works well if I use the DataTable.addRows method:
google.charts.setOnLoadCallback(chart_ecdf);
function chart_ecdf() {
var data = new google.visualization.DataTable();
data.addColumn('number','Population');
data.addColumn('number','Area');
data.addColumn({
type: 'string',
role: 'tooltip',
})
data.addColumn('string','Filter');
data.addRows([
[1324, 9640821, 'Annotated 1', 'A'],
[1133, 3287263, 'Annotated 2', 'A'],
[304, 9629091, 'Annotated 3', 'A'],
[232, 1904569, 'Annotated 4', 'B'],
[187, 8514877, 'Annotated 5', 'B']
]);
var filter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'filter_ecdf',
options: {
filterColumnIndex: 3,
ui: { caption: 'Kies een type', label: false, allowTyping: false, allowMultiple: false, allowNone: false, sortValues: false } },
state: {'selectedValues': ['{{ .Params.ecdf_filter_state | safeJS }}']}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'ScatterChart',
containerId: 'grafiek_ecdf',
view: {columns: [0,1,2]},
options: {
chartArea: {top:10, left:35, width:'82%', height:'90%'},
vAxis: {minValue: 0, maxValue: 1, format: 'percent'},
hAxis: {format: '#.##%' },
legend: 'none',
colors: ['#ffa852'] },
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_ecdf'));
dashboard.bind(filter, chart);
dashboard.draw(data);
}
I've got a chart Google bar chart with currency values and I simply want to have the Y-axis formatted with £s. I've tried to explicitly set the locale using 'en' but it still displays as $. If I set other locales it does then display in the local currency for that locale ... but it doesn't seem to work for English £s.
google.charts.load('current', {packages:['corechart'], language: 'en'});
e.g. https://jsfiddle.net/ynsqwe6o/5/
use language code --> 'en-GB'
see following working snippet...
google.charts.load('current', {
packages: ['corechart'],
language: 'en-GB'
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'GDP');
data.addRows([
['US', 16768100],
['China', 9181204],
['Japan', 4898532],
['Germany', 3730261],
['France', 2678455]
]);
var options = {
chartArea: {
left: 108
},
title: 'GDP of selected countries, in \u00A3pounds',
width: 500,
height: 300,
legend: 'none',
bar: {
groupWidth: '95%'
},
vAxis: {
format: "currency",
gridlines: {
count: 4
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="number_format_chart"></div>
I am implementing google charts and I want to give style to x-axis data. I found there the following code to do this.
hAxis:{
title: 'Month',
textStyle :{
fontSize : 10
}
}
I want to underline the text data and change cursor style to the pointer. I searched on the google chart website but didn't get.
you can modify the text elements directly,
when the 'ready' event fires on the chart
you can select which axis labels to modify by using the 'text-anchor' attribute
x-axis labels have a value of 'middle', y-axis 'end'
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Value');
data.addRows([
['Category A', 200],
['Category B', 110],
['Category D', 310],
['Category E', 280],
['Category F', 175]
]);
var options = {
hAxis: {
textStyle: {
fontSize : 10
},
title: 'Month'
},
height: 400,
width: 600
};
var chartContainer = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(chartContainer);
google.visualization.events.addListener(chart, 'ready', function () {
// modify x-axis labels
var labels = chartContainer.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
label.style.textDecoration = 'underline';
label.style.cursor = 'pointer';
}
});
});
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I saw some previous questions/answers here on StackOverflow
but none of the code provided in those answers seemed to work
with my chart:
Here is my code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Sales', 'Expenses'],
['January', 200, 150],
['February', 1170, 460],
['March', 660, 1120],
['April', 1030, 540],
['May', 1030, 540],
['June', 1030, 540]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August',
backgroundColor: '#fcfcfc',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
The html div code:
<div id="columnchart_material" style="width: 650px; height: 500px;"></div>
The thing is I want to change the background from white to light gray
and I can't seem to make it work by declaring backgroundColor: "#fcfcfc'
inside options{}
Is there any other way to declare a background color on that chart
I'm thinking maybe the type of chart I'm using can't change it's
background color.
I also tried to specify the backgroundColor variable as a function (followed by curly brackets backgroundColor{ color: '#fcfcfc' }
but that didn't work on my chart either.
Any help would be higly appreciated.
Thank you
jsFiddle : http://jsfiddle.net/mtypsnqy/
First, you've placed your backgroundColor: '#fcfcfc', at the wrong place. You have defined it inside of chart:{}while you should do it either outside any object or inside of chartArea like:
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August'
},
backgroundColor: '#fcfcfc'
};
which will cause your whole div containing the chart to be dark grey or like this:
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August'
},
chartArea:{
backgroundColor: '#fcfcfc'
}
};
which will cause only the area contained within your two axes to be colored red.
And finally you have to change your
chart.draw(data, options);
to
chart.draw(data, google.charts.Bar.convertOptions(options));
as specified on the Bar Charts API page.
I made you a fiddle to play around in and see the difference: Link