It is currently Mon Sep 24, 2018 6:51 am Advanced search

Define intervals in the map legend

Technical support, bug reports and more.

Define intervals in the map legend

Postby neibol » Thu Sep 13, 2018 12:36 pm

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 40 times
neibol
 
Posts: 20
Joined: Mon Jun 19, 2017 1:33 pm

Re: Define intervals in the map legend

Postby rafalS » Thu Sep 13, 2018 4:24 pm

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/highcharts/highcharts/tree/master/samples/maps/demo/data-class-ranges/
especially at https://api.highcharts.com/highmaps/colorAxis.dataClasses

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

Kind regards,
Rafał
Rafal Sebestjanski,
Highcharts Developer
rafalS
 
Posts: 312
Joined: Thu Jun 14, 2018 1:40 pm

Re: Define intervals in the map legend

Postby neibol » Fri Sep 14, 2018 11:45 am

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

a greeting
neibol
 
Posts: 20
Joined: Mon Jun 19, 2017 1:33 pm

Re: Define intervals in the map legend

Postby rafalS » Fri Sep 14, 2018 4:22 pm

You're welcome ;)
Rafal Sebestjanski,
Highcharts Developer
rafalS
 
Posts: 312
Joined: Thu Jun 14, 2018 1:40 pm


Return to Highmaps Usage

Who is online

Users browsing this forum: No registered users and 0 guests