I have a google scatter, and I would like when mouse is over on circle then open a info window containing a custom string.
for example in tutorial https://developers.google.com/chart/interactive/docs/events#Event_Listeners
when click on circle open a info window with a custom string.
Thanks
EDIT:
I try this code:
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number', 'SVD1');
dataTable.addColumn('number', 'SVD2');
dataTable.addColumn('number', 'SVD3');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
[2010, 600, null ,'test1'],
[2011, 1500, null , 'test2'],
[2012, null, 800, 'test3'],
[2013, null, 1000, 'test4']
]);
var options = {
tooltip: {isHtml: true},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
Using tooltip the Strings "test 3" and "test4" appear right. The string "test1" and " "test2" disappear. Why???
I found it!!! Βelow give a solution to the problem.
Sample Code:
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number', 'SVD1');
dataTable.addColumn('number', 'SVD2');
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addColumn('number', 'SVD3');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addRows([
[2010, 600, 'test1' ,null, null],
[2011, 1500, 'test2' ,null, null ],
[2012, null, null, 800, 'test3'],
[2013, null, null, 1000, 'test4']
]);
var options = {
tooltip: {isHtml: true},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
Related
I hope this question can be understood as I find this topic rather tricky to explain. What I am looking for is a solution for a Google (Column) Chart, in which the chart shows both, X-Axis and legend with values, like a pie chart sometimes does. Most examples I found simply turned off the legend, though.
Here is what I got so far: First example of the fitting x axis:
The legend just shows 'Density', which makes sense, but I am looking for all the metals in the legend as well. So I switched the order of the dataset, to end up with this one:
And here the x axis shows density instead of the metals. So what I am looking for is something like this:
Either way, be it the manipulation of the legend or the manipulation of the axis works for me. Any ideas how to proceed?
Sources
First version
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
My Fiddle: https://jsfiddle.net/927pjLvb/2/
Second version:
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Copper", "Silver", "Gold", "Platinum"],
["Density", 8.94, 10.49, 19.30, 21.45],
]);
var view = new google.visualization.DataView(data);
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" },
4,
{ calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation" }
]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
bar: {groupWidth: "95%"},
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
My fiddle: https://jsfiddle.net/8jaL9kf3/
starting with the second version, leave the x-axis label blank.
var data = google.visualization.arrayToDataTable([
['Element', 'Copper', 'Silver', 'Gold', 'Platinum'],
['', 8.94, 10.49, 19.30, 21.45]
]);
on the chart's 'ready' event,
copy the labels from the legend,
and place them under the bars,
using chart method --> getChartLayoutInterface()
the layout interface has method --> getBoundingBox(id)
this method returns the coordinates of chart elements,
by passing the id of the element.
in this case, we want to know the coordinates of the bars.
the id of each bar is structured as follows.
'bar#0#0' // <-- first bar
where the first 0 is the series number, and the second row number.
once we know the coordinates of the bars,
we can place the copied labels under them.
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Element', 'Copper', 'Silver', 'Gold', 'Platinum'],
['', 8.94, 10.49, 19.30, 21.45]
]);
var view = new google.visualization.DataView(data);
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'
}, 4, {
calc: 'stringify',
sourceColumn: 4,
type: 'string',
role: 'annotation'
}]);
var options = {
title: 'Density of Precious Metals, in g/cm^3',
width: 600,
height: 400,
colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
bar: {groupWidth: '95%'},
};
var container = document.getElementById('columnchart_values');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function (gglClick) {
// chart svg
var svg = container.getElementsByTagName('svg')[0];
// chart layout
var chartLayout = chart.getChartLayoutInterface();
// get all chart labels, chart title will be first, legend labels next
var labels = container.getElementsByTagName('text');
// process each series in the data table
for (var series = 1; series < data.getNumberOfColumns(); series++) {
// get bar bounds
var barBounds = chartLayout.getBoundingBox('bar#' + (series - 1) + '#0');
// copy legend label
var barLabel = labels[series].cloneNode(true);
// padding above label
var labelPadding = 4;
// center align label
barLabel.setAttribute('text-anchor', 'middle');
// set label x,y coordinates
barLabel.setAttribute('x', barBounds.left + (barBounds.width / 2));
barLabel.setAttribute('y', barBounds.top + barBounds.height + parseFloat(barLabel.getAttribute('font-size')) + labelPadding);
// add label to chart svg
svg.appendChild(barLabel);
}
});
chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
note: the above example assumes the chart will have a title option.
I'm creating a Google GeoChart Map and I can customize the tooltip, but I can't seem to get rid of the name of region in it. I'm creating a map of Poland and Google GeoChart Map uses ISO 3166-2 standard for regions and it shows the code of the province in the tooltip which just looks bizarre.
This is the code
function drawRegionsMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Województwo');
data.addColumn('number', 'Frekwencja');
data.addColumn({type: 'string', role: 'tooltip', p:{html:true}}, 'ToolTip');
data.addRows( [
['PL-DS', 60, '<p>Dolnośląskie</p>60%'],
['PL-KP', 62, '<p>Kujawsko-Pomorskie</p>62%'],
['PL-LU', 59, '<p>Lubelskie</p>59%'],
['PL-LB', 61, '<p>Lubuskie</p>61%']
])
var options = {
region: 'PL',
resolution: 'provinces',
datalessRegionColor: 'transparent',
displayMode: 'regions',
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
And I end up with something like this:
you can use object notation for data table values
you can provide both the value (v:) and formatted value (f:)
{v: 'PL-DS', f: ''}
the tooltip will display the formatted value by default,
supply a blank string to remove it from the tooltip...
see following working snippet...
google.charts.load('current', {
packages: ['geochart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Województwo');
data.addColumn('number', 'Frekwencja');
data.addColumn({type: 'string', role: 'tooltip', p:{html:true}}, 'ToolTip');
data.addRows([
[{v: 'PL-DS', f: ''}, 60, '<p>Dolnoslaskie</p>60%'],
[{v: 'PL-KP', f: ''}, 62, '<p>Kujawsko-Pomorskie</p>62%'],
[{v: 'PL-LU', f: ''}, 59, '<p>Lubelskie</p>59%'],
[{v: 'PL-LB', f: ''}, 61, '<p>Lubuskie</p>61%']
]);
var options = {
region: 'PL',
resolution: 'provinces',
datalessRegionColor: 'transparent',
displayMode: 'regions',
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div"></div>
When I select one point at chart, tooltip html content is correct, but when select 2 and more points, tooltips merge in one and html of each one is visible. Are smbd know what i do wrong ? Can smbd help me ?
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time');
data.addColumn('number' , "id");
data.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
var dataArray = [];
tooltipContent = "<div class='google-chart-tooltip'><center class='google-chart-tooltip-date'>Date: " + date + "</center><br /><p>Value1: " + value1 + ";<br />Value2: " + value2 + ".</p></div>";
//fill dataArray
data.addRows(dataArray);
}
var currentChartOptions = {
tooltip: {
isHtml: true,
trigger: 'selection'
},
selectionMode: 'multiple',
interpolateNulls: true,
hAxis: {
title: 'Time'
},
vAxis: {
title: "Values"
}
};
Follows an image of the issue:
looks like a bug, from what i can tell, code looks fine
there are no missing options or anything like that
and it is easily replicated, as in the following example
you could use aggregationTarget: 'none' to force each tooltip to be shown separately
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time');
data.addColumn('number' , 'id');
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
var dataArray = [
[new Date(2016, 11, 18), 1000, 400],
[new Date(2016, 11, 19), 1170, 1170],
[new Date(2016, 11, 20), 660, 1120],
[new Date(2016, 11, 21), 1030, 540]
];
dataArray.forEach(function (row) {
data.addRow([
row[0],
row[1],
'<div class="google-chart-tooltip"><center class="google-chart-tooltip-date">Date: ' + row[0] + '</center><br /><p>Value1: ' + row[1] + ';<br />Value2: ' + row[2] + '.</p></div>'
]);
});
var currentChartOptions = {
aggregationTarget: 'none',
tooltip: {
isHtml: true,
trigger: 'selection'
},
selectionMode: 'multiple',
interpolateNulls: true,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Values'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, currentChartOptions);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
i am using google chart api to show a chart on a bootstrap modal with framework Laravel, i'm having an issue because i'm not beein able to change the colour of the bar and put one blue and the other one green, another issue is that at the right it only put me the name of une of the bars(RX).
Here is my js code:
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
// google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart(nombre, unidad, tipo, valor, media) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'RX');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
['Tú', parseInt(valor), valor+' '+unidad],
['Media', parseFloat(media), parseInt(media)+' '+unidad],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,1,2]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, {
// height: 400,
// width: 600,
series: {
0: {
type: 'bars'
},
1: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
maxValue: 100,
minValue: 0,
}
});
$("#myModalLabel").empty();
$("#myModalLabel").append(tipo+" - "+nombre);
$("#modalChart").modal();
}
Here is the chart that i get:
you can write your drawchart function like this
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
For more https://developers.google.com/chart/interactive/docs/gallery/columnchart#labeling-columns
I have to create a line chart where a few of the points have tooltips or other balloons/captions/texboxes with information about the point. They must always be displayed, not only on mouse over. Basically a google annotation chart, but with the data on the chart.
I tried the code below, which doesn't even show the tooltip as it should. Any thoughts, or should I choose a different technology? Thanks.
google.load('visualization', '1.1', { packages: ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Score');
data.addColumn({type: 'string', role: 'tooltip' });
data.addRows([
[1, 37, 'This score occurred in Texas in 1959.'],
[2, 30, ''],
[3, 25, ''],
]);
var options = {
chart: {
title: 'Important Chart',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
legend: 'none',
axes: {
x: {
0: { side: 'top' }
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, options);
}
You would want to use role:'annotation' instead of role: 'tooltip'. Annotation allows you to display the text without any user interaction. See the documentation on annotationRole for more info.
Working Code: http://jsfiddle.net/wkyg2brg/
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Score');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
[1, 37, 'This score occurred in Texas in 1959.'],
[2, 30, ''],
[3, 25, ''],
]);
var options = {
chart: {
title: 'Important Chart',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
legend: 'none',
axes: {
x: {
0: { side: 'top' }
}
}
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data,options);
}