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>
Related
I am using scatter plot of Google Charts.
This is what I currently have:
I am plotting values against named entities (On X axis). The entities can have multiple Blue/Red values. Referring to the screenshot above, I would like the blue dot to plot above A1, instead of A1 getting duplicated.
Can this be done?
Here is my code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Blue Value');
data.addColumn('number', 'Red Value');
data.addRows([
['A1', 3500, 4500],
['A1', 4000, null],
['A2', 3700, 4100],
['A3', 3110, 4200],
['A4', 3600, 4300]
]);
// Set chart options
var options = {'title':'My Title',
'width':800,
'height':500};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
by default, a discrete axis (string values) will show all x-axis values,
even if they repeat
to get the desired chart, you could use a continuous axis (number values),
and use object notation to format the values and the axis labels (ticks)
object notation allows you to provide both the value (v:) and the formatted value (f:)
{v: 1, f: 'A1'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Name');
data.addColumn('number', 'Blue Value');
data.addColumn('number', 'Red Value');
data.addRows([
[{v: 1, f: 'A1'}, 3500, 4500],
[{v: 1, f: 'A1'}, 4000, null],
[{v: 2, f: 'A2'}, 3700, 4100],
[{v: 3, f: 'A3'}, 3110, 4200],
[{v: 4, f: 'A4'}, 3600, 4300]
]);
var options = {
title: 'My Title',
width: 800,
height: 500,
hAxis: {
gridlines: {
color: 'transparent'
},
ticks: [
{v: 0.5, f: ''},
{v: 1, f: 'A1'},
{v: 2, f: 'A2'},
{v: 3, f: 'A3'},
{v: 4, f: 'A4'}
]
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
How to add a point inside the Google Charts Visualization: Area chart like the red point in the picture shown above and can i put some label above or beside the point?
Here is the code that outputs the chart above
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Output1');
data.addColumn('number', 'Height');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
<?php echo"['', 2, null],"; ?>
<?php echo"['', 2, '1 Kpa ---------->'],"; ?>
<?php echo"['2', 1, '<---------- 2'],"; ?>
<?php echo"['3 σ', 0, '<---------- 3 σ']"; ?>
]);
var options = {
title: 'Total Stress',
hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}},
vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] }
};
var chart = new google.visualization.AreaChart(document.getElementById('total_stress'));
chart.draw(data, options);
}
you can use a ComboChart to combine series types
add another column to the data table for the point
in the options, define the series types, use 'scatter' for points
seriesType: 'area',
series: {
1: {
type: 'scatter'
}
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Output1');
data.addColumn('number', 'Height');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number', 'Scatter');
data.addRows([
['', 2, null, null],
['', 2, '1 Kpa ---------->', 1],
['2', 1, '<---------- 2', null],
['3 s', 0, '<---------- 3 s', null]
]);
var options = {
title: 'Total Stress',
hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}},
vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] },
seriesType: 'area',
series: {
1: {
type: 'scatter'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<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);
}
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);
}