Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HighMap not displaying Map data: Always get series object null when use highmap

See original GitHub issue

I am using angular-highcharts in my project with highmap support and had added following code in my component.ts file but highmap not displaying map with map data and I always get series object null when I console.log(console.log(this.mapChart)); as below inside constructor.Also i am loading data for india map but i dont know how to get data from link http://code.highcharts.com/mapdata/countries/in/in-all.js which is used inside my Mapchart instance object as chart.map: ‘countries/in/in-all’

import { Component, OnInit } from '@angular/core';
import { MapChart } from 'angular-highcharts';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-map-chart',
  templateUrl: './map-chart.component.html',
  styleUrls: ['./map-chart.component.css']
})
export class MapChartComponent {

  mapChart: MapChart;

  constructor() {

    this.mapChart = new MapChart({
      series: [{
        data: [{
          'hc-key': 'in-py',
          'value': 0
        }, {
          'hc-key': 'in-ld',
          'value': 1
        }, {
          'hc-key': 'in-wb',
          'value': 2
        }, {
          'hc-key': 'in-or',
          'value': 3
        }, {
          'hc-key': 'in-br',
          'value': 4
        }, {
          'hc-key': 'in-sk',
          'value': 5
        }, {
          'hc-key': 'in-ct',
          'value': 6
        }, {
          'hc-key': 'in-tn',
          'value': 7
        }, {
          'hc-key': 'in-mp',
          'value': 8
        }, {
          'hc-key': 'in-2984',
          'value': 9
        }, {
          'hc-key': 'in-ga',
          'value': 10
        }, {
          'hc-key': 'in-nl',
          'value': 11
        }, {
          'hc-key': 'in-mn',
          'value': 12
        }, {
          'hc-key': 'in-ar',
          'value': 13
        }, {
          'hc-key': 'in-mz',
          'value': 14
        }, {
          'hc-key': 'in-tr',
          'value': 15
        }, {
          'hc-key': 'in-3464',
          'value': 16
        }, {
          'hc-key': 'in-dl',
          'value': 17
        }, {
          'hc-key': 'in-hr',
          'value': 18
        }, {
          'hc-key': 'in-ch',
          'value': 19
        }, {
          'hc-key': 'in-hp',
          'value': 20
        }, {
          'hc-key': 'in-jk',
          'value': 21
        }, {
          'hc-key': 'in-kl',
          'value': 22
        }, {
          'hc-key': 'in-ka',
          'value': 23
        }, {
          'hc-key': 'in-dn',
          'value': 24
        }, {
          'hc-key': 'in-mh',
          'value': 25
        }, {
          'hc-key': 'in-as',
          'value': 26
        }, {
          'hc-key': 'in-ap',
          'value': 27
        }, {
          'hc-key': 'in-ml',
          'value': 28
        }, {
          'hc-key': 'in-pb',
          'value': 29
        }, {
          'hc-key': 'in-rj',
          'value': 30
        }, {
          'hc-key': 'in-up',
          'value': 31
        }, {
          'hc-key': 'in-ut',
          'value': 32
        }, {
          'hc-key': 'in-jh',
          'value': 33
        }] ,
        name: 'Random data',
        states: {
          hover: {
            color: '#BADA55'
          }
        },
        dataLabels: {
          enabled: true,
          format: '{point.name}'
        }
      }],
      chart: {
        map: 'countries/in/in-all'
      },
      title: {
        text: 'Highmaps basic demo'
      },
      subtitle: {
        text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/in/in-all.js">India</a>'
      },
      mapNavigation: {
        enabled: true,
        buttonOptions: {
          verticalAlign: 'bottom'
        }
      },
      colorAxis: {
        min: 0
      }
    });

console.log(this.mapChart);

}}

in component.html file

<div [chart]="mapChart"></div>

@cebor , please help, what am i doing wrong here…

Issue Analytics

State:
Created 6 years ago
Comments:5

Top GitHub Comments

1reaction

nirali-gacommented, Apr 5, 2018

@zuzi-troj thank you , I added mapData with following data object in my case json data for india state as you have answered,and it works

this.mapData = { ‘title’: ‘India’, ‘version’: ‘1.1.2’, ‘type’: ‘FeatureCollection’, ‘copyright’: ‘Copyright © 2015 Highsoft AS, Based on data from Natural Earth’, ‘copyrightShort’: ‘Natural Earth’, ‘copyrightUrl’: ‘http://www.naturalearthdata.com’, ‘crs’: { ‘type’: ‘name’, ‘properties’: { ‘name’: ‘urn:ogc:def:crs:EPSG:24373’…and so on }

0reactions

nirali-gacommented, Apr 5, 2018

@keshav1007 To use mapData copy json data from respective state/country’s geoJson, you can get this from here : ‘https://code.highcharts.com/mapdata/’ and store it in any variable/external file, in my case i stored it in this.mapDataJson and used it in MapChart object like, mapData: this.mapDataJson