johnpettigrew
Posts: 20
Joined: Fri Jul 26, 2019 2:54 pm

Zooming a mappie

I've created a mappie to show my data against various countries on the world map, following previous examples. The map and pie charts render fine, but there's one problem: the pie charts don't move when I zoom the map, which means they aren't properly over the right country any more.

How do I get the map to re-render on zoom and to plot the pie charts in the right places again?

JSFiddle:
https://jsfiddle.net/johnpet/m7s4v1zy/3/
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Zooming a mappie

Hello johnpettigrew!

Thanks for contacting us with your question!

We can update the positions of our pie series in the onClick function in zoomIn and zoomOut properties. Each time we zoom the map the center property of our pies will be updated.

API references:
https://api.highcharts.com/highmaps/map ... In.onclick
https://api.highcharts.com/highcharts/series.pie.center

Demo:
https://jsfiddle.net/BlackLabel/593wvduz/

Let me know if that was what you were looking for!
Best regards.
Dominik Chudy
Highcharts Developer
johnpettigrew
Posts: 20
Joined: Fri Jul 26, 2019 2:54 pm

Re: Zooming a mappie

Thanks, Dominik. However, that doesn't seem to work: on your JSFiddle, the map is never plotted (while the browser tab consumes most of my CPU). In my own app, the maps render but the new onClick functions make no difference AFAICS, whether I zoom using the buttons or the mouse.

In the mappie examples on the Highcharts site and elsewhere (including the canonical example at https://www.highcharts.com/demo/maps/map-pies), this onClick code isn't used but the pie charts still redraw in their correct locations after a zoom (by button or mouse). Some, but not all, examples have a 'render' method in the initial seriesType definition, but this fails in my own code with "Cannot read property 'is' of undefined" on the line "if (series.group && linkedSeries.is('map'))" so I excluded it. Might this be the cause, and do you know what the problem is with the code if so?

I also did see that, on JSFiddle (but not my own code), there's an error in the console from my original code 'fathom is not defined'. I've no idea what this means but might it be related?
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Zooming a mappie

Hi johnpettigrew,

The error is probably from the lack of linkedMap option set for the added series - the option is set in the working demo and is used to get the linkedSeries in the line with the error.

Please use the working demo code and in case you will have errors there please share a live demo and we will be able to check why it is not working correctly.

I have tried to prepare a demo for you with the problem removed, but the more the code was changed the more it looked like the code from the working demo, so please use that code.

Best regards,
Kacper Madej
Highcharts Developer
johnpettigrew
Posts: 20
Joined: Fri Jul 26, 2019 2:54 pm

Re: Zooming a mappie

I've tried adding the linkedMap option via the following lines:

Code: Select all

Highcharts.seriesType('mappie', 'pie', {
    ...
    linkedMap: null, //id of linked map
}, {
    render: function () {
        var series = this,
            chart = series.chart,
            linkedSeries = chart.get(series.options.linkedMap);
        Highcharts.seriesTypes.pie.prototype.render.apply(series, arguments);
        if (series.group && linkedSeries.is('map')) {
            series.group.add(linkedSeries.group);
        }
    },
...
}
...
Highcharts.each(chart.series[0].points, function(country) {
    ...
  chart.addSeries({
      linkedMap: 'world-robinson',
      ...
   })
})
But I get the error I reported in my last message ("Cannot read property 'is' of undefined").

I've obviously missed something but I'm not a JS dev.
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Zooming a mappie

The center needs to be read from the map points after the zoom - you were using the initial positions all the time (after the zoom too). Here's working demo: https://jsfiddle.net/BlackLabel/e71nqp0k/

In the future please add the code to the JSFiddle demo, save it and share the link, so we could check the code you have. That would allowed easier debugging for us and a faster solution for you.

Please let us know if you have any more questions and if the current problem is now resolved.

Best regards,
Kacper Madej
Highcharts Developer
johnpettigrew
Posts: 20
Joined: Fri Jul 26, 2019 2:54 pm

Re: Zooming a mappie

Many thanks for that - I've got it working in my own code, which is lovely :D . And I'm sorry if my response wasn't as helpful as it might have been - the previous suggestion hadn't worked and it didn't seem to make sense to post a new fiddle with extra, non-functional and unnecessary code. I just tried to post enough to check that I'd not missed anything important. And, indeed, the answer lay elsewhere as you so kindly found and pointed out to me.
johnpettigrew
Posts: 20
Joined: Fri Jul 26, 2019 2:54 pm

Re: Zooming a mappie

A follow-up question: when I zoom my mappie (and again, thanks for helping with that), the pies don't scale as those in the reference example do - they stay the same size while the map gets larger. Where is this dynamic scaling applied? I have the sizeFormatter function in place (which scales the pies relative to each other) but can't see where the dynamic sizing is supposed to happen.

https://jsfiddle.net/johnpet/m7s4v1zy/4/

Thanks so much for the help!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Zooming a mappie

Hi again!

I've checked it and as far as I see the scaling works just fine. When you zoom in the map the pies get smaller and when you zoom out the map they get bigger. Maybe I don't see something, could you take a screenshot or describe it more specific?

Best regards!
Dominik Chudy
Highcharts Developer
johnpettigrew
Posts: 20
Joined: Fri Jul 26, 2019 2:54 pm

Re: Zooming a mappie

Thanks for checking, Dominik. However, what I see is this:
Image
Image

As you can see, the map gets bigger but the pie remains the same size, remaining hard to interact with. For small pies, it would be useful if they would (as in the canonical example) become larger when I zoom.

Can I suggest perhaps having a more minimal example of this chart type on the Highcharts website? The current example does lots of things (dividers, offsets), which makes the code complex to understand. When you don't need those extras, having a plainer example helps to see what's important (which is why I started from a different example to get my mappie). Unfortunately, that example turns out not to have had working zoom (I found too late that it was just disabled), so I am most grateful for your help getting this working!
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Zooming a mappie

Here's a demo with zoom working as requested and min size set to 10: https://jsfiddle.net/BlackLabel/t612efL8/

Thank you for the suggestion. We are always open for them, so if you have more feedback please share.

A minimal example for this demo would be an implementation of the series to work out of the box with a minimal API input like map series (or any other series). We are handling enhancement requests through the Highcharts main GitHub repository's issues (and track them through thumb up reactions), so please vote or open an issue for this feature if you are looking for it being added - https://github.com/highcharts/highcharts/issues

The current demo is targeted for programmers with some coding knowledge to show how the code could be edited or changed, so it is not the best starting point for others. However, we are here to help, so with some delay you should get the chart you are looking for.

Please let us know if you have any more questions.

Best regards,
Kacper Madej
Highcharts Developer
johnpettigrew
Posts: 20
Joined: Fri Jul 26, 2019 2:54 pm

Re: Zooming a mappie

That's lovely, thanks. JS isn't really my thing - I'm far more a Ruby on Rails person, I'm afraid, but some things are best done in JS! I do appreciate that this is a complex chart type so your patience is appreciated.

Seeing all the great examples of what Highcharts can do in the demo area is very useful and inspiring, but I assume part of the point is to provide jumping-off points for users for their own implementations. And having a complex example as the only mappie on the site makes it a bit trickier to work out what is going on with all the different parts of the code. I'll go and check out the issues as you suggest.
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Zooming a mappie

In case you will open a new issue please add a link for it here, so it will be easier for interested users and clients to vote one the issue.

Here is one of the related issue that could be voted on (through a thumbs up reaction): https://github.com/highcharts/highcharts/issues/12526

I case you (or someone else reading this) would be interested in some articles about Ruby on Rails and Highcharts then we have those in the official blog here: https://www.highcharts.com/blog/posts/f ... -on-rails/

Best regards,
Kacper Madej
Highcharts Developer
johnpettigrew
Posts: 20
Joined: Fri Jul 26, 2019 2:54 pm

Re: Zooming a mappie

Thanks for those links. Unfortunately, although the Ruby gem Daru looks pretty great, it only seems to have access to a limited set of Highcharts functionality, which means it's not suitable for everyone. I've raised an Issue asking for an example, and supplied a JSFiddle with a slightly simplified example of the code we ended up with in this thread.

The Issue's here if anyone thinks it's a good idea!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Zooming a mappie

Thanks for creating this issue!

Have a nice day. :)
Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Maps”