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

Color issues in Google Charts Bar

I can not generate different colors in google charts bars. The data is coming from a variable data.addRows([[${golLog}]]); and I realized that inside this variable has an array. It looks like he throws only the first color for the two bars.
Here is code for understanding:
google.charts.load('current', {
'packages' : [ 'corechart','bar' ]
});
google.charts.setOnLoadCallback(golLog);
function golLog() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Qtd');
data.addColumn('number');
data.addRows([[${golLog}]]);
var options = {
chart: {
left:0,
top:40,
width:'100%',
height:'100%'
},
title: 'GOL',
legend: { position: 'none' },
theme: 'material',
fontSize: 20,
colors:['#fc1700','#212e84']
};
var chart = new
google.charts.Bar(document.getElementById('chart_golLog'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<div id="chart_golLog"></div>
Image
Dados que estão na variável

Google charts with tooltips and colors

I have seen one post which shows how to make color but it uses a method which is i didnt understand and its little dificult for me. im using this method in fiddle which is easy But it didnt work HTML inside tooltips .
google.charts.load('current', {'packages':['corechart','bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Statistics', 'Amount', { role: 'style' } , { role: 'tooltip' }],
['Categories', 5, '#D9534F' , "<img src='https://upload.wikimedia.org/wikipedia/commons/5/52/Xylocopa_virginica_male_face.jpg' width='40px' height = '40px'/>"],
['Posts', 4, '#337AB7' , 'my tooltip'],
['Comments', 8, '#5CB85C' ,'<div>fff</div>'],
['Users', 3, '#F0AD4E' , '<b>hhh</b>'],
]);
var options = {
chart: {
title: 'Analysis',
tooltip: { isHtml: true},
subtitle: '',
},
/* colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], // Another coloring method*/
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.visualization.BarChart(document.getElementById('barchart_material'));
chart.draw(data, options);
}
Js Fiddle here
thanks , hope if someone have a question i can edit and add something before votingdown :) .

first, need to understand difference between Classic and Material charts...
Classic = google.visualization.BarChart -- packages: ['corechart']
Material = google.charts.Bar -- packages: ['bar']
Material charts do not support column roles -- {role: 'style'} , {role: 'tooltip'}
next, there are two things needed for html tooltips on a Classic chart...
1) a property on the column must exist -- {role: 'tooltip', p: {html: true}}
2) and the chart option -- tooltip: { isHtml: true}
however, it should not be within the chart option, which is for Material charts only
(remove chart: {})
var options = {
title: 'Analysis',
tooltip: { isHtml: true}
};
see following working snippet...
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Statistics', 'Amount', {role: 'style'} , {role: 'tooltip', p: {html: true}}],
['Categories', 5, '#D9534F' , "<img src='https://upload.wikimedia.org/wikipedia/commons/5/52/Xylocopa_virginica_male_face.jpg' width='40px' height = '40px'/>"],
['Posts', 4, '#337AB7' , 'my tooltip'],
['Comments', 8, '#5CB85C' ,'<div>fff</div>'],
['Users', 3, '#F0AD4E' , '<b>hhh</b>'],
]);
var options = {
title: 'Analysis',
tooltip: { isHtml: true}
};
var chart = new google.visualization.BarChart(document.getElementById('barchart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart"></div>

Moving annotations on Bar Chart with Negative Values Google Chart

I am using google charts within an MVC project.
I am looking to implement a bar chart that has negative values.
I would like the annotations on the negative portion of the chart to be on the same side as the end of the bar (just like the positive, see image below, green box is where I would like annotations to be).
I cant seem to find any documentation on how this can be achieved.
Is it possible to move the annotation to the other side?

there are no standard config options that will move the annotations
but you can move them manually
however, the chart will actually move them back whenever activity occurs,
such as on bar hover
have to use a MutationObserver, or something, to keep them there
use chart methods --> getChartLayoutInterface().getXLocation(value)
to find the location
also, need to adjust the axis window to leave room for the labels
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
cols: [
{label: 'x', type: 'string'},
{label: 'y0', type: 'number'},
],
rows: [
{c:[{v: 'Omega'}, {v: -0.95}]},
{c:[{v: 'Large'}, {v: -0.92}]},
{c:[{v: 'Medium'}, {v: 2.76}]},
{c:[{v: 'Tiny'}, {v: 2.03}]}
]
});
var options = {
annotations: {
alwaysOutside: true,
stem: {
color: 'transparent'
},
textStyle: {
color: '#000000'
}
},
hAxis: {
// leave room for annotation
viewWindow: {
min: data.getColumnRange(1).min - 1
}
},
legend: {
position: 'none'
}
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var container = document.getElementById('chart');
var chart = new google.visualization.BarChart(container);
// move annotations
var observer = new MutationObserver(function () {
$.each($('text[text-anchor="start"]'), function (index, label) {
var labelValue = parseFloat($(label).text());
// only negative -- and -- not on tooltip
if ((labelValue < 0) && ($(label).attr('font-weight') !== 'bold')) {
var bounds = label.getBBox();
var chartLayout = chart.getChartLayoutInterface();
$(label).attr('x', chartLayout.getXLocation(labelValue) - bounds.width - 8);
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
chart.draw(view, options);
},
packages: ['corechart']
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></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.