I'm displaying the USA states and using the full USA map from the highmaps collection. If I'm hiding or only showing N states is there a way to resize the rendered map area to zoom or show only the visible area.
An example would be to show all states on the east coast only. Right now the full USA map "area" is shown but it's blank.
Can highmaps limit the visible area to a smaller than full-map-area? Such as "center on visible area?
Or is the preffered way to show sections of the USA to provide custom map data which only renders sections of the USA you want to show on a map.
Example Map:
Example JS:
<!--//--><![CDATA[//><!--
jQuery(document).ready(function () {
var rep_color = 'orange';
var dem_color = '#244999';
jQuery.getJSON("http://maps.example/sites/default/files/geojson-maps/current-usa.geojson", function(geojson_result) {
jQuery(".prez-map.map-1278").slideDown().highcharts('Map', {
chart : {
borderWidth : 1,
borderColor: 'silver',
borderRadius: 3,
shadow: true
},
credits: {
enabled: false
},
title : {
text : ""
},
subtitle : {
text : ''
},
legend: {
enabled: false
},
series: [{
// This is the result of the .getJSON call value which passes it's result to the anonymous function. We will load this Nodes file value URL to get this data.
mapData: geojson_result,
borderColor: 'white',
nullColor: 'white',
allAreas: true,
dataLabels: {
enabled: false,
color: '#FFFFFF',
format: '{point.code}'
},
data: [{"code":"ME","color":"#CC6600"},{"code":"NH","color":"#CC6600"},{"code":"MA","color":"#CC6600"},{"code":"CT","color":"#CC6600"},{"code":"NJ","color":"#CC6600"},{"code":"PA","color":"#CC6600"},{"code":"DE","color":"#CC6600"},{"code":"MD","color":"#CC6600"},{"code":"VA","color":"#CC6600"},{"code":"PA","color":"#CC6600"},{"code":"KY","color":"#CC6600"},{"code":"SC","color":"#CC6600"},{"code":"GA","color":"#CC6600"}],
// Take a key in data and map it to a key in mapData.
joinBy: ['postal-code', 'code']
}]
});
});
});
//--><!]]>
Here is a js fiddle example: https://jsfiddle.net/geogeorge/0aaca5xx/14/
Add the following script to your page header:
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js</script>
Then, include the code below in your map series section:
series: [{
data: data,
color:"blue",
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
format: '{point.name}'
}
}, {
name: 'Separators',
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
color: 'silver',
showInLegend: false,
enableMouseTracking: false
}]
Related
So I have is a dummy data of Indian Country Map. For example, I am using the Highchart's Indian Map Dummy Data.
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/in/in-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: India'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
type: 'mapbubble', // This I added
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
This is the example I am using : https://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/countries/in/in-all
But When I am trying to Channge the Chart to MapBubble Type . The Chart is getting Vanished :
Like in the link below
https://jsfiddle.net/abnitchauhan/tdk7a8ex/
I Want the Chart to have mapBubble. but its throwing an error.
Any Help is really appreciated.
You need another series for map data and a data in the bubble series with z values:
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
keys: ['hc-key', 'z'],
joinBy: ['hc-key'],
data: data,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/wj7rzq2p/
API Reference: https://api.highcharts.com/highmaps/series.mapbubble.data
I need to be able to render a map of the US as a chorpleth of states, then click on a state to just show that state's county divisions as a choropleth. I am using the base demo found here. I expanded that and am running into an issue where the data is not rendering the choropleth (ie, all areas have null value). Our source of the geojson is an internal ESRI service that uses full fips codes for the area identifier and the data contains a property of "Maparea" that I then use in the joinBy clause:
joinBy: ['fips', 'Maparea']
The data is pulled back dynamically from our data source (REST call) but it does not appear that is the cause of this issue as it occurs even with hardcoded data.
This works if I just show the states or just the counties. If I add in the drilldown ability I lose info on the drilldown series and then drilling back up produces and interesting artifact that the national map now has counties as shown for the state I clicked on instead of the state "shape". So, I have two problems:
Drill down does not produce choropleth
Drill up produces corrupt map
I have created a simple demo using CT as the state. Click on it and it should render the counties in CT and a choropleth. Drilling up should just go back to state map. Demo here. Code (minus test data):
// Set drilldown pointers
$.each(statedata.data, function(i) {
this.drilldown = this.Maparea.substring(0, 2);
});
// Instantiate the map
Highcharts.mapChart('container', {
chart: {
map: stateMap,
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this;
//Neded this bit to just show the county shapes
chart.update({
chart: {
map: countyMap
}
});
chart.addSeriesAsDrilldown(e.point, [{
mapData: countyMap
}, countyData]);
}
this.setTitle(null, {
text: e.point.areaname
});
},
drillup: function() {
this.setTitle(null, {
text: ''
});
}
}
},
title: {
text: 'Highcharts Map Drilldown'
},
subtitle: {
text: '',
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series: [{
map: stateMap
}, statedata],
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textOutline: '1px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
Notice that in the official demo the chart.map update doesn't exist - this behaviour changes the working of the drillup functionality.
Try to assign the map to the drilldown data series as:
mapData: Highcharts.geojson(countyMap),
Demo: https://jsfiddle.net/BlackLabel/4hcxeku7/
Is this an output which you want to achieve?
I am using Highcharts Js to display the Highmaps map bubble data. but the problem is that the Chart not plotting the bubble on Kosovo Country . For Example
if I have a JSON Data as Follows .
[
{"Country":"kosovo","persons":"2","CountryCode":"XK"},
{"Country":"india","persons":"2","CountryCode":"IN"}
]
The Map is being displayed with only India Country Data. and shows nothing of Kosovo Country.
This is The Javascript i used :
var data_country = [{"Country":"kosovo","persons":"2","CountryCode":"XK"},
{"Country":"india","persons":"2","CountryCode":"IN"}
] ;
data_country = data_country.map(function(el){
return {name: el.Country, z: parseInt(el.persons), 'iso-a2': el.CountryCode}
})
Highcharts.mapChart('world-map', {
chart: {
plotBorderWidth: 1,
plotBorderColor: '#ffffff',
borderColor: "#ffffff",
plotBackgroundColor: '#FFFFff',
map: 'custom/world'
},
title: {
text: "" ,
enabled: false
},
credits: {
enabled: false
},
exporting:{
enabled: false
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [{
name: 'Countries',
color: '#E0E0E0',
states: {
inactive: {
opacity: 1
}
},
enableMouseTracking: false
}, {
type: 'mapbubble',
name: '',
joinBy: 'iso-a2',//'iso-a3', 'code3'],
data: data_country,
minSize: '4%',
color: '#577ba8',
marker: {
fillOpacity: 0.9
},
maxSize: '4%',
tooltip: {
pointFormat: '{point.properties.name}'
}
}]
});
Please Tell me If I am missing something or is this an Highmaps error.
I see you are using the unofficial country code, as it has no official ISO country code:
The unofficial 2 and 3-digit codes are used by the European Commission and others until Kosovo is assigned an ISO code.
I also see that using KV in Highmaps seems to work. I'm not sure why they are using this partical country code. For example, from you code (JSFiddle):
var data_country = [{"Country":"kosovo","persons":"2","CountryCode":"KV"},
{"Country":"india","persons":"2","CountryCode":"IN"}
];
data_country = data_country.map(function(el){
return {name: el.Country, z: parseInt(el.persons), 'iso-a2': el.CountryCode}
});
I have Flot line chart with two dataseries. I would like to edit the tooltips independently for each series. I have tried moving the tooltip settings to the dataset part but it didn't work.
Does anyone know a solution?
$(function () {
var barOptions = {
xaxis: {
tickDecimals: 0
},
yaxes: [{
position: "left"
}, {
position: "right"
}],
colors: ["#36c6d3"],
grid: {
color: "#888888"
},
tooltip: {
show: true,
content: "Uge %x, %s: %y"
}
};
var dataset = [{
data: occData.data,
label: occData.label,
yaxis: occData.yaxis,
lines: {
show: true,
lineWidth: 1,
}
}, {
data: houseData.data,
label: houseData.label,
yaxis: houseData.yaxis,
color: 'grey',
lines: {
show: true,
lineWidth: 1,
fill: false
}
}];
$("#flot-line-chart-past").plot(dataset, barOptions);
});
I'm going to presume that you are using flot.tooltip to provide the tooltips. In which case, the content property of the tooltip configuration object can be a function as well as a format string. I quote from the documentation for the plug-in:
you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.
So write a function that distinguishes between each label you use for the two series, and return a different format string for each.
Using Highmaps, When map bubble and data labels are used together. Zooming into a country still shows the data labels of few other countries in a shabby way(at the bottom of the container).
I have reproduced the bug here:
http://jsfiddle.net/q2nxbcee/1/
{
type: 'mapbubble',
mapData: mapData,
name: 'Population 2013',
joinBy: ['iso-a2', 'code'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.code}: {point.z} thousands'
},
dataLabels: {
enabled: true,
//allowOverlap: true,
formatter: function() {
if (this.point.value > 0) {
return this.point.value;
} else {
return 10;
}
}
}
}
Screenshot of the issue:
Observation
The data labels are displayed at the bottom which are labels of some bubbles at the bottom, which must not be showed.
According to the provided documentation
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.overflow
you need to add the following attributes to dataLabels
dataLabels : {
overflow: 'none',
crop:false
}
JSFiddle