Una forma de hacerlo sería utilizando una imagen del mapa y mediante figuras sobre él poner las etiquetas con los datos.
Otra forma, sería aprovechar esa gran herramienta de ActivInspire llamada HTML incrustado… junto con el código que podemos encontrar en Google Developers. Esta página está en inglés y muestra información para desarrolladores que quieren utilizar las herramientas de Google.
Voy a enseñaros la forma más simple de utilizar la herramienta denominada Geochart que es la que nos ayudará con nuestros gráficos.
Copiamos el siguiente código de ejemplo dentro de la ventana de HTML incrustado…
<html>
<head>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['País', 'Visitas'],
['Spain', 22633],
['Mexico', 6816],
['Colombia', 5502],
['Chile', 3392],
['Argentina', 3045],
['Ecuador', 2417],
['Peru', 1934],
['Venezuela', 1760],
['Guatemala', 1344],
['United States', 615]
]);
var options = {
colorAxis: {colors: ['#FFA500']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="height: 500px; width: 900px;">
</div>
</body>
</html>A continuación sustituimos la palabra Visitas por la que corresponde a nuestros datos por ejemplo, si quisiéramos mostrar el número de habitantes pondríamos Población. Después, modificaremos los datos de la columna País, escribiendo el nombre del país que queramos mostrar. Utilizaremos el nombre del país o su código que encontraremos en esta página ISO-3166-1. Luego, al lado, escribiremos el dato. Podemos añadir más países añadiendo una coma después del último y escribiéndolos de la misma forma que los anteriores.
Finalmente, donde pone colorAxis, escribiremos el color (hexadecimal) de los países que contienen datos. Este será una gradación desde el valor más bajo al más alto.
Si quisiéramos una gradación diferente añadimos un color más y quedaría de la siguiente forma:
colorAxis: {colors: ['#7B68EE', '#FF0000']}
Mi ejemplo:
Si ponemos el puntero del ratón sobre los países coloreados veremos una etiqueta con la información.
En un próximo artículo veremos cómo crear estos gráficos con las ciudades de un país.
