Issues with 'worldwithcountries' map

[Klakurka]

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

 

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();

 

[Ayan Bhadury]

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/

[Klakurka]

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): 

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!

[Ayan Bhadury]

Please check the modified sample - https://jsfiddle.net/0Lnosnmo/

For providing color based on range check this link - https://www.fusioncharts.com/dev/map-guide/colouring-based-on-data-range

Also, note the map is by default shown with left aligned using margin attributes will shift all the chart elements along with it.

[Klakurka]

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

[Klakurka]

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 April 2, 2018 by Klakurka

[Ayan Bhadury]

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. 

[Klakurka]

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);
	}

 

[Klakurka]

@Ayan Bhadury It doesn't look like legends are supported on this chart type. Is that the case? If they are, are there any example fiddles showcasing this?

Thanks again.

[Ayan Bhadury]

Yes, you can draw gradient legends using color range object of FusionCharts, check the sample fiddle for reference - http://jsfiddle.net/s21m70vm/

For details regarding this feature check this link - https://www.fusioncharts.com/dev/map-guide/colouring-based-on-data-range

[Klakurka]

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: 

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.

[Ayan Bhadury]

Hi,

Yes it is possible to show the legends without the gradient bar, please check the sample for reference - https://jsfiddle.net/m6vn4sce/

[Klakurka]

That's great, thanks so much!

[Ayan Bhadury]

Welcome