Klakurka

Issues with 'worldwithcountries' map

Recommended Posts

Hi there,

I've run into a couple of issues with the 'worldwithcountries' map and was hoping to get some help.

  1. Adding a subtitle messes up the colouring of Greenland on Chrome (seen below). This does not happen in FF. Removing the subtitle 'fixes' it.
  2. The alignment of the actual map is over very far to the left. Is there any way to center this?
  3. I am trying to display a number of countries with red colouring but they are coming out as black. Is it because the values are 0?

Any help would be appreciated!

Thanks

 

image.thumb.png.7ca64e6b7d076e4c2a27c39fb4c1b906.png

var chartHeight = '550';

		var chart = new FusionCharts({
			type: 'worldwithcountries',
			renderAt: 'chart',
			dataFormat: 'json',
			dataSource: '{"chart":{"animation":"0","usehovercolor":"1","canvasbordercolor":"FFFFFF","bordercolor":"FFFFFF","showlegend":"0","showshadow":"0","caption":"[TITLE]","subcaption":"[SUBTITLE]","connectorcolor":"000000","hovercolor":"AAAAAA","showLabels":"0"},"colorrange":{"gradient":"0","color":[{"maxvalue":"0","code":"FF0000"},{"maxvalue":"1","code":"43a047"},{"maxvalue":"2","code":"fbc02d"},{"maxvalue":"3","code":"CCCCCC"},{"maxvalue":"4","code":"aed581"}]},"data":[{"id":"93","value":"1"},{"id":"129","value":"3"},{"id":"39","value":"3"},{"id":"208","value":"2"},{"id":"130","value":"4"},{"id":"40","value":"3"},{"id":"207","value":"3"},{"id":"01","value":"3"},{"id":"25","value":"1"},{"id":"94","value":"3"},{"id":"206","value":"3"},{"id":"175","value":"1"},{"id":"131","value":"1"},{"id":"95","value":"1"},{"id":"02","value":"3"},{"id":"190","value":"3"},{"id":"96","value":"0"},{"id":"03","value":"4"},{"id":"132","value":"3"},{"id":"133","value":"1"},{"id":"04","value":"3"},{"id":"41","value":"3"},{"id":"209","value":"3"},{"id":"97","value":"3"},{"id":"26","value":"0"},{"id":"134","value":"3"},{"id":"42","value":"3"},{"id":"27","value":"1"},{"id":"238","value":"3"},{"id":"98","value":"3"},{"id":"135","value":"1"},{"id":"43","value":"3"},{"id":"44","value":"3"},{"id":"100","value":"3"},{"id":"45","value":"3"},{"id":"05","value":"1"},{"id":"46","value":"3"},{"id":"203","value":"3"},{"id":"47","value":"3"},{"id":"48","value":"3"},{"id":"28","value":"1"},{"id":"101","value":"1"},{"id":"210","value":"3"},{"id":"211","value":"3"},{"id":"29","value":"2"},{"id":"49","value":"3"},{"id":"91","value":"3"},{"id":"212","value":"3"},{"id":"06","value":"3"},{"id":"50","value":"3"},{"id":"136","value":"1"},{"id":"07","value":"1"},{"id":"228","value":"3"},{"id":"172","value":"1"},{"id":"137","value":"1"},{"id":"51","value":"3"},{"id":"138","value":"1"},{"id":"52","value":"3"},{"id":"08","value":"3"},{"id":"09","value":"3"},{"id":"30","value":"0"},{"id":"53","value":"1"},{"id":"10","value":"3"},{"id":"54","value":"3"},{"id":"55","value":"3"},{"id":"139","value":"1"},{"id":"56","value":"3"},{"id":"31","value":"3"},{"id":"213","value":"3"},{"id":"179","value":"3"},{"id":"176","value":"3"},{"id":"140","value":"1"},{"id":"141","value":"1"},{"id":"32","value":"3"},{"id":"214","value":"3"},{"id":"57","value":"3"},{"id":"90","value":"3"},{"id":"103","value":"1"},{"id":"142","value":"1"},{"id":"58","value":"3"},{"id":"216","value":"3"},{"id":"143","value":"1"},{"id":"24","value":"3"},{"id":"11","value":"3"},{"id":"217","value":"3"},{"id":"218","value":"3"},{"id":"12","value":"3"},{"id":"219","value":"3"},{"id":"59","value":"3"},{"id":"60","value":"3"},{"id":"33","value":"3"},{"id":"13","value":"3"},{"id":"171","value":"3"},{"id":"14","value":"3"},{"id":"127","value":"1"},{"id":"144","value":"1"},{"id":"145","value":"2"},{"id":"104","value":"1"},{"id":"105","value":"2"},{"id":"106","value":"2"},{"id":"191","value":"3"},{"id":"146","value":"1"},{"id":"223","value":"1"},{"id":"192","value":"1"},{"id":"147","value":"1"},{"id":"15","value":"3"},{"id":"107","value":"1"},{"id":"220","value":"1"},{"id":"193","value":"2"},{"id":"108","value":"3"},{"id":"61","value":"1"},{"id":"177","value":"3"},{"id":"205","value":"3"},{"id":"194","value":"1"},{"id":"111","value":"4"},{"id":"112","value":"3"},{"id":"148","value":"1"},{"id":"195","value":"1"},{"id":"62","value":"3"},{"id":"63","value":"3"},{"id":"64","value":"3"},{"id":"149","value":"3"},{"id":"150","value":"1"},{"id":"151","value":"1"},{"id":"128","value":"3"},{"id":"65","value":"3"},{"id":"66","value":"3"},{"id":"113","value":"4"},{"id":"222","value":"3"},{"id":"67","value":"3"},{"id":"153","value":"1"},{"id":"178","value":"3"},{"id":"224","value":"3"},{"id":"68","value":"3"},{"id":"92","value":"4"},{"id":"225","value":"3"},{"id":"16","value":"2"},{"id":"155","value":"1"},{"id":"114","value":"3"},{"id":"156","value":"3"},{"id":"226","value":"3"},{"id":"69","value":"3"},{"id":"70","value":"3"},{"id":"99","value":"3"},{"id":"71","value":"3"},{"id":"180","value":"3"},{"id":"115","value":"4"},{"id":"157","value":"1"},{"id":"189","value":"3"},{"id":"181","value":"1"},{"id":"17","value":"1"},{"id":"72","value":"3"},{"id":"73","value":"3"},{"id":"230","value":"3"},{"id":"231","value":"3"},{"id":"109","value":"3"},{"id":"232","value":"3"},{"id":"158","value":"1"},{"id":"196","value":"3"},{"id":"116","value":"1"},{"id":"182","value":"3"},{"id":"18","value":"3"},{"id":"183","value":"3"},{"id":"34","value":"3"},{"id":"35","value":"3"},{"id":"117","value":"4"},{"id":"233","value":"3"},{"id":"159","value":"1"},{"id":"160","value":"1"},{"id":"202","value":"3"},{"id":"197","value":"3"},{"id":"152","value":"3"},{"id":"154","value":"3"},{"id":"234","value":"3"},{"id":"161","value":"1"},{"id":"118","value":"1"},{"id":"74","value":"3"},{"id":"235","value":"3"},{"id":"19","value":"3"},{"id":"20","value":"3"},{"id":"236","value":"3"},{"id":"21","value":"3"},{"id":"184","value":"3"},{"id":"162","value":"1"},{"id":"75","value":"3"},{"id":"198","value":"3"},{"id":"76","value":"3"},{"id":"163","value":"1"},{"id":"77","value":"3"},{"id":"78","value":"3"},{"id":"119","value":"1"},{"id":"229","value":"3"},{"id":"164","value":"1"},{"id":"165","value":"1"},{"id":"185","value":"3"},{"id":"79","value":"3"},{"id":"80","value":"1"},{"id":"215","value":"3"},{"id":"110","value":"1"},{"id":"204","value":"3"},{"id":"166","value":"1"},{"id":"120","value":"3"},{"id":"81","value":"3"},{"id":"36","value":"3"},{"id":"82","value":"3"},{"id":"167","value":"1"},{"id":"168","value":"1"},{"id":"199","value":"3"},{"id":"126","value":"1"},{"id":"121","value":"3"},{"id":"122","value":"1"},{"id":"102","value":"3"},{"id":"84","value":"3"},{"id":"186","value":"3"},{"id":"22","value":"3"},{"id":"85","value":"4"},{"id":"173","value":"1"},{"id":"123","value":"3"},{"id":"237","value":"3"},{"id":"187","value":"3"},{"id":"239","value":"3"},{"id":"86","value":"3"},{"id":"169","value":"1"},{"id":"200","value":"3"},{"id":"170","value":"1"},{"id":"83","value":"3"},{"id":"23","value":"1"},{"id":"37","value":"3"},{"id":"124","value":"3"},{"id":"188","value":"3"},{"id":"38","value":"0"},{"id":"125","value":"4"},{"id":"241","value":"3"},{"id":"240","value":"3"},{"id":"87","value":"3"},{"id":"201","value":"3"},{"id":"88","value":"2"},{"id":"89","value":"3"}]}',
			width: '100%',
			height: chartHeight
		});
		chart.render();

 

Share this post


Link to post
Share on other sites

Hi,

I check the sample at my end using the latest version i.e 3.12.2 on Chrome browser and the Greenland entity is showing properly.

Regarding changing the alignment of the chart please use margin attribute to change the position accordingly from here - https://www.fusioncharts.com/dev/maps/attribute-reference#map-padding--margins-10

Also for reference please check the sample fiddle- http://jsfiddle.net/0dbxa0g6/

Share this post


Link to post
Share on other sites

Hey Ayan,

Thanks for the response.

The issue with Greenland seems to be resolution-based (of the chart itself). Here is what it looks like at a different size (notice the single thin white object in the middle of it rather than covering one half): image.png.157abb77bf29a65d9b81cc59b7159820.png

Reducing the size further seems to fix it so perhaps I'll just mess with that.

 

Unfortunately, the margin attributes shift the title/subtitle as well so that it's just the same situation but everything is moved over (so I can either get the map to be centered or the title but not both)... this is the same in all browsers so I don't think it's intended but I could be wrong... do you have any other ideas on this? The copied fiddle example has this issue as well (for me at least).

Also, do you know why the black-coloured countries do not show up as the intended colour (#FF0000)? This issue is also present in the copied fiddle example.

Thanks!

Share this post


Link to post
Share on other sites

Hi Ayan,

Thanks!

My only question left is related to the alignment. It looks like everything is actually centered by default (title, subtitle, and map) but the actual alignment of the map is kind of off center (but it's definitely not left aligned like you said it would be by default). The title/subtitle (which are correctly centered) sit above Moscow/Iraq/Saudi Arabia when it should really be above Sweden/Norway (due to the actual map being offset to the left slightly).

Is there any way to fix this? Changing the margins does shift the map over but it also shifts the title/subtitle over too so it doesn't actually solve the problem.

Thanks again

Share this post


Link to post
Share on other sites

I found out that this horizontal centering issue is due to a number of small islands off to the far right of the map (in the pacific ocean).

Visible here: https://www.fusioncharts.com/charts/fusionmaps/?map=world-map-with-countries

Is there any way to compensate for this in the chart attributes? I'd like to either ignore/cut off the islands in the pacific or add extra margin to the left side of the map.

[edit] To clarify, this is ONLY an issue on the 'World Map with Countries' chart. The standard 'World Map' does not have this issue.

Thanks

Edited by Klakurka

Share this post


Link to post
Share on other sites

Hi,

you can hide the islands by setting its alpha as 0 at the data level but this will still take the place and the alignment will not change you can either use map margins configurations to set the alignment https://www.fusioncharts.com/dev/maps/attribute-reference#map-padding--margins-10 else if you especially want to remove the islands this can be done using a custom map implementation which will be based on your requirements, if you are looking for the custom map kindly drop a mail to [email protected], with your requirements. 

Share this post


Link to post
Share on other sites

For anyone else who wants a quick fix for this one:

events: {
    drawComplete: function() {
    	reAlignMapChart();
    },
    renderComplete: function() {
        if (!mapChartHasBeenReAligned) {
        	reAlignMapChart();
        }
    },
    resized: function() {
        reAlignMapChart();
    }
}


	// Handle map chart offset as a result of the islands west of Asia/Australia.
	function reAlignMapChart() {
		// Ensure that we're doing this just after the chart is calculated but before it's rendered.
		setTimeout(function() {
			var mainMapObjectToMove = $('.raphael-group-8-dataset');

			// Check if chart is ready yet.
			if (mainMapObjectToMove.attr('transform') == null) {
				return;
			}

			var transformationProperties = mainMapObjectToMove.attr('transform').split(',');

			if (parseInt(transformationProperties[4]) == 0) {
				transformationProperties[4] = window.innerWidth / 14.5; // found through manual testing.
			} else {
				transformationProperties[4] = parseInt(transformationProperties[4]) * 1.272; // Found through manual testing.
			}

			var newTransformation = transformationProperties.join();
			mainMapObjectToMove.attr('transform', newTransformation);

			mapChartHasBeenReAligned = true;
		}, 0);
	}

 

Share this post


Link to post
Share on other sites

The default 'gradient' legends aren't really ideal for this particular use case and also seem to have a weird side effect of messing with the scaling of the map (ends up being about 50% as big).

It doesn't look like FusionMaps supports the FusionCharts-styled legends: image.png.8f118195ce19e9cf8d9f5f3689fc316f.png

If that's the case, adding a simple .png/jpeg image that looks like the normal legend (but can't be interacted with) would be sufficient but I don't see anywhere in the docs that outlines how to insert arbitrary images into charts. It would be possible to add it outside of the chart but then chart exporting would not include the legend which is not ideal.

Is there a reasonably straight forward way of appending a custom image to the bottom of a chart if there is no way to display the FusionCharts-style legends on a FusionMaps chart?

Thanks again for the help on this.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now