Google geocharts with coordinates? - google-visualization

I want to use google geochart with coordinates (longtitute, latitute). But I cant find any example about this topic. There are a lot of example with region and city example. But with coordinates I Cant find.
Please, code example, link, tutorial any thing else?
Thanks.

You can check an example here:
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {var data = new google.visualization.DataTable();
data.addColumn('number', 'Lat');
data.addColumn('number', 'Long');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});
data.addRows([[41.151636,-8.569336,0,'tooltip']]);
data.addRows([[ 39.059575,-98.789062,0,'tooltip']]);
var options = {
colorAxis: {minValue: 0, maxValue: 0, colors: ['#6699CC']},
legend: 'none',
backgroundColor: {fill:'transparent',stroke:'#FFF' ,strokeWidth:0 },
datalessRegionColor: '#f5f5f5',
displayMode: 'markers',
enableRegionInteractivity: 'true',
resolution: 'countries',
sizeAxis: {minValue: 1, maxValue:1,minSize:5, maxSize: 5},
region:'world',
keepAspectRatio: true,
width:400,
height:300,
tooltip: {textStyle: {color: '#444444'}}
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi?fake=.js"></script>
<div id="visualization"></div>
There are many ways to do it, this is just one.
data.addColumn('number', 'Lat');
data.addColumn('number', 'Long');
data.addColumn('number', 'Value');
data.addColumn({type:'string', role:'tooltip'});
data.addRows([[41.151636,-8.569336,0,'tooltip']]);
data.addRows([[ 39.059575,-98.789062,0,'tooltip']]);

As said in the documentation:
Marker location [Required] The first column is a specific string
address (for example, "1600 Pennsylvania Ave"). OR The first two
columns are numeric, where the first column is the latitude, and the
second column is the longitude.
You need to define first two columns of your data set as numeric values representing latitude and longitude.

Related

Google Geochart: Highlighting by continent & country (multiple resolutions)

I would like to make a google chart that highlights different regions continents, or countries based on a particular grouping.
The problem is I can't figure the best way to show both continents and countries.
For instance, I'd like to have two highlighted entries: Europe and Japan.
I can use the below JS code to attempt this:
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Region', 'Label', {role: 'tooltip', p:{html:true}}],
['150', 1, 'Europe'],
['Japan', 2, 'Japan']
]);
var options = {
resolution: 'continents',
}
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, options);
};
The above code partly works- Europe is properly highlighted and labelled. However, because resolution is set to 'continents' Japan does not get highlighted. If I set resolution to 'countries' the opposite problem occurs.
So the real question:
Is there a way to highlight both Europe and Japan individually with one array entry each, or do I have to put every single European country in the list to also have Japan highlighted?
yes, you would need to put every single European country in the list to also have Japan highlighted
another option might be to draw two charts, one on top of the other,
using the following config options to allow the bottom one to show thru.
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
however, this would suppress the tooltip on the bottom chart.
see following working snippet for an example...
google.charts.load('current', {packages:['geochart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Region', 'Label', {role: 'tooltip', p:{html:true}}],
['150', 1, 'Europe']
]);
var options1 = {
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
resolution: 'continents'
}
var geochart1 = new google.visualization.GeoChart(
document.getElementById('visualization1')
);
geochart1.draw(data1, options1);
var data2 = google.visualization.arrayToDataTable([
['Region', 'Label', {role: 'tooltip', p:{html:true}}],
['Japan', 2, 'Japan']
]);
var options2 = {
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
resolution: 'countries'
}
var geochart2 = new google.visualization.GeoChart(
document.getElementById('visualization2')
);
geochart2.draw(data2, options2);
}
.geo {
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="geo" id="visualization1"></div>
<div class="geo" id="visualization2"></div>
note: jsapi should no longer be used to load the charts library,
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.
this will only change the load statement, see above snippet...

How to Customize the tooltip being displayed in Google Vislization charts

Please see this jsfiddle , where i am displaying Candle stick Charts for a particular Stock .
The only change i need is that i want to customize the tool tip being shown .
I just want to display the close value of the particular day .
From google i found out that i need to add something like this to achive the behaviour needed
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
But i dont see anything like data.addColumn in my code
Could you please tell me how to achieve this ??
http://jsfiddle.net/ovog4njt/5/
You're using arrayToDataTable(), so you're not individually adding the columns and rows, which is why your example doesn't make sense to you.
You can just do this:
var mydata = [
['13-Oct', 1097.95, 1113.45, 1109.95, 1132, 'tooltip'],
['14-Oct', 1095.6, 1101.15, 1113.45, 1117, 'content'],
['15-Oct', 1092.1, 1129.2, 1116, 1132, 'goes'],
['16-Oct', 1130, 1170.3, 1130, 1182.4, 'in'],
['19-Oct', 1144.5, 1162.15, 1174, 1182.2, 'here']
];
var data = google.visualization.arrayToDataTable(mydata, true);
data.setColumnProperty(5, 'role', 'tooltip');
JSFiddle
If you weren't using arrayToDataTable(), your code would look like this, which is where your example comes from.
var mydata = [
['13-Oct', 1097.95, 1113.45, 1109.95, 1132, 'tooltip'],
['14-Oct', 1095.6, 1101.15, 1113.45, 1117, 'content'],
['15-Oct', 1092.1, 1129.2, 1116, 1132, 'goes'],
['16-Oct', 1130, 1170.3, 1130, 1182.4, 'in'],
['19-Oct', 1144.5, 1162.15, 1174, 1182.2, 'here']
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Low Err');
data.addColumn('number', 'Low');
data.addColumn('number', 'High');
data.addColumn('number', 'High Err');
data.addColumn({
type: 'string',
role: 'tooltip'
});
data.addRows(mydata);

google column charts negative value to show highlighted or shaded

I am working with price value to show in google charts and i need somthing like if the value got negative then column will be highlighted or shaded.
I am using the column chart.
<script type="text/javascript">
google.load('visualization', '1.0', { 'packages': ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Price');
data.addColumn('number', 'Rent Received');
data.addColumn('number', 'Actual Profit');
data.addColumn('number', 'Total Expenses');
data.addRows([
['Property 1', 250, -80, 589.26],
['Property 2', 250, 361.14, 589.26],
['Property 3', 100, 260, 500]
]);
// Set chart options
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 }
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}
</script>
What you want to do is add a formatter. In particular, you want the ColorFormatter. This formatter "Colors a cell according to whether the values fall within a specified range."
Having said that, you might want to consider the chart type that your are using. Your legend will have one color for each column. Your requirement is to change the color of each column depending on the value... there is a conflict here.

GEO Chart Legend/Datatable

I'm wondering if it's possible to display a kind of data table in GEO Charts. I have this code:
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Count');
data.addRow(["AT",141]);
data.addRow(["BE",8]);
data.addRow(["CH",42]);
data.addRow(["DE",98]);
data.addRow(["ES",942]);
data.addRow(["GR",30]);
data.addRow(["HQ",104]);
data.addRow(["HU",30]);
data.addRow(["LU",10]);
data.addRow(["NL",153]);
data.addRow(["PL",53]);
data.addRow(["PT",102]);
data.addRow(["RU",266]);
data.addRow(["SE",13]);
data.addRow(["TR",228]);
var options = {
displayMode: 'regions',
region: '150',
colorAxis: {colors: ['#ffa3b5', 'red']},
tooltip: { textStyle: { fontName: '"Verdana"', fontSize: 14 } },
legend: {textStyle: {color: 'black', fontSize: 10}},
keepAspectRatio: false,
height: 300,
width: 550
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div_02'));
chart.draw(data, options);
}
As I have some special countries (like HQ) and Turkey (that is not in region 150), I would like to a datatable or legend to the geochart.
Is this possible or do I have to make a table charts and put it somewhere else on the website?
Cheers & Thx in Advance
Alex
You cannot add a dataTable to the geoChart using the native Google Visualization API. A GeoChart is a GeoChart and a DataTable is a DataTable. However, you can create a linked GeoChart and DataTable on the same page using the same data taking advantage of the Dashboard controls and chartwrappers.
If you get fancy with your CSS, you can even hover the <div> with the table over the GeoChart, or otherwise find a way to make it look like they are the same chart.

adding html to google chart tooltip

I'm using google chart api.
javascript code :
var data = new google.visualization.DataTable();
data.addColumn('number', 'buy');
data.addColumn('number', 'sell');
data.addColumn({type:'string', role:'tooltip'});
data.addRows( ... my data here ...
[[ 10 ,12 , "I'm very long long message in tooltip" ] [ ... and more data.
the tooltip on the chart shows "I'm very long long message in tooltip" in 1 line.
how can I make the tooltip be 50px width ... or have inside ?
You should set on OPTION object the following:
options = {
tooltip: {isHtml: true}
};
Your should also modify the line:
data.addColumn({type:'string', role:'tooltip'});
in:
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
Hope this helps.