Develop Reference

How can I enlarge text size of google bar chart and show x value on each bar?

Good morning everyone,
I have a problem about the size of bar chart values. The x values goes like 0,5,10,15,20,23 five by five but I want it to be like 0,1,2,3 one by one.
Another issue is, I want y values to be shown on top of each bar. If 23th bar's value is 10 it must be shown on the top of 23th bar because people should easily see the chart values from the distant.
And my last question is I want to enlarge the size of x and y values of chart but I could only enlarge labels. I couldn't find the right option.
Oh almost I forgot, I have another problem about legend. If legend is on the right side, the chart is getting smaller but I can't move legend to top or bottom. Even in the code says legend bottom it shows on the right.
my codes are here
function drawPaLoChart() {
var data = [['Hours', 'Label1', 'Label2']];
for (var i=0; i<pageload.length;i++){
data.push([pageload[i][0], pageload[i][1], pageload[i][2] ]);
}
var data = google.visualization.arrayToDataTable(data);
var options = {
'fontSize': 30,
chart: {
'width': 600,
title: 'Hourly Page Load Times',
},
legend: { position: 'bottom' },
bar: { groupWidth: "100%" },
backgroundColor: {fill: 'transparent'},
chartArea: {
backgroundColor: 'transparent'
},
'tooltipFontSize':22
};
var chart = new google.charts.Bar(document.getElementById('palochart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}

to add labels to the bar, you need to add an annotation column role to the data table.
however, you are using a material bar chart.
column roles, along with several other options, are not supported by material charts.
see --> Tracking Issue for Material Chart Feature Parity
material = google.charts.Bar -- packages: ['bar']
classic = google.visualization.ColumnChart -- packages: ['corechart']
using a classic chart, we can use a data view to add the annotation column role.
see following snippet...
function drawPaLoChart() {
var data = [
['Hours', 'Label1', 'Label2']
];
for (var i = 0; i < pageload.length; i++) {
data.push([pageload[i][0], pageload[i][1], pageload[i][2]]);
}
var data = google.visualization.arrayToDataTable(data);
var options = {
fontSize: 30,
width: 600,
title: 'Hourly Page Load Times',
legend: {
position: 'bottom'
},
bar: {
groupWidth: "100%"
},
backgroundColor: {
fill: 'transparent'
},
chartArea: {
backgroundColor: 'transparent'
},
tooltipFontSize: 22
};
var chart = new google.visualization.ColumnChart(document.getElementById('palochart'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
role: 'annotation',
type: 'string'
}]);
// use data view to draw chart
chart.draw(view, options);
}

Google Charts tooltip trigger on hover value label

I have a problem with Google Charts.
I have a bar chart with some big and small values. The bars also have a value label. If I hover the bars, the tooltip will be shown. But when I hover the value label (inside or outside the bar), no tooltip is shown. So i have no possibility to show the tooltip on very small bars.
Simplified Example:
https://jsfiddle.net/2d0kbLnm/40/
Do you know how to tell Google Charts to show the tooltip on hover the value labels?.
A focusTarget: 'category' enforces further informations on the tooltip, that i don't want. The x-Axis value (with a blue dot) and the y-Axis title are inserted in the tooltip. Can I prevent this? I want only show my html value. Furthermore the tooltip also hides on hovering the value label.
Thank you for any help and ideas.
heiwil

there is another column role that will show additional text on hover of the annotation,
it is --> role: 'annotationText'
it is not necessarily a tooltip, and will not display html,
but does appear when the annotation is hovered.
this is the only "standard" option available.
see following working snippet,
the 'annotationText' is added in a data view calculated column,
so the content may be built dynamically.
hover the annotation to see the result.
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Element', 'Saldo', {role: 'style', type: 'string'}, {role: 'annotation', type: 'string'}],
['Element 1', 60000.15, '#3949AB', '60,000.15 CHF'],
['Element 2', 14.87, '#3D5AFE', '14.87 EUR'],
['Element 3', -13451.31, '#cc0000', '-13,451.31 EUR'],
['Element 4', 0, '#42A5F5', '0 CHF']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, {
calc: function (dt, row) {
return dt.getValue(row, 0) + ' - ' + dt.getColumnLabel(1) + ': ' + dt.getFormattedValue(row, 1);
},
role: 'annotationText',
type: 'string'
}]);
var options = {
legend: {
position: 'none'
},
hAxis: {
logscale: true
},
vAxis: {
gridlines: {
color: 'transparent'
},
textPosition: 'none'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div')
);
chart.draw(view, options); // <-- use view to draw chart
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

background color change of a tooltip in google maps

I am using google chart. now on hovering countries i am showing a tooltip which is fetching data from backend and showing. Now the background color of that tooltip I want to change. By default it is white
here is code
activity_chartdata = new google.visualization.DataTable();
activity_chartdata.addColumn('string', 'Country');
activity_chartdata.addColumn('number', 'Activity');
activity_chartdata.addColumn({type: 'string', role: 'tooltip'}); //
activity_chart = new google.visualization.GeoChart(document.getElementById('social_activity_map_chart_div'));
var mapData = data['Payload'][0]['mapDataPoints'];
jQuery.each(mapData, function (index, value) {
activity_chartdata.addRow([{
v: value['shortCode'],
f: value['countryName']
},parseFloat(value['activityCount']), "Activity: " + reformatNumber(value['activityCount'])]);
});
var options = {
colorAxis: {colors: colorArray},
showZoomOut: "true",
//backgroundColor: '#CBD0D1',
datalessRegionColor: '#ffffff',
defaultColor: '#ffffff',
zoomOutLabel: 'Zoom Out',
keepAspectRatio: true,
height: finalHeight
};
activity_chart.draw(activity_chartdata, options);

Try giving the tooltips a style like this:
g>g>path[fill="#ffffff"] {
fill: #000;
}

Please, look at the official documentation. You can find there some examples.
You have to specify tooltip.isHtml: true in the chart options
Mark an entire column, or a specific cell, in the data table with the html custom property. A datatable column with the tooltip role and HTML property would be:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

Refer this link..
You can use custom tooltip.

google charts: vary colors based on names in linechart

from this http://jsfiddle.net/QHJA6/161/ fiddle im tryin to display different colors based on different names say for
'FOO' blue
'BAR' yellow
'BAZ' green
...
and the values might vary for them ...
SO home my data looks is
[1,'FOO', 5]
[2,'BAR', 10]
[3,'BAZ', 7]
....
....
thus the colors will follow the first value, but the value to plot will be different...

That jsfiddle example is obsolete, as the Visualization API now allows specifying colors for individual columns using the "style" column role, which is much simpler. Given a DataTable with 3 columns (x-value, category, y-value), you can create a map of values to colors and use a DataView to set the column colors:
var colorMap = {
FOO: '#0000ff',
BAR: '#00ff00',
BAZ: '#ffff00'
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 2, {
type: 'string',
role: 'style',
calc: function (dt, row) {
return colorMap[dt.getValue(row, 1)];
}
}]);
see working example: http://jsfiddle.net/asgallant/aPh8Z/

You have to set colors in your options.
Try:
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, {
legend: 'none',
isStacked: true,
height: 300,
width: 800,
colors:['blue','yellow','green'] //ADD THIS
});
And then the each column will have the color you have specified.
For example here first column will be blue,second will be yellow and so on
DEMO

Customizing Google Charts to display text/number in charts

I am using Google API for generating graphs.
My current Output is :
I want to display text/number in the bar as like below.. I could not find /missing the options to do it. Please let me know... Please do not say it not possible as it is 3rd party API. Its possible as they have done it for other Bar Charts... Link Here
Here is my code.
//Bar Chart
var data_bar = google.visualization.arrayToDataTable([
['Unit Tested','Passed', 'Failed', 'NA' ],
['BTEQ', 100, 20, 3, ]
]);
var options_bar = {
width: 400,
height: 75,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
series: [{color: '#32B232',visibleInLegend: false}, {color: 'red',visibleInLegend: false}, {color: '#FFD732',visibleInLegend: false}]
};
var chart_bar = new google.visualization.BarChart(document.getElementById('chart_div'));
chart_bar.draw(data_bar, options_bar);
//end of bar chart..

You've actually mentioned the link to the solution yourself:
https://developers.google.com/chart/interactive/docs/gallery/barchart#Labels
Basically you need to add the following code similar to the DataView() mentioned in the link above, but now for every column of the data.
var view = new google.visualization.DataView(data_bar);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2,
{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" },
3,
{ calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation" }
]);
Edit: to answer your question: the 0,1,2,3 refer to the columns of the data. In order for the annotation to appear the data from the columns (sourceColumn: 1), is transformed to a string with JSON function stringify() (calc: "stringify"). Note that with setColumns() you can use the data multiple times. [0,1,1,1,2,3] would mean that 100 is used three times in the DataView(). Here every column is used once to see the bar and the second time it is transformed to a string and used as annotation.
Your own solutions, although shorter code is more of a hack. Since you enter the data twice. This becomes a problem when you import the data from an external source.

Here is my working answer...
var data_bar = google.visualization.arrayToDataTable([
['Unit Tested','Passed',{ role: 'annotation' }, 'Failed',{ role: 'annotation' }, 'NA',{ role: 'annotation' } ],
['BTEQ', 100,'100', 20,'20', 3,'3' ]