This is an example snippet from google.
https://developers.google.com/chart/interactive/docs/gallery/geochart#fullhtml
Data:
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['South America', 600],
['Canada', 500],
['France', 600],
['Russia', 700],
['Australia', 600]
]);
var options = { displayMode: 'text' };
Here, var options = { displayMode: 'text' } display the country's name on the map (Without hovering over the country)
Is there any way to display the popularity data on the map?
I went through the documentation, but couldn't find anything.
You can use {role: 'annotation'} to display the popularity value.
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', {role: 'annotation'}],
['South America', '600'],
['Canada', '500'],
['France', '600'],
['Russia', '700'],
['Australia', '600']
]);
See the fiddle here JSFIDDLE
Related
Using Google pie charts
Fiddle
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 20],
['Eat', 2],
['Commute', 2],
['Watch TV', 2]
]);
How can I get the 'Hours per Day' to show in the chart itself. Now it is showing in the tooltip mouseover. For example mouseover on Eat will show 2. When I save/print the chart I can't get these items. How to show this on the chart?
the pieSliceText configuration option allows you to change what appears on each slice
to get the value of the row, use...
pieSliceText: 'value'
also, if the chart isn't big enough, it will omit the label
there are several ways to size the chart
you can style the div container,
or set the height and width in the options
also, google recommends waiting on the chart's 'ready' event,
before calling any methods, including getImageURI
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 20],
['Eat', 2],
['Commute', 2],
['Watch TV', 2]
]);
var options = {
height: 400,
legend: {
position: 'labeled',
textStyle: {
color: 'blue'
}
},
pieSliceText: 'value',
title: 'My Daily Activities',
width: 800
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
});
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="image_div"></div>
This code:
chart = new google.charts.Bar(document.getElementById('chart'));
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', '');
dataTable.addColumn('number', 'Value');
dataTable.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
var rows = [
['U.S.', 2, "tool"],
['France', 10, "tip"]
];
dataTable.addRows(rows);
chart.draw(dataTable);
does not result in a custom tooltip.
Strangely it works with other chart types.
Do you know why please?
[edit] Apparently this is not possible. Is there any other way to put a "%" symbol in the tooltip, like in this screenshot?
The tooltip should show the formatted value by default.
Using object notation for your values, you can provide a formatted value (f:)
along with the required value (v:)...
you can also use dataTable.setFormattedValue(...) after the table is loaded...
Example...
google.charts.load('current', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
chart = new google.charts.Bar(document.getElementById('chart'));
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', '');
dataTable.addColumn('number', 'Value');
var rows = [
['U.S.', {v: 2, f: '2%'}], // add %
['France', {v: 10, f: '10%'}], // add %
['Germany', {v: 15, f: 'whatever we want'}] // add whatever we want
];
dataTable.addRows(rows);
chart.draw(dataTable);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I am trying to add a column data label to a google bar chart.
I have followed the instructions given in the API docs, and this is what I get:
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Searches'],
['1998', 9800],
['2000', 60000000],
['2007', 1200000000],
['2008', 1745000000],
['2009', 2610000000],
['2010', 3627000000],
['2011', 4717000000],
['2012', 5134000000],
['2013', 5922000000],
['2014', 5740000000]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }]);
var options = {
chart: {
title: 'Google searches',
subtitle: 'Average searches per day 1998-2014',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(view, options);
}
I must be doing something wrong as the chart fails to render any data labels.
What am I doing wrong?
https://jsfiddle.net/q9edfpte/1/
I did a number of changes*, and this one ultimately worked.
*Changes:
- 'packages':['bar'] --> 'packages':['corechart']
- google.charts.Bar --> google.visualization.ColumnChart
Working version (though needs beautifying):
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Searches'],
['1998', 9800],
['2000', 60000000],
['2007', 1200000000],
['2008', 1745000000],
['2009', 2610000000],
['2010', 3627000000],
['2011', 4717000000],
['2012', 5134000000],
['2013', 5922000000],
['2014', 5740000000]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }]);
var options = {
title: 'Google searches',
subtitle: 'Average searches per day 1998-2014',
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
chart.draw(view, options);
}
I'm trying to use the chartArea.backgroundColor option of Google Charts, but it doesn't seem to work, although this option is clearly described in the doc : https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#Configuration_Options
JSfiddle
HTML :
<div id="piechart1" style="width: 900px; height: 500px;"></div>
JS :
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
chartArea: {'backgroundColor':'red'}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
Any clue ?
Thanks a lot.
Referring to the official documentation
https://developers.google.com/chart/interactive/docs/gallery/piechart#exploding-a-slice
Use the slices attribute to change color of individual slice.
updated code from fiddle
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
slices: {
0: {color:'red' },
1: {color:'blue' },
2: {color:'green'},
3: {color:'black'},
4: {color:'teal'}
},
chartArea: {'backgroundColor':'red'}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
Try this:
chart.draw(data, google.charts.PieChart.convertOptions(options));
Given the following data (from Google Charts example page):
var data = ['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
How can I render just a line chart that shows sales, but on hover I get this tooltip?
2006
Sales: 660
Expenses: 540
Here is the jsbin:
http://jsbin.com/fefod/1/edit?html,js,output
Essentially I would like to use the third column as extra data for that specific data point, rather than a whole new series. I've read that I cold use "annotation" columns but unsure how I could use them. Thanks in advance.
The way to achieve what you want is to use custom tooltips. You can create a DataView that constructs these automatically for you, eg:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
tooltip: {
isHtml: true
}
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'tooltip',
properties: {
html: true
},
calc: function (dt, row) {
var year = dt.getFormattedValue(row, 0),
sales = dt.getFormattedValue(row, 1),
expenses = dt.getFormattedValue(row, 2);
return '<div class="tooltip"><span class="tooltipHeader">Year</span>: ' + year + '<br /><span class="tooltipHeader">Sales</span>: ' + sales + '<br /><span class="tooltipHeader">Expenses</span>: ' + expenses + '</div>';
}
}]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
You can use any HTML you want in the tooltips, and you'll probably want to style them as well to pretty them up.
As an alternative solution, you can draw the chart with both series, but set the options to hide the second one. Then you can set the focusTarget option to 'category' to show both series in the tooltips at the same time:
series: {
1: {
// hide this series
pointSize: 0,
lineWidth: 0,
displayInLegend: false
}
},
focusTarget: 'category'
Multiple data selections can be rolled up into tooltips using 'aggregationtarget'
an example is given below
var options = {
// Allow multiple simultaneous selections.
selectionMode: 'multiple',
// Trigger tooltips on selections.
tooltip: { trigger: 'selection' },
// Group selections by x-value.
aggregationTarget: 'category',
};
More details: https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options