CODEWITHSUNDEEP
highchartshighmaps
Anshul Agrawal
Anshul Agrawal

Reputation: 5

highmap : not able to display tooltip

Can someone please guide me on below queries please:

1) How can i achieve tootltip onhover on state as per the json. I did tried and created a fiddle.

submissionDate:05/20/2017, submissionResponseDate:06/20/2017, stateResponse:Approved

2) I want to show color of state on basis of Json data (Approved/Approval Pending).

3) Do i need o pass json for all states for "hc-key" as allAreas proper is not showing all states

http://fiddle.jshell.net/a65yufqf/

US Map

Upvotes: 0

Views: 538

Answers (2)

Mike Zavarello
Mike Zavarello

Reputation: 3554

Item #1: the tooltip

To add a tooltip to your map that pulls in the JSON data values you've defined, you'll add the following:

tooltip: {
  formatter: function () {
    /* set value if the state hasn't yet responded */
    if (!this.point.submissionResponseDate) {
      this.point.submissionResponseDate = 'not applicable';
    }
    /* format the tooltip */
    return '<strong>' + this.point.name + '</strong><br />' +  
            'Submission date: ' + this.point.submissionDate + 
            '<br />Submission response date: ' + this.point.submissionResponseDate + 
            '<br />State response: ' + this.point.stateResponse;
  }
},

Your tooltip will then look like this:

enter image description here

Note the if statement I added for your response date ... rather than show an empty value (as you have for Oregon in your example), this will show a value more helpful to the user.

Item #2: state colors based on JSON data

You can parse through your JSON data and add a value attribute based on whether the state is approved or pending approval. The value will then take on the colors you defined in colorAxis:

  /* check the JSON data and add a value for approved
   or approval pending that will be picked up by your 
   colorAxis formatting */
  for (d = 0; d < data.length; d++) {
    if (data[d].stateResponse == "Approved") {
      data[d].value = -1;       /* will color state red */
    } else {
      data[d].value = 1;        /* will color state blue */
    }
  }

You'll want to run this after you've defined or pulled in your data, but before you set the chart attributes.

Item #3: pulling in data for all states

No, you don't have to pull in hc-key data for all states; only the ones you need, as you've done in your example.

I've modified your fiddle with these answers: http://fiddle.jshell.net/brightmatrix/a65yufqf/4/

I hope this is helpful for you!

Upvotes: 0

Deep 3015
Deep 3015

Reputation: 10075

Solution For each point

1>For tooltip you have to use formatter

tooltip: {
  formatter: function() {
    return 'submissionDate: <b>' + this.point.submissionDate + '</b><br/>' +
      'submissionResponseDate: <b>' + this.point.submissionResponseDate + '</b><br/>' +
      'stateResponse: <b>' + this.point.stateResponse + '</b><br/>'

  }
},

2>Prepare JSON data containing color

  var data = [{
    "hc-key": "us-ca",
    "submissionDate": "05/20/2017",
    "submissionResponseDate": "06/20/2017",
    "stateResponse": "Approved",
    "color": "#C40401",
  }, {
    "hc-key": "us-or",
    "submissionDate": "05/20/2017",
    "submissionResponseDate": "",
    "stateResponse": "Approval Pending",
    "color": "#0200D0"
  }];

3>As you show in sample image , you want default color which are not in JSON.So for this you have to use nullColor: 'grey', in series.

series: [{
allAreas: true,
  data: data,
  mapData: Highcharts.maps['countries/us/us-all'],
  joinBy: 'hc-key',
  //name: 'Random data',
  nullColor: 'grey', //add this to color default area
  states: {
    hover: {
      color: '#BADA55'
    }
  },
  dataLabels: {
    enabled: true,
    format: '{point.name}'
  }
}, {
  name: 'Separators',
  type: 'mapline',
  data: Highcharts.geojson(Highcharts.maps['countries/us/us-all-all'], 'mapline'),
  color: 'black',
  showInLegend: false,
  enableMouseTracking: false
}]

Fiddle demonstration

Upvotes: 1

Related Questions