neibol
Posts: 33
Joined: Mon Jun 19, 2017 11:33 am

Define intervals in the map legend

Hello:
I have defined a map of the Balearic Islands to show the evolution of the population. But I can not find where I can modify the intervals of the legend.

The values that it automatically puts are: 1,000, 10,000 and 100,000.
Where I would like to define the following intervals:
- Less than 2001 inhabitants
- 2001 to 10,000 inhabitants
- 10,001 to 20,000 inhabitants
- 20,001 to 40,000 inhabitants
- More than 40,000 inhabitants

I've been looking at https://api.highcharts.com/highmaps/legend, but I do not know how to do it. Can you help me?

I attach my code and capture the map.
a greeting

Code: Select all

function Mapa_Evolucion() {

	if ($('#mapas_evolucion_dibujado').val() == 1)
		return;
	if (JSONMapa_Evolucion_COMU.msg == "noJson") {
		$('#MapaEvolucion').hide();
		return;
	}

	$('#mapas_evolucion_dibujado').val("1");

	var arrayToData = null;
	var data = new google.visualization.DataTable(JSONMapa_Evolucion_COMU, 0.5);
	arrayToData = new google.visualization.DataTable();
	arrayToData.addColumn('string', 'MUNICIPIO');
	for (var i = 2; i < data.getNumberOfColumns(); i++)
		arrayToData.addColumn('number', data.getColumnLabel(i));

	$('#MapaEvolucion_Titulo').text($('#fechaReferencia_Dos').val() + data.getTableProperty("periodo"));

	var v_Fila = 0;
	var v_Columna = 1;
	var v_Municipios = null;

	if (codi == 'MALLORCA') {
		arrayToData.addRows(53);
		v_Municipios = ["07001", "07003", "07005", "07004", "07901", "07006", "07007", "07008", "07009", "07010", "07011", "07012", "07013", "07014", "07016", "07017", "07018", "07019", "07020", "07021", "07022", "07025", "07027", "07028", "07029", "07030", "07031", "07033", "07034", "07035", "07036", "07038", "07039", "07040", "07041", "07044", "07042", "07043", "07045", "07047", "07049", "07051", "07053", "07055", "07056", "07057", "07059", "07058", "07060", "07061", "07062", "07063", "07065"];
	}

	if (codi == 'MENORCA') {
		arrayToData.addRows(8);
		v_Municipios = ["07002", "07064", "07015", "07023", "07032", "07037", "07902", "07052"];
	}

	if (codi == 'EIVISSA' || codi == 'FORMENTERA') {
		arrayToData.addRows(6);
		v_Municipios = ["07026", "07046", "07050", "07048", "07054", "07024"];
	}

	for (var i = 0; i < data.getNumberOfRows(); i++) {
		if (v_Municipios.indexOf(data.getValue(i, 0)) != -1) {
			arrayToData.setValue(v_Fila, 0, data.getValue(i, 0));
			v_Columna = 1;
			for (var x = 2; x < data.getNumberOfColumns(); x++) {
				arrayToData.setValue(v_Fila, v_Columna, data.getValue(i, x));
				v_Columna++;
			}
			v_Fila++;
		}
	}

	var csv = dataTableToArray(arrayToData);

	var v_Mapa = "";
	if (codi == 'MALLORCA')
		v_Mapa = "/ibestat/js/highmaps/mun_mallorca.js";
	if (codi == 'MENORCA')
		v_Mapa = "/ibestat/js/highmaps/mun_menorca.js";
	if (codi == 'EIVISSA' || codi == 'FORMENTERA')
		v_Mapa = "/ibestat/js/highmaps/mun_ibiza_formentera.js";

	$.getJSON(v_Mapa, function (geojson) {

		var countries = {},
		mapChart,
		countryChart,
		numRegex = /^[0-9\.]+$/,
		quoteRegex = /\"/g,
		categories = csv[0].slice(1);

		// Parsear el fichero CSV para cada municipio
		$.each(csv.slice(1), function (j, line) {
			var row = line,
			data = row.slice(1);

			$.each(data, function (i, val) {

				val = val.replace(quoteRegex, '');
				if (numRegex.test(val)) {
					val = parseInt(val.replace(".", ""));
				} else if (!val) {
					val = null;
				}
				data[i] = val;
			});
			countries[row[0]] = {
				name: row[0],
				code3: row[0],
				data: data
			};
		});

		// Para cada municipio, usamos el ultimo año para establecer la poblacion
		var data = [];
		for (var code3 in countries) {
			if (countries.hasOwnProperty(code3)) {
				var value = null,
				year,
				itemData = countries[code3].data,
				i = itemData.length;
				while (i--) {
					if (typeof itemData[i] === 'number') {
						value = itemData[i];
						year = categories[i];
						break;
					}
				}
				data.push({
					name: code3,
					code3: code3,
					value: value,
					year: year,
					municipio: getNomMunicipio(code3)
				});
			}
		}

		// Evento cuando se realiza la seleccion de un municipio
		Highcharts.wrap(Highcharts.Point.prototype, 'select', function (proceed) {
			proceed.apply(this, Array.prototype.slice.call(arguments, 1));
			var points = mapChart.getSelectedPoints();
			if (points.length) {
				if (!countryChart) {
					countryChart = Highcharts.chart('divGrafEvolucion', {
							chart: {
								height: 250,
								spacingLeft: 0
							},
							credits: {
								enabled: false
							},
							title: {
								text: null
							},
							subtitle: {
								text: null
							},
							xAxis: {
								tickPixelInterval: 50,
								crosshair: true
							},
							yAxis: {
								title: null,
								opposite: true,
								labels: {
									formatter: function () {
										return Highcharts.numberFormat(this.value, 0, "", ".");
									}
								}
							},
							tooltip: {
								split: true,
								shared: true,
								pointFormatter: function () {
									return "<span style='color:{point.color}'></span> " + this.series.name + ": <b>" + Highcharts.numberFormat(this.y, 0, "", ".") + "</b><br/>";
								}
							},
							colors: ['#E99005', '#8AAD6C', '#A388BD', '#35B1CA', '#E2DCCC', '#CF7A55', '#C2D269', '#F2C52C', '#AAA788', '#29A570', '#6B5A4E', '#98E0DF', '#ED146F', '#9CBABB', '#666666', '#EDBEF4', '#3FCBFF', '#3675D4'],
							plotOptions: {
								series: {
									animation: {
										duration: 500
									},
									marker: {
										enabled: false
									},
									threshold: 0,
									pointStart: parseInt(categories[0], 10)
								}
							}
						});
				}

				$.each(points, function (i) {
					// Update
					if (countryChart.series[i]) {
						countryChart.series[i].update({
							name: this.municipio,
							data: countries[this.code3].data,
							type: points.length > 1 ? 'line' : 'area'
						}, false);
					} else {
						countryChart.addSeries({
							name: this.municipio,
							data: countries[this.code3].data,
							type: points.length > 1 ? 'line' : 'area'
						}, false);
					}
				});
				while (countryChart.series.length > points.length) {
					countryChart.series[countryChart.series.length - 1].remove(false);
				}
				countryChart.redraw();

			} else {
				$('#info #flag').attr('class', '');
				$('#info h2').html('');
				if (countryChart) {
					countryChart = countryChart.destroy();
				}
			}
		});

		// Dibujamos el mapa
		mapChart = Highcharts.mapChart('divMapaEvolucion', {
				title: {
					text: null
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'top',
					x: -10,
					y: 100
				},
				mapNavigation: {
					enabled: false
				},
				colorAxis: {
					type: 'logarithmic',
					endOnTick: false,
					startOnTick: false,
					minColor: '#f7d7a3',
					maxColor: '#e99005',
					reversed: false,
					labels: {
						formatter: function () {
							return Highcharts.numberFormat(this.value, 0, "", ".");
						}
					}
				},
				tooltip: {
					footerFormat: '<span style="font-size: 10px">' + $('#mapas_haz').val() + '</span>',
					pointFormatter: function () {
						return "<span style='color:{point.color}'></span>" + this.municipio + " : <b>" + Highcharts.numberFormat(this.value, 0, "", ".") + "</b><br/>";
					}
				},
				series: [{
						data: data,
						mapData: geojson,
						joinBy: ['INE_MUN', 'code3'],
						name: $('#mapas_poblacion').val(),
						allowPointSelect: true,
						cursor: 'pointer',
						states: {
							select: {
								borderWidth: 0,
								color: '#8e8072'
							},
							hover: {
								brightness: 0,
								borderColor: '#544f4f'
							}
						}
					}
				]
			});

		//Gestion de la barra desplazadora
		var minYear = 1998,
		maxYear = data[0].year,
		dataSets = {};

		document.getElementById('anyoMapaEvolucion').innerHTML = data[0].year;
		$('#sliderEvolucion').attr('max', data[0].year);
		$('#sliderEvolucion').attr('value', data[0].year);

		function getAnyoData(arrayToData, v_Cont, year) {

			var data = [];
			for (var i = 0; i < arrayToData.getNumberOfRows(); i++) {
				data.push({
					name: arrayToData.getValue(i, 0),
					code3: arrayToData.getValue(i, 0),
					value: arrayToData.getValue(i, v_Cont),
					year: year,
					municipio: getNomMunicipio(arrayToData.getValue(i, 0))
				});
			}
			return data;
		}

		var v_Cont = 1;
		while (minYear <= maxYear) {
			dataSets[minYear] = {
				data: getAnyoData(arrayToData, v_Cont, minYear)
			};
			minYear++; //Aumenta el año que tratamos
			v_Cont++; //Especifica la columna (año) que debemos recuperar
		}

		$('#sliderEvolucion').bind('input', function () {
			mapChart.series[0].setData(dataSets[+this.value].data);
			document.getElementById('anyoMapaEvolucion').innerHTML = this.value;
		});

	});
}

Attachments
mapa.png
mapa.png (81.4 KiB) Viewed 2341 times
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Define intervals in the map legend

Hi, neibol!

I think you've been looking in a wrong place, but you were close ;)
Those options are not in legend options, but colorAxis https://api.highcharts.com/highmaps/colorAxis options.

Look at this example: http://jsfiddle.net/gh/get/library/pure ... ss-ranges/
especially at https://api.highcharts.com/highmaps/col ... ataClasses

I hope this was helpful. Let me know if you have any additional/specify questions!

Kind regards,
Rafał
Rafal Sebestjanski,
Highcharts Team Lead
neibol
Posts: 33
Joined: Mon Jun 19, 2017 11:33 am

Re: Define intervals in the map legend

thank you for answering so fast, I will look at the code you have indicated

a greeting
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Define intervals in the map legend

You're welcome ;)
Rafal Sebestjanski,
Highcharts Team Lead
neibol
Posts: 33
Joined: Mon Jun 19, 2017 11:33 am

Re: Define intervals in the map legend

Hello:

I have not been able to define a range of values, when there are several maps that are drawn on the same layer.

At the following address https://ibestat.caib.es/ibestat/estadis ... s/MALLORCA, if we open the POBLACIÓN tab and go to the indicator DISTRIBUCIÓN MUNICIPAL DE LA POBLACIÓN EXTRANJERA POR ÁREA DE NACIONALIDAD when selecting a value of the removable , I would like to be able to define a specific range of values, according to the selected value.

What I do not see, is when I have to define the dataClasses value, for example, dataClasses: [{to: 2001}, {from: 2001, to: 5000}, {from: 5001, to: 10000}, {from: 10001 , to: 20000}, {from: 20001, to: 30000}, {from: 30001, to: 50000}, {from: 50000}], when I make the map change, since I have to change the colorAxis property, it would have to be done inside the code that starts with:

// Method by changing the nationality of the removable
$ ('# mapa_Extranjero_Select'). change (function () {

How can I access the dataClases value of the colorAxis when the event $ is produced ('# map_Extranjero_Select'). Change (function?

A greeting

Code: Select all

function Mapa_Extranjero() {

	if ($('#mapas_extranjero_dibujado').val() == 1)
		return;

	if (JSONMapa_Extranjero_UE15.msg == "noJson" || JSONMapa_Extranjero_UE25.msg == "noJson" || JSONMapa_Extranjero_UE27.msg == "noJson") {
		$('#MapaExtranjero').hide();
		return;
	}

	if (JSONMapa_Extranjero_Resto_UE.msg == "noJson") {
		$('#MapaExtranjero').hide();
		return;
	}

	if (JSONMapa_Extranjero_Africa.msg == "noJson") {
		$('#MapaExtranjero').hide();
		return;
	}

	if (JSONMapa_Extranjero_AN.msg == "noJson" || JSONMapa_Extranjero_AC.msg == "noJson" || JSONMapa_Extranjero_AS.msg == "noJson") {
		$('#MapaExtranjero').hide();
		return;
	}

	if (JSONMapa_Extranjero_ASIA.msg == "noJson") {
		$('#MapaExtranjero').hide();
		return;
	}

	if (JSONMapa_Extranjero_OA.msg == "noJson" || JSONMapa_Extranjero_OCEANIA.msg == "noJson" || JSONMapa_Extranjero_NO.msg == "noJson") {
		$('#MapaExtranjero').hide();
		return;
	}
	
	$('#mapas_extranjero_dibujado').val("1");

	var arrayToData = null;
	var data15 = new google.visualization.DataTable(JSONMapa_Extranjero_UE15, 0.5);
	var data25 = new google.visualization.DataTable(JSONMapa_Extranjero_UE25, 0.5);
	var data27 = new google.visualization.DataTable(JSONMapa_Extranjero_UE27, 0.5);
	arrayToData = new google.visualization.DataTable();
	arrayToData.addColumn('string', 'MUNICIPIO');
	for (var i = 2; i < data15.getNumberOfColumns(); i++)
		arrayToData.addColumn('number', data15.getColumnLabel(i));

	$('#MapaExtranjero_Titulo').text($('#fechaReferencia_Dos').val() + data15.getTableProperty("periodo"));
	$("#MapaExtranjeroInfo").attr("href", "/ibestat/service/ibestat/generarUrlSocial?cod=" + data15.getTableProperty("consulta"));

	var v_Fila = 0;
	var v_Columna = 1;
	var v_Municipios = null;

	if (codi == 'MALLORCA') {
		arrayToData.addRows(53);
		v_Municipios = ["07001", "07003", "07005", "07004", "07901", "07006", "07007", "07008", "07009", "07010", "07011", "07012", "07013", "07014", "07016", "07017", "07018", "07019", "07020", "07021", "07022", "07025", "07027", "07028", "07029", "07030", "07031", "07033", "07034", "07035", "07036", "07038", "07039", "07040", "07041", "07044", "07042", "07043", "07045", "07047", "07049", "07051", "07053", "07055", "07056", "07057", "07059", "07058", "07060", "07061", "07062", "07063", "07065"];
	}

	if (codi == 'MENORCA') {
		arrayToData.addRows(8);
		v_Municipios = ["07002", "07064", "07015", "07023", "07032", "07037", "07902", "07052"];
	}

	if (codi == 'EIVISSA' || codi == 'FORMENTERA') {
		arrayToData.addRows(6);
		v_Municipios = ["07026", "07046", "07050", "07048", "07054", "07024"];
	}

	for (var i = 0; i < data15.getNumberOfRows(); i++) {
		if (v_Municipios.indexOf(data15.getValue(i, 0)) != -1) {
			arrayToData.setValue(v_Fila, 0, data15.getValue(i, 0));
			v_Columna = 1;
			for (var x = 2; x < data15.getNumberOfColumns(); x++) {
				arrayToData.setValue(v_Fila, v_Columna, parseInt(data15.getValue(i, x)) + parseInt(data25.getValue(i, x)) + parseInt(data27.getValue(i, x)));
				v_Columna++;
			}
			v_Fila++;
		}
	}

	var csv = dataTableToArray(arrayToData);
	
	//CSV y JSON
	$("#MapaExtranjeroJson").val(arrayToData.toJSON());
	$("#MapaExtranjeroCSV").val(dataTableToCSV(arrayToData));

	var v_Mapa = "";
	if (codi == 'MALLORCA')
		v_Mapa = "/ibestat/js/highmaps/mun_mallorca.js";
	if (codi == 'MENORCA')
		v_Mapa = "/ibestat/js/highmaps/mun_menorca.js";
	if (codi == 'EIVISSA' || codi == 'FORMENTERA')
		v_Mapa = "/ibestat/js/highmaps/mun_ibiza_formentera.js";

	$.getJSON(v_Mapa, function (geojson) {

		var countries = {},
		mapChart,
		countryChart,
		numRegex = /^[0-9\.]+$/,
		quoteRegex = /\"/g,
		categories = csv[0].slice(1);

		// Parsear el fichero CSV para cada municipio
		$.each(csv.slice(1), function (j, line) {
			var row = line,
			data = row.slice(1);

			$.each(data, function (i, val) {

				val = val.replace(quoteRegex, '');
				if (numRegex.test(val)) {
					val = parseInt(val.replace(".", ""));
				} else if (!val) {
					val = null;
				}
				data[i] = val;
			});
			countries[row[0]] = {
				name: row[0],
				code3: row[0],
				data: data
			};
		});

		// Para cada municipio, usamos el ultimo año para establecer la poblacion
		var data = [];
		for (var code3 in countries) {
			if (countries.hasOwnProperty(code3)) {
				var value = null,
				year,
				itemData = countries[code3].data,
				i = itemData.length;
				while (i--) {
					if (typeof itemData[i] === 'number') {
						value = itemData[i];
						year = categories[i];
						break;
					}
				}
				data.push({
					name: code3,
					code3: code3,
					value: value,
					year: year,
					municipio: getNomMunicipio(code3)
				});
			}
		}

		// Evento cuando se realiza la seleccion de un municipio
		Highcharts.wrap(Highcharts.Point.prototype, 'select', function (proceed) {
			proceed.apply(this, Array.prototype.slice.call(arguments, 1));
			var points = mapChart.getSelectedPoints();
			if (points.length) {
				if (!countryChart) {
					countryChart = Highcharts.chart('divGrafExtranjero', {
							chart: {
								height: 250,
								spacingLeft: 0
							},
							credits: {
								enabled: false
							},
							title: {
								text: null
							},
							subtitle: {
								text: null
							},
							xAxis: {
								tickPixelInterval: 50,
								crosshair: true
							},
							yAxis: {
								title: null,
								opposite: true,
								labels: {
									formatter: function () {
										return Highcharts.numberFormat(this.value, 0, "", ".");
									}
								}
							},
							tooltip: {
								split: true,
								shared: true,
								pointFormatter: function () {
									return "<span style='color:{point.color}'></span> " + this.series.name + ": <b>" + Highcharts.numberFormat(this.y, 0, "", ".") + "</b><br/>";
								}
							},
							colors: ['#E99005', '#8AAD6C', '#A388BD', '#35B1CA', '#E2DCCC', '#CF7A55', '#C2D269', '#F2C52C', '#AAA788', '#29A570', '#6B5A4E', '#98E0DF', '#ED146F', '#9CBABB', '#666666', '#EDBEF4', '#3FCBFF', '#3675D4'],
							plotOptions: {
								series: {
									animation: {
										duration: 500
									},
									marker: {
										enabled: false
									},
									threshold: 0,
									pointStart: parseInt(categories[0], 10)
								}
							}
						});
				}

				$.each(points, function (i) {
					// Update
					if (countryChart.series[i]) {
						countryChart.series[i].update({
							name: this.municipio,
							data: countries[this.code3].data,
							type: 'line'
						}, false);
					} else {
						countryChart.addSeries({
							name: this.municipio,
							data: countries[this.code3].data,
							type: 'line'
						}, false);
					}
				});
				while (countryChart.series.length > points.length) {
					countryChart.series[countryChart.series.length - 1].remove(false);
				}
				countryChart.redraw();

			} else {
				$('#info #flag').attr('class', '');
				$('#info h2').html('');
				if (countryChart) {
					countryChart = countryChart.destroy();
				}
			}
		});

		// Dibujamos el mapa
		mapChart = Highcharts.mapChart('divMapaExtranjero', {
				title: {
					text: null
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'middle',
					x: -10,
					y: 100,
					valueDecimals: 0,
					itemStyle: {
						color: '#818181',
			            fontSize: '10px'
					}
				},
				mapNavigation: {
					enabled: false
				},
				colorAxis: {
					type: 'logarithmic',
					endOnTick: false,
					startOnTick: false,
					minColor: '#ffe5bd',
					maxColor: '#db8600',
					reversed: false,
					labels: {
						formatter: function () {
							return Highcharts.numberFormat(this.value, 0, "", ".");
						}
					}
				},
				tooltip: {
					footerFormat: '<span style="font-size: 10px">' + $('#mapas_haz').val() + '</span>',
					pointFormatter: function () {
						return "<span style='color:{point.color}'></span>" + this.municipio + " : <b>" + Highcharts.numberFormat(this.value, 0, "", ".") + "</b><br/>";
					}
				},
				series: [{
						data: data,
						mapData: geojson,
						joinBy: ['INE_MUN', 'code3'],
						name: $('#mapas_poblacion').val(),
						allowPointSelect: true,
						cursor: 'pointer',
						states: {
							select: {
								borderWidth: 0,
								color: '#8e8072'
							},
							hover: {
								brightness: 0,
								borderColor: '#544f4f'
							}
						}
					}
				]
			});

		//Gestion de la barra desplazadora
		var minYear = 1998,
		maxYear = data[0].year,
		dataSets = {};

		document.getElementById('anyoMapaExtranjero').innerHTML = data[0].year;
		$('#sliderExtranjero').attr('max', data[0].year);
		$('#sliderExtranjero').attr('value', data[0].year);

		//Metodo al cambiar el año del Slider
		function getAnyoData(arrayToData, v_Cont, year) {

			var data = [];
			for (var i = 0; i < arrayToData.getNumberOfRows(); i++) {
				data.push({
					name: arrayToData.getValue(i, 0),
					code3: arrayToData.getValue(i, 0),
					value: arrayToData.getValue(i, v_Cont),
					year: year,
					municipio: getNomMunicipio(arrayToData.getValue(i, 0))
				});
			}
			return data;
		}

		var v_Cont = 1;
		while (minYear <= maxYear) {
			dataSets[minYear] = {
				data: getAnyoData(arrayToData, v_Cont, minYear)
			};
			minYear++; //Aumenta el año que tratamos
			v_Cont++; //Especifica la columna (año) que debemos recuperar
		}

		$('#sliderExtranjero').bind('input', function () {
			mapChart.series[0].setData(dataSets[+this.value].data);
			document.getElementById('anyoMapaExtranjero').innerHTML = this.value;
		});

		//Metodo al cambiar la nacionalidad del despegable
		$('#mapa_Extranjero_Select').change(function () {
			var idConsulta = $('#mapa_Extranjero_Select').val();

			var arrayToData = null;
			var maxYear = 0;

			if (idConsulta == 'ue') {
				var data15 = new google.visualization.DataTable(JSONMapa_Extranjero_UE15, 0.5);
				var data25 = new google.visualization.DataTable(JSONMapa_Extranjero_UE25, 0.5);
				var data27 = new google.visualization.DataTable(JSONMapa_Extranjero_UE27, 0.5);
				arrayToData = new google.visualization.DataTable();
				arrayToData.addColumn('string', 'MUNICIPIO');
				for (var i = 2; i < data15.getNumberOfColumns(); i++)
					arrayToData.addColumn('number', data15.getColumnLabel(i));
				maxYear = data15.getTableProperty("periodo");
				$("#MapaExtranjeroInfo").attr("href", "/ibestat/service/ibestat/generarUrlSocial?cod=" + data15.getTableProperty("consulta"));
			}

			if (idConsulta == 'resto_ue') {
				var data = new google.visualization.DataTable(JSONMapa_Extranjero_Resto_UE, 0.5);
				arrayToData = new google.visualization.DataTable();
				arrayToData.addColumn('string', 'MUNICIPIO');
				for (var i = 2; i < data.getNumberOfColumns(); i++)
					arrayToData.addColumn('number', data.getColumnLabel(i));
				maxYear = data.getTableProperty("periodo");
				$("#MapaExtranjeroInfo").attr("href", "/ibestat/service/ibestat/generarUrlSocial?cod=" + data.getTableProperty("consulta"));
			}

			if (idConsulta == 'africa') {
				var data = new google.visualization.DataTable(JSONMapa_Extranjero_Africa, 0.5);
				arrayToData = new google.visualization.DataTable();
				arrayToData.addColumn('string', 'MUNICIPIO');
				for (var i = 2; i < data.getNumberOfColumns(); i++)
					arrayToData.addColumn('number', data.getColumnLabel(i));
				maxYear = data.getTableProperty("periodo");
				$("#MapaExtranjeroInfo").attr("href", "/ibestat/service/ibestat/generarUrlSocial?cod=" + data.getTableProperty("consulta"));
			}

			if (idConsulta == 'america.n') {
				var data = new google.visualization.DataTable(JSONMapa_Extranjero_AN, 0.5);
				arrayToData = new google.visualization.DataTable();
				arrayToData.addColumn('string', 'MUNICIPIO');
				for (var i = 2; i < data.getNumberOfColumns(); i++)
					arrayToData.addColumn('number', data.getColumnLabel(i));
				maxYear = data.getTableProperty("periodo");
				$("#MapaExtranjeroInfo").attr("href", "/ibestat/service/ibestat/generarUrlSocial?cod=" + data.getTableProperty("consulta"));
			}

			if (idConsulta == 'america.c') {
				var data = new google.visualization.DataTable(JSONMapa_Extranjero_AC, 0.5);
				arrayToData = new google.visualization.DataTable();
				arrayToData.addColumn('string', 'MUNICIPIO');
				for (var i = 2; i < data.getNumberOfColumns(); i++)
					arrayToData.addColumn('number', data.getColumnLabel(i));
				maxYear = data.getTableProperty("periodo");
				$("#MapaExtranjeroInfo").attr("href", "/ibestat/service/ibestat/generarUrlSocial?cod=" + data.getTableProperty("consulta"));
			}

			if (idConsulta == 'america.s') {
				var data = new google.visualization.DataTable(JSONMapa_Extranjero_AS, 0.5);
				arrayToData = new google.visualization.DataTable();
				arrayToData.addColumn('string', 'MUNICIPIO');
				for (var i = 2; i < data.getNumberOfColumns(); i++)
					arrayToData.addColumn('number', data.getColumnLabel(i));
				maxYear = data.getTableProperty("periodo");
				$("#MapaExtranjeroInfo").attr("href", "/ibestat/service/ibestat/generarUrlSocial?cod=" + data.getTableProperty("consulta"));
			}

			if (idConsulta == 'asia') {
				var data = new google.visualization.DataTable(JSONMapa_Extranjero_ASIA, 0.5);
				arrayToData = new google.visualization.DataTable();
				arrayToData.addColumn('string', 'MUNICIPIO');
				for (var i = 2; i < data.getNumberOfColumns(); i++)
					arrayToData.addColumn('number', data.getColumnLabel(i));
				maxYear = data.getTableProperty("periodo");
				$("#MapaExtranjeroInfo").attr("href", "/ibestat/service/ibestat/generarUrlSocial?cod=" + data.getTableProperty("consulta"));
			}

			if (idConsulta == 'resto') {
				var dataOA = new google.visualization.DataTable(JSONMapa_Extranjero_OA, 0.5);
				var dataOC = new google.visualization.DataTable(JSONMapa_Extranjero_OCEANIA, 0.5);
				var dataNO = new google.visualization.DataTable(JSONMapa_Extranjero_NO, 0.5);
				arrayToData = new google.visualization.DataTable();
				arrayToData.addColumn('string', 'MUNICIPIO');
				for (var i = 2; i < dataOA.getNumberOfColumns(); i++)
					arrayToData.addColumn('number', dataOA.getColumnLabel(i));
				maxYear = dataOA.getTableProperty("periodo");
				$("#MapaExtranjeroInfo").attr("href", "/ibestat/service/ibestat/generarUrlSocial?cod=" + dataOC.getTableProperty("consulta"));
			}

			if (idConsulta == 'total') {
				var data15 = new google.visualization.DataTable(JSONMapa_Extranjero_UE15, 0.5);
				var data25 = new google.visualization.DataTable(JSONMapa_Extranjero_UE25, 0.5);
				var data27 = new google.visualization.DataTable(JSONMapa_Extranjero_UE27, 0.5);
				var dataResto = new google.visualization.DataTable(JSONMapa_Extranjero_Resto_UE, 0.5);
				var dataAfrica = new google.visualization.DataTable(JSONMapa_Extranjero_Africa, 0.5);
				var dataAN = new google.visualization.DataTable(JSONMapa_Extranjero_AN, 0.5);
				var dataAC = new google.visualization.DataTable(JSONMapa_Extranjero_AC, 0.5);
				var dataAS = new google.visualization.DataTable(JSONMapa_Extranjero_AS, 0.5);
				var dataAsia = new google.visualization.DataTable(JSONMapa_Extranjero_ASIA, 0.5);
				var dataOA = new google.visualization.DataTable(JSONMapa_Extranjero_OA, 0.5);
				var dataOC = new google.visualization.DataTable(JSONMapa_Extranjero_OCEANIA, 0.5);
				var dataNO = new google.visualization.DataTable(JSONMapa_Extranjero_NO, 0.5);
				arrayToData = new google.visualization.DataTable();
				arrayToData.addColumn('string', 'MUNICIPIO');
				for (var i = 2; i < data15.getNumberOfColumns(); i++)
					arrayToData.addColumn('number', data15.getColumnLabel(i));
				maxYear = data15.getTableProperty("periodo");
				$("#MapaExtranjeroInfo").attr("href", "/ibestat/service/ibestat/generarUrlSocial?cod=" + data15.getTableProperty("consulta"));
			}

			var v_Fila = 0;
			var v_Columna = 1;
			var v_Municipios = null;
			var v_Tmp = 0;

			if (codi == 'MALLORCA') {
				arrayToData.addRows(53);
				v_Municipios = ["07001", "07003", "07005", "07004", "07901", "07006", "07007", "07008", "07009", "07010", "07011", "07012", "07013", "07014", "07016", "07017", "07018", "07019", "07020", "07021", "07022", "07025", "07027", "07028", "07029", "07030", "07031", "07033", "07034", "07035", "07036", "07038", "07039", "07040", "07041", "07044", "07042", "07043", "07045", "07047", "07049", "07051", "07053", "07055", "07056", "07057", "07059", "07058", "07060", "07061", "07062", "07063", "07065"];
			}

			if (codi == 'MENORCA') {
				arrayToData.addRows(8);
				v_Municipios = ["07002", "07064", "07015", "07023", "07032", "07037", "07902", "07052"];
			}

			if (codi == 'EIVISSA' || codi == 'FORMENTERA') {
				arrayToData.addRows(6);
				v_Municipios = ["07026", "07046", "07050", "07048", "07054", "07024"];
			}

			if (idConsulta == 'mapa_evolucion' || idConsulta == 'resto_ue' || idConsulta == 'africa' || idConsulta == 'asia' || idConsulta == 'america.n' || idConsulta == 'america.c' || idConsulta == 'america.s') {
				for (var i = 0; i < data.getNumberOfRows(); i++) {
					if (v_Municipios.indexOf(data.getValue(i, 0)) != -1) {
						arrayToData.setValue(v_Fila, 0, data.getValue(i, 0));
						v_Columna = 1;
						for (var x = 2; x < data.getNumberOfColumns(); x++) {
							if (data.getValue(i, x) == 0)
								arrayToData.setValue(v_Fila, v_Columna, 0.0000001);
							else
								arrayToData.setValue(v_Fila, v_Columna, data.getValue(i, x));
							v_Columna++;
						}
						v_Fila++;
					}
				}
			}

			if (idConsulta == 'ue') {
				for (var i = 0; i < data15.getNumberOfRows(); i++) {
					if (v_Municipios.indexOf(data15.getValue(i, 0)) != -1) {
						arrayToData.setValue(v_Fila, 0, data15.getValue(i, 0));
						v_Columna = 1;
						for (var x = 2; x < data15.getNumberOfColumns(); x++) {
							v_Tmp = parseInt(data15.getValue(i, x)) + parseInt(data25.getValue(i, x)) + parseInt(data27.getValue(i, x));
							if (v_Tmp == 0)
								v_Tmp = 0.0000001;
							arrayToData.setValue(v_Fila, v_Columna, v_Tmp);
							v_Columna++;
						}
						v_Fila++;
					}
				}
			}

			if (idConsulta == 'resto') {
				for (var i = 0; i < dataOA.getNumberOfRows(); i++) {
					if (v_Municipios.indexOf(dataOA.getValue(i, 0)) != -1) {
						arrayToData.setValue(v_Fila, 0, dataOA.getValue(i, 0));
						v_Columna = 1;
						for (var x = 2; x < dataOA.getNumberOfColumns(); x++) {
							v_Tmp = parseInt(dataOA.getValue(i, x)) + parseInt(dataOC.getValue(i, x)) + parseInt(dataNO.getValue(i, x));
							if (v_Tmp == 0)
								v_Tmp = 0.0000001;
							arrayToData.setValue(v_Fila, v_Columna, v_Tmp);
							v_Columna++;
						}
						v_Fila++;
					}
				}
			}

			if (idConsulta == 'total') {
				for (var i = 0; i < data15.getNumberOfRows(); i++) {
					if (v_Municipios.indexOf(data15.getValue(i, 0)) != -1) {
						arrayToData.setValue(v_Fila, 0, data15.getValue(i, 0));
						v_Columna = 1;
						for (var x = 2; x < data15.getNumberOfColumns(); x++) {
							v_Tmp = parseInt(data15.getValue(i, x)) + parseInt(data25.getValue(i, x)) + parseInt(data27.getValue(i, x)) + parseInt(dataResto.getValue(i, x)) + parseInt(dataAfrica.getValue(i, x)) + parseInt(dataAN.getValue(i, x)) + parseInt(dataAC.getValue(i, x)) + parseInt(dataAS.getValue(i, x)) + parseInt(dataAsia.getValue(i, x)) + parseInt(dataOA.getValue(i, x)) + parseInt(dataOC.getValue(i, x)) + parseInt(dataNO.getValue(i, x));
							if (v_Tmp == 0)
								v_Tmp = 0.0000001;
							arrayToData.setValue(v_Fila, v_Columna, v_Tmp);
							v_Columna++;
						}
						v_Fila++;
					}
				}
			}

			//CSV y JSON
			$("#MapaExtranjeroJson").val(arrayToData.toJSON());
			$("#MapaExtranjeroCSV").val(dataTableToCSV(arrayToData));
			var csv = dataTableToArray(arrayToData);

			// Parsear el fichero CSV para cada municipio
			$.each(csv.slice(1), function (j, line) {
				var row = line,
				data = row.slice(1);

				$.each(data, function (i, val) {

					val = val.replace(quoteRegex, '');
					if (numRegex.test(val)) {
						val = parseInt(val.replace(".", ""));
					} else if (!val) {
						val = null;
					}
					data[i] = val;
				});
				countries[row[0]] = {
					name: row[0],
					code3: row[0],
					data: data
				};
			});

			// Para cada municipio, usamos el ultimo año para establecer la poblacion
			var data = [];
			for (var code3 in countries) {
				if (countries.hasOwnProperty(code3)) {
					var value = null,
					year,
					itemData = countries[code3].data,
					i = itemData.length;

					//Obtenemos el año del slider
					var v_Anyo = $('#sliderExtranjero').val();

					for (var x = 0; x < itemData.length; x++) {
						if (categories[x] == v_Anyo) {
							if (itemData[x] == 0)
								value = 0.0000001;
							else
								value = itemData[x];
							year = categories[x];
							break;
						}
					}

					data.push({
						name: code3,
						code3: code3,
						value: value,
						year: year,
						municipio: getNomMunicipio(code3)
					});
				}
			}

			var minYear = 1998;
			dataSets = {};
			var v_Cont = 1;
			while (minYear <= maxYear) {
				dataSets[minYear] = {
					data: getAnyoData(arrayToData, v_Cont, minYear)
				};
				minYear++; //Aumenta el año que tratamos
				v_Cont++; //Especifica la columna (año) que debemos recuperar
			}

			mapChart.series[0].setData(data);

			//Actualizar grafico evolutivo de lineas
			var points = mapChart.getSelectedPoints();
			if (points.length) {
				if (!countryChart) {
					countryChart = Highcharts.chart('divGrafExtranjero', {
							chart: {
								height: 250,
								spacingLeft: 0
							},
							credits: {
								enabled: false
							},
							title: {
								text: null
							},
							subtitle: {
								text: null
							},
							xAxis: {
								tickPixelInterval: 50,
								crosshair: true
							},
							yAxis: {
								title: null,
								opposite: true,
								labels: {
									formatter: function () {
										return Highcharts.numberFormat(this.value, 0, "", ".");
									}
								}
							},
							tooltip: {
								split: true,
								shared: true,
								pointFormatter: function () {
									return "<span style='color:{point.color}'></span> " + this.series.name + ": <b>" + Highcharts.numberFormat(this.y, 0, "", ".") + "</b><br/>";
								}
							},
							colors: ['#E99005', '#8AAD6C', '#A388BD', '#35B1CA', '#E2DCCC', '#CF7A55', '#C2D269', '#F2C52C', '#AAA788', '#29A570', '#6B5A4E', '#98E0DF', '#ED146F', '#9CBABB', '#666666', '#EDBEF4', '#3FCBFF', '#3675D4'],
							plotOptions: {
								series: {
									animation: {
										duration: 500
									},
									marker: {
										enabled: false
									},
									threshold: 0,
									pointStart: parseInt(categories[0], 10)
								}
							}
						});
				}

				$.each(points, function (i) {
					// Update
					if (countryChart.series[i]) {
						countryChart.series[i].update({
							name: this.municipio,
							data: countries[this.code3].data,
							type: 'line'
						}, false);
					} else {
						countryChart.addSeries({
							name: this.municipio,
							data: countries[this.code3].data,
							type: 'line'
						}, false);
					}
				});
				while (countryChart.series.length > points.length) {
					countryChart.series[countryChart.series.length - 1].remove(false);
				}
				countryChart.redraw();

			} else {
				$('#info #flag').attr('class', '');
				$('#info h2').html('');
				if (countryChart) {
					countryChart = countryChart.destroy();
				}
			}
		});

	});
}
neibol
Posts: 33
Joined: Mon Jun 19, 2017 11:33 am

Re: Define intervals in the map legend

Another question is how can I change the text that appears in the tooltip when I change the map?

tooltip: {
split: true,
shared: true,
pointFormatter: function () {
return "<span style = 'color: {point.color}'> </ span>" + this.series.name + ": <b>" + Highcharts.numberFormat (this.y, 0, "", ". ") +" </ b> <br/> ";
}
},

Where the value this.series.name comes from
series: [{
data: data,
mapData: geojson,
joinBy: ['INE_MUN', 'code3'],
name: $ ('# population_maps'). val (),

I want to be able to modify it when the map change is executed in
// Method to change the nationality of the removable
$ ('# mapa_Extranjero_Select'). change (function () {

It's possible?

A greeting
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Define intervals in the map legend

Hi neibol,

I am not able to run your code and I don't quite understand your question. Could you create an online simplified jsFiddle example showing your problem?
From what I understand, you want to set different colorAxis for every " value of the removable". I don't know how exactly you update your map (or data) but you can update colorAxis at the same time accordingly using chart.update() method: https://api.highcharts.com/class-refere ... art#update
If I misunderstood you, please try to explain your issue as clearly as you can.

When it comes to the tooltip - you can use the same: chart.update({tooltip: {...}}).

You can use chart.update() in your change event as long as you can find the main Highcharts (chart) object to call update() on it.

Regards.
Rafal Sebestjanski,
Highcharts Team Lead
neibol
Posts: 33
Joined: Mon Jun 19, 2017 11:33 am

Re: Define intervals in the map legend

Hello:

Thank you for your indications I have managed to make the change, it is as simple as putting these lines

To edit the intervals of the maps

mapChart.update ({colorAxis: {dataClasses: [{to: 40}, {from: 41, to: 43}, {from: 44, to: 46}, {from: 47, to: 49}, {from: 50, to: 52}, {from: 53, to: 55}, {from: 56}]}});

To edit the message that appears in the tooltip

mapChart.update ({series: {name: $ ("# map_Indicator_Select option: selected"). text ()}});

Thanks and best regards
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Define intervals in the map legend

So chart.update() method did a trick. You're welcome ;)
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Maps”