Google Charts (GeoChart) - Europe region doesn't display correctly - javascript

I'm struggling to find out why geochart map cuts top of the map when using the Europe region.
For example Finland does not show up completely.
Has anyone ever encountered such problem?
Code
$(document).ready(function() {
google.charts.load('visualization', '1', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'ColorIndex'],
['fi', 2],
['ee', 1],
['gb', 2],
['at', 2],
['dk', 2],
['es', 2]
]);
var opts = {
region: '150',
displayMode: 'regions',
resolution: 'countries',
width: 480,
height: 320,
enableRegionInteractivity: true,
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
legend: 'none',
tooltip : { trigger : 'none' },
colorAxis: {
values: [1, 2, 3],
colors: ['#050b55', '#003399', '#eb5f0f']
}
};
var container = document.getElementById('visualization');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, opts);
}
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization" style="width:100%; height:200px"></div>

Related

Google Chart color of gridline margin

What option from Google Chart Api change the color of that lines?

use option --> baselineColor
on either / both --> hAxis, vAxis
var options = {
hAxis: {
baselineColor: 'magenta',
},
vAxis: {
baselineColor: 'magenta',
}
};
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y'],
[0, 1],
[1, 2],
[2, 3],
]);
var options = {
hAxis: {
baselineColor: 'magenta',
},
vAxis: {
baselineColor: 'magenta',
}
};
var chart = new google.visualization.LineChart(
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 have different colors for different value range in simple Google Line Charts?

Here is my JS Fiddle. From the values I have specified in the Y-Axis, 0, 10, 23, 17, 18 etc, I want the line from 0-10 to have a different color, 10-23 to have a different color, 23-17 a different color.
https://jsfiddle.net/pyvqcbou/
Here is my JS. I tried adding colors to various places but I was unable to do so. How do I go about it?
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
]);
var options = {
height: 152,
legend: 'none',
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none',
colors: ['#ff926c'],
dataOpacity: 0.7,
hAxis: {
textPosition: 'none'
},
vAxis: {
textPosition: 'none',
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

use a style column, see following working snippet...
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addColumn({type: 'string', role: 'style'});
data.addRows([
[0, 0, 'red'], [1, 10, 'blue'], [2, 23, 'green'], [3, 17, 'orange'], [4, 18, 'purple'], [5, 9, 'black'],
]);
var options = {
height: 152,
legend: 'none',
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none',
colors: ['#ff926c'],
dataOpacity: 0.7,
hAxis: {
textPosition: 'none'
},
vAxis: {
textPosition: 'none',
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google chart can only display once upon running the app

My google chart can only be loaded once when I run the app. when I navigate to other pages and go back to the page which has the google chart, the chart will not display. I have to refresh or run the app again in order to display the chart.
<section>
<html>
<div class="container"></div>
<div id="columnchart_values" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Week", "# of F2F=0"],
["WK1", 9],
["WK2", 5],
["WK3", 6],
["WK4", 0],
["WK5", 0],
["WK6", 0],
["WK7", 0],
["WK8", 0],
["WK9", 0],
["WK10", 0],
["WK11", 0],
["WK12", 0]
]);
var view = new google.visualization.DataView(data);
var options = {
title: "Dashboard",
titleTextStyle: {
fontSize: 21
},
'backgroundColor': 'transparent',
width: 1600,
height: 650,
bar: {groupWidth: "70%"},
legend: { position: "top" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
<div id="piechart_3d" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Calls', 'People'],
['F2F = 0', 6],
['1 < F2F < 5', 8],
['F2F > 9', 5]
]);
var options = {
title: 'Period: 2QWK3',
titleTextStyle: {
fontSize: 21
},
'backgroundColor': 'transparent',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</html>
</section>

Call the required script on window.onload and call a empty function on window.onunload
<script src="https://www.gstatic.com/charts/loader.js"></script>
<section>
<html>
<div class="container"></div>
<div id="columnchart_values" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
window.onload = function() {
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Week", "# of F2F=0"],
["WK1", 9],
["WK2", 5],
["WK3", 6],
["WK4", 0],
["WK5", 0],
["WK6", 0],
["WK7", 0],
["WK8", 0],
["WK9", 0],
["WK10", 0],
["WK11", 0],
["WK12", 0]
]);
var view = new google.visualization.DataView(data);
var options = {
title: "Dashboard",
titleTextStyle: {
fontSize: 21
},
'backgroundColor': 'transparent',
width: 1600,
height: 650,
bar: {
groupWidth: "70%"
},
legend: {
position: "top"
},
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
};
window.onunload = function(){};
</script>
<div id="piechart_3d" style="width: 1200px; height: 700px;"></div>
<script type="text/javascript">
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Calls', 'People'],
['F2F = 0', 6],
['1 < F2F < 5', 8],
['F2F > 9', 5]
]);
var options = {
title: 'Period: 2QWK3',
titleTextStyle: {
fontSize: 21
},
'backgroundColor': 'transparent',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</html>
</section>

Changing position of points on the scatter plots on mouse click

I am using google charts and following is the script that is available on google.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
title: 'Age vs. Weight comparison',
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
What I want is that on mouse click when I click the position of the dots and change it to new location then that position gets updated on the chart and corresponding array values also gets updated.How to approach this sort of problem? only a generic idea would suffice for me.

Show selected countries without data

I want to highlight specific countries, but not show the data when you hover over the country. In reality this needs to be a true/false type data.
var data = google.visualization.arrayToDataTable([
['Country','Active'],
['Germany',1],
['United States',1],
['Brazil',1],
['Canada',1],
['France',1],
['Russia',1]
]);
How do I get it to not display the "Active" data on hover? If I don't include a second column in that data array, nothing shows.
Example:
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country','Active'],
['Germany',1],
['United States',1],
['Brazil',1],
['Canada',1],
['France',1],
['Russia',1]
]);
var options = {
legend: 'none',
backgroundColor: '#f1f1f1',
colorAxis: {colors: ['#052c60']},
datalessRegionColor: '#FFFFFF'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>
<div id="regions_div" style="width: 1600px; height: 500px;"></div>

Per the documentation, set tooltip.trigger to 'none'
var options = {
legend: 'none',
backgroundColor: '#f1f1f1',
colorAxis: {colors: ['#052c60']},
datalessRegionColor: '#FFFFFF',
tooltip: {trigger:'none'}
};
fiddle
code snippet:
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Active'],
['Germany', 1],
['United States', 1],
['Brazil', 1],
['Canada', 1],
['France', 1],
['Russia', 1]
]);
var options = {
legend: 'none',
backgroundColor: '#f1f1f1',
colorAxis: {
colors: ['#052c60']
},
datalessRegionColor: '#FFFFFF',
tooltip: {
trigger: 'none'
}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>
<div id="regions_div" style="width: 1600px; height: 500px;"></div>

Categories

Resources