Hyperlinks on Google GeoChart with Markers - javascript

I do have this on my website running:
<script type='text/javascript' src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: drawVisualization,
packages:['geochart']
});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country','Link',],
['United States','https://proyectoviajero.com/destinos/america-del-norte/guia-viaje-estados-unidos/'],
['Japan','https://www.proyectoviajero.com'],
['Saint Lucia','https://www.proyectoviajero.com'],
['Peru','https://proyectoviajero.com/destinos/america-del-sur/guia-viaje-peru/'],
['Chile','https://proyectoviajero.com/destinos/america-del-sur/guia-viaje-chile/'],
['Argentina','https://proyectoviajero.com/destinos/america-del-sur/guia-viaje-argentina/'],
['Bolivia','https://proyectoviajero.com/destinos/america-del-sur/guia-viaje-bolivia/'],
['Brazil','https://proyectoviajero.com/destinos/america-del-sur/guia-viaje-brasil/'],
['Spain','https://proyectoviajero.com/destinos/europa/guia-viaje-espana/'],
['Portugal','https://www.proyectoviajero.com'],
['Italy','https://www.proyectoviajero.com'],
['Belgium','https://www.proyectoviajero.com'],
['France','https://www.proyectoviajero.com'],
['Germany','https://www.proyectoviajero.com'],
['United Kingdom','https://www.proyectoviajero.com'],
['Poland','https://www.proyectoviajero.com'],
['Ukraine','https://www.proyectoviajero.com'],
['Hungary','https://proyectoviajero.com/destinos/europa/guia-viaje-hungria/'],
['Czechia','https://www.proyectoviajero.com'],
['Turkey','https://www.proyectoviajero.com'],
['Morocco','https://proyectoviajero.com/destinos/africa/guia-viaje-marruecos/'],
['Western Sahara','https://proyectoviajero.com/destinos/africa/guia-viaje-marruecos/'],
['Tunisia','https://www.proyectoviajero.com'],
['Switzerland','https://www.proyectoviajero.com'],
['Finland','https://www.proyectoviajero.com'],
['Estonia','https://proyectoviajero.com/destinos/europa/guia-viaje-estonia/'],
['Iceland','https://proyectoviajero.com/destinos/europa/guia-viaje-islandia/'],
['Philippines','https://www.proyectoviajero.com'],
['Greece','https://www.proyectoviajero.com'],
['Bulgary','https://www.proyectoviajero.com'],
['Croatia','https://www.proyectoviajero.com'],
['Brunei','https://proyectoviajero.com/destinos/asia/guia-viaje-brunei/'],
['Qatar','https://proyectoviajero.com/destinos/asia/guia-viaje-qatar/'],
['United Arab Emirates','https://proyectoviajero.com/destinos/asia/guia-viaje-emiratos-arabes/'],
]);
var view = new google.visualization.DataView(data);
view.hideColumns([1]);
var options = {
backgroundColor: 'white',
datalessRegionColor: '#F5F5F5',
defaultColor: '#ffc17f',
displayMode: 'regions',
tooltip: {textStyle: {color: '#222222'}, trigger:'focus',isHtml: true},
legend: 'none',
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', myClickHandler);
chart.draw(view, options);
function myClickHandler(){
var selection = chart.getSelection();
if (selection.length > 0) {
var link = data.getValue(selection[0].row, 1);
window.open(link, '_blank');
}
}
}
</script>
I am trying to plot a country (i.e. Spain) with two markers (i.e Madrid and Barcelona as a red circle) with hyperlinks to an external webpage.
But I do not know how to modify it. Basically I am trying to reach the same result in THIS webpage.
Can anyone help me please? Thanks!

Related

Dynamically change Google Chart Gauge data and colors based on cell value

I'm making a dashboard in Google Spreadsheet and would like to use cell data. Now you need to hard code the data and the values for redFrom, redTo etc etc but I want them to be dynamic and dependant on a certain value in a cell. Same applies to the values shown by the gauge.
The dashboard will to track monthly income and the gauge will indicate if someone if in the green for that month based on the percentage relative to their target.
This is the standard example from google:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
['Network', 68]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 13000);
setInterval(function() {
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 5000);
setInterval(function() {
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
chart.draw(data, options);
}, 26000);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px;"></div>
</body>
</html>
So I want it to be something like this:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['A1', A2],
['B1', B2],
['C1', C2]
]);
var options = {
width: 400, height: 120,
redFrom: D1, redTo: D2,
yellowFrom:D3, yellowTo: D4,
minorTicks: 5
};
Is this possible? Thanks!
if the charts will be running in an html page,
you can query the sheet using --> google.visualization.Query
following is an example, using a sample spreadsheet --> gauge data
columns A & B are used for the gauge chart data
columns D-I are for the from / to color values
the setQuery method is used to separate the two ranges into data tables
first, get the chart data, the options data, then draw the chart...
google.charts.load('current', {
packages: ['gauge']
}).then(function () {
// get chart data
var queryChart = new google.visualization.Query('https://docs.google.com/spreadsheets/d/16IeSOMvl4-B3qFr386kjZA-vSRIHTNvSIigqyracGj0/edit#gid=0');
queryChart.setQuery('select A,B');
queryChart.send(function (responseChart) {
var dataChart = responseChart.getDataTable();
// get options data
var queryOptions = new google.visualization.Query('https://docs.google.com/spreadsheets/d/16IeSOMvl4-B3qFr386kjZA-vSRIHTNvSIigqyracGj0/edit#gid=0');
queryOptions.setQuery('select D,E,F,G,H,I');
queryOptions.send(function (responseOptions) {
var dataOptions = responseOptions.getDataTable();
var options = {
minorTicks: 5
};
options.redFrom = dataOptions.getValue(0, 0);
options.redTo = dataOptions.getValue(0, 1);
options.yellowFrom = dataOptions.getValue(0, 2);
options.yellowTo = dataOptions.getValue(0, 3);
options.greenFrom = dataOptions.getValue(0, 4);
options.greenTo = dataOptions.getValue(0, 5);
var chart = new google.visualization.Gauge(document.getElementById('chart_div'))
chart.draw(dataChart, options);
});
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How to get Google Chart legend text to appear?

For unclear reasons, our code has stopped showing the text in the legend of our google line chart.
We have tried changing the width of the chart and the chart area as mentioned in other SO posts. We also tried changing the position of legend with no effect. We are not using any custom CSS as mentioned here either. There are no errors in the console.
Any idea how to fix this to show the legend text?
HEAD:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
BODY HTML:
<div id="volume_adjusted_visits_by_month_combined"></div>
SCRIPT:
<script>
google.charts.load('current', {packages: ["corechart"]});
google.charts.setOnLoadCallback(volume_adjusted_visits_by_month_combined);
function volume_adjusted_visits_by_month_combined()
{
var data = new google.visualization.DataTable();
data.addColumn({type:'number', id:'Month'});
data.addColumn({type:'number', id:'All_Visits'});
data.addColumn({type:'number', id:'KS'});
data.addRows([
[1,1.0,0.98],[2,1.0,0.95],[3,1.0,0.95],[4,1.0,0.98],[5,1.0,1.01],[6,1.0,1.05],[7,1.0,1.14],[8,1.0,1.12],[9,1.0,1.05],[10,1.0,0.91],[11,1.0,0.96],[12,1.0,0.9],
]);
var options =
{'colors': ['#D3D3D3', 'black'], 'pointSize': 10, 'width': 600, 'vAxis': {'title': 'Ratio'}, 'title': 'Volume Adjusted Monthly Pattern of KS', 'series': {'1': {'pointShape': 'square', 'pointSize': 10}, '0': {'pointShape': 'circle', 'lineDashStyle': [10, 4], 'pointSize': 7}}, 'height': 600, 'hAxis': {'title': 'Months', 'minValue': 0, 'gridlines': {'count': -1}}}
;
var plain = document.getElementById('plain_text_set') !== null
var chart = new google.visualization.LineChart(document.getElementById('volume_adjusted_visits_by_month_combined'));
if (plain) {
var chart_div = document.getElementById('volume_adjusted_visits_by_month_combined');
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
});}
chart.draw(data, options);
}
</script>
You're missing the Labels in your columns:
data.addColumn({type:'number', id:'Month', label: 'Months'});
data.addColumn({type:'number', id:'All_Visits', label: 'Visits'});
data.addColumn({type:'number', id:'KS', label: 'KS'});

Make Two Google charts in the same page

I am triying to put two google charts of the same style, but when i try it, one is visible and one didnt appear.
So, here's the code.
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2014', 1000],
['2015', 1170],
['2016', 660],
['2017', 1030]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
What variables I need to change to make an other chart like this??
the script is looking for the id selector, in html the id is unique
so add a new div with antoher id and at the end of your script do
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
var chartOther = new google.charts.Bar(document.getElementById('columnchart_material_other'));
chart.draw(data, options);
chartOther.draw(data, options );
if you want to use a classname you could draw the same charts for all elements with class some like this:
var charts = document.getElementsByClassName("yourclass");
for (var i = 0; i < charts; i++) {
var chart = new google.charts.Bar(charts[i]);
chart.draw(data, options);
};

How to use image in background instead of color for every column in google chart?

I am using google chart. I have created a column chart. In column chart I want to show the background image instead of background color in every column. Is it possible in google chart? How can I do this? Please share with me if any one have any idea.
My jsfiddle is here: http://jsfiddle.net/8fks1edf/
In image, I have marked where I want changes.
My Codes:
<div id="e_mcf" style="height: 400px; width: 600px;"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'ABCD');
dataTable.addColumn('number', 'Percentage');
dataTable.addColumn({type: 'string', role: 'annotation'});
dataTable.addColumn({type: 'string', role: 'style'});
dataTable.addRows([
['AB', 61, '61%','#FF8B00'],
['CD', 90,'90%', '#FF2D00'],
['EF', 70,'70%','#0C8E86'],
['GH', 85,'85%','#0779CF'],
['IJ', 70,'70%','#27486B']
]);
var options = {
vAxis: {gridlines: {color: 'transparent', count: 0}, minValue: 0},
legend: 'none',
backgroundColor: { fill:'transparent' },
isStacked: true,
annotations: {
textStyle: {
fontName: 'Lucida Fax',
fontSize: 10,
bold: true,
color: '#fff',
auraColor: 'transparent',
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('e_mcf'));
chart.draw(dataTable, options);
}
</script>
Creating image via svg pattern, appending it to the def and filling with it via fill attribute.
enableInteractivity must be set to false.
window.google.visualization.events.addListener(chart, 'ready', function () {
var rectan = $('g g:first-of-type g:nth-of-type(2) rect');
var patt = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
patt.setAttribute('id', 'img1');
patt.setAttribute('patternUnits', 'userSpaceOnUse');
patt.setAttribute('width', '20');
patt.setAttribute('height', '287');
var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '../Images/bar.png');
image.setAttribute('x', '0');
image.setAttribute('y', '0');
image.setAttribute('width', '20');
image.setAttribute('height', '287');
var defs = document.getElementsByTagName('defs')[0];
patt.appendChild(image);
defs.appendChild(patt);
for (var i = 0; i < rectan.length; i++) {
rectan[i].setAttribute("fill", "url(#img1)");
}}
rectan is a rect element inside the column chart. You just need to change fill attribute for all "pie slices" after first drawing of the chart.

Unable to Show Labels in Google Scatter Chart

I seem to be unable to get this Google Chart Scatter Plot to display the score.partner as a label. I can only get them to show as tooltips.
What am I doing wrong?
drawChart: function() {
var self = this;
var gdpMin = parseFloat(self.scores[0].gdpScore);
var gdpMax = gdpMin;
var teaMin = parseFloat(self.scores[0].teaScore);
var teaMax = teaMin;
var data = new google.visualization.DataTable();
data.addColumn('number', 'GDP Score');
data.addColumn('number', 'TEA Score');
data.addColumn({type:'string', role:'label'});
$.each(self.scores, function(i, score) {
gdpScore = parseFloat(score.gdpScore);
teaScore = parseFloat(score.teaScore);
data.addRows([[gdpScore, teaScore, score.partner]]);
if (gdpScore < gdpMin) gdpMin = gdpScore;
if (gdpScore > gdpMax) gdpMax = gdpScore;
if (teaScore < teaMin) teaMin = teaScore;
if (teaScore > teaMax) teaMax = teaScore;
});
var options = {
title: 'GDP and TEA Scores',
hAxis: {title: 'GDP', minValue: gdpMin, maxValue: gdpMax},
vAxis: {title: 'TEA', minValue: teaMin, maxValue: teaMax},
legend: 'none',
colors: ['#3B7CBF']
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
From user asgallant in Google Visualization API Group:
You want to label individual points on a ScatterChart? That isn't
supported. Depending on the structure of your data, you may be able
to use a LineChart in a manner similar to a ScatterChart. See an
example here: jsfiddle.net/asgallant/YFMga/
There you have it. Labels are not supported for scatter plots using the Google Visualization API.
jqPlot may be an acceptable alternative.

Categories