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>
Related
I am developing a layered column chart using ComboChart on Angular google charts. Although I've separated two series of bar charts in two different axis, being able to find a bar in front of the other, like needed, I can't change the width of one of the series only. I want a result like the amCharts Layered Column Chart:
Layered Column Chart example
Right now, the chart looks like:
Current chart - Angular google charts
Also, if there is a way to share the same y axis while keeping one bar in front of the other, instead of staking then, it would be great.
The code I've been using for options of the angular google chart:
this.options =
{
colors: ['#1E90FF', '#f39800'],
hAxis: {
title: 'haxisTitle',
type: 'category'
},
vAxis:{
title: 'Value',
minValue: 0,
format: this.numberFormat
},
seriesType: 'bars',
bar: {1: {groupWidth: "30"}},
series:
{
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1,
}
},
vAxes: {
0: {
title: 'Altered Value',
label:'Altered Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue, // Sets the maximun value of altered or real value to the window size (both axis)
},
format: this.numberFormat,
type: 'bars'
},
1: {
title: 'Real Value',
label:'Real Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue,
},
format: this.numberFormat,
type: 'bars'
}
},
aggregationTarget: 'auto',
stackSeries: true,
isStacked : true,
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
keepInBounds: true,
maxZoomIn: 4.0
}
};
}
The chart shows the data correctly, the only problem is the layout.
Some reference that might help:
Google Developers - Visualization: Combo Chart
amCharts Layered Column chart
Overlapped bars - Stack overflow quote - Here the result was a stacked bar chart (something I don't want)
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);
}
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.
First I'd like to let it be known that although there is a similar question labeled:
Google Charts API: Always show the Data Point Values in Graph
...on the site, I can't seem to use it's solution since my chart is fed using arrayToDataTable.
Here's my code:
function drawChart1998() {
var data = google.visualization.arrayToDataTable([
['Year', 'Index Trend'],
['1/3', 1236777],
['1/7', 834427],
['1/10', 2164890],
['1/14', 1893574],
['1/17', 2851881],
['1/21', 359504],
['1/24', 2264047],
['1/28', 3857933],
['1/31', 2197402],
['2/4', 2469935],
['2/7', 1651752],
['2/11', 4710582],
['2/14', 1565803],
['2/18', 345499],
['2/21', 2817319],
['2/25', 733242],
['2/28', 1485788],
['3/4', 1091181],
['3/7', 4477498],
['3/11', 490931],
['3/14', 3905556],
['3/18', 475417],
['3/21', 1512729],
['3/25', 1782796],
['3/28', 4778434]
]);
var options = {
curveType: "function",
title: '1998 Results',
vAxis: {viewWindow: {min: 0, max: 5006386}},
hAxis: {textStyle: {color: 'black', fontName: 'verdana', fontSize: 10} },
series: {0: { pointSize: 6 }}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_1998'));
chart.draw(data, options);
}
As you can see, I managed to set the series to display the DataPoint dots but I can't seem to figure out how to incorporate the following line of code as the previous post on the site suggests in order to display the values for each DataPoint.
data.addColumn({type: 'string', role: 'annotation'});
For reference, you can input an annotation column to your DataTable using the arrayToDataTable method. Pass an object instead of a string for the column header:
var data = google.visualization.arrayToDataTable([
[/* column headers */, {type: 'string', role: 'annotation'}, /* column headers */],
// ...
]);
This works for any column role.
If you just want to display the value of a data point, you don't have to add an extra column to your DataTable. You can use a DataView to add an "annotation" column, calculated as the string-value of a source column:
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: 'stringify'
}]);
Then draw the chart using the view instead of the DataTable:
chart.draw(view, options);
My values in the vertical axis are not visible as shown in the image:
.
What could be the problem with my code?
function drawVisualization() {
google.visualization.drawChart({
containerId: 'visualization',
dataSourceUrl: 'http://www.google.com/fusiontables/gvizdata?tq=',
query: 'SELECT Environment, GirlPupils, BoyPupils, FemaleTeachers, MaleTeachers FROM 1eC4sIAgVXfFj01mOM2cDiyW2nly7TcFeIXj1G3s',
chartType: 'BarChart',
options: {
title: 'Number of Students and Teachers',
vAxis: {
title: 'Environment'
},
hAxis: {
title: 'Number'
}
}
});
}
As I can tell from the image the vertical values is actually shown! The issues is
You have a very little height set for the chart-container, trying to show a lot of bars
The fontSize for vAxis is to the opposit relatively large
There can often be problems with lack of space to the left
Change the height of the <div>-container to something that actually can hold the many bars :
<div id="visualization" style="height:1000px;"></div>
Change fontSize for the vAxis and add some space to the left by chartArea
options: {
title: 'Number of Students and Teachers',
vAxis: {
title: 'Environment',
textStyle : { fontSize : 7 }
},
hAxis: {
title: 'Number'
},
chartArea: {left: "150",top: 0 }
}
Edit :
In order to only select columns where Environment is Rural, Urban or Peri Urban, change your query to
SELECT Environment, GirlPupils, BoyPupils, FemaleTeachers, MaleTeachers
FROM 1eC4sIAgVXfFj01mOM2cDiyW2nly7TcFeIXj1G3s
WHERE Environment IN ('Rural', 'Urban','Peri Urban')
note that normal SQL syntax OR is not supported by FusionTables, you must use IN. Also strings must be in single quotes ''.