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?
Related
I was working on India map demo in Highcharts, that have the following code:
// Create the chart
Highcharts.mapChart('container', {
chart: {
//type:'mappoint',
map: 'countries/in/custom/in-all-disputed'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: India with disputed territories'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
It was working fine until I used type: "mappoint" .
I want to use mappoint type to dislplay points on the states of the country.
but using this mappoint type. my chart gets vanished and random points are showing on the screen.
You can see the example below in my fiddle:
https://jsfiddle.net/abnitchauhan/5naocyqw/
In order to use the mappoint series, you have to specify the position of each point.
You can do this by specifying the latitude and longitude.
Remember to import the proj4js library in order to work with lat and lon.
{
type: 'mappoint',
data: [{
name: 'New Delhi',
lat: 28.644800,
lon: 77.216721
}]
}
Demo: https://jsfiddle.net/BlackLabel/g49xcm7n/
What I want to accomplish is to join/merge two or more regions in Highmaps. E.g. say you want to show the population for Europe + Asia, then when you hoover Asia or Europe they appear as one connected region with the acumulated population
I tried the following, but with no success:
var data = [
[['eu', 'as'], 0],
['af', 2],
['na', 4],
['sa', 5]];
With the fiddle: https://jsfiddle.net/2ek3mp1s/3/
Any ideas?
Of course, one option is to change the underlying geo data. But if you don't want to do that, you can tweak the mouseOver event so that it highlights at the same time the countries with the same value.
Here's a demo:
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['eu', 0],
['as', 0],
['af', 2],
['na', 4],
['sa', 5]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/world-continents'
},
title: {
text: 'Highmaps basic demo'
},
plotOptions: {
map: {
point: {
events: {
mouseOver: function() {
var v = this.value
Highcharts.each(this.series.points, function(p) {
if (v == p.value) {
p.setState('hover')
}
});
},
mouseOut: function() {
Highcharts.each(this.series.points, function(p) {
p.setState('')
});
}
}
},
allAreas: false,
}
},
subtitle: {
text: 'Source map: World continents'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
})
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world-continents.js"></script>
<div id="container"></div>
Jsfiddle: https://jsfiddle.net/user2314737/uhp2wgkn/
See also Highcharts "Categorized areas" demo
Not solving my exact issue, but found a way to achieve similar for Europe. In this case I connect Sweden and Finland("name": "path7025"):
http://jsfiddle.net/huqfkc2y/
by adding their respective region. Case dismissed.
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
}]
Hello I have a column Chart which displays servers. The X-axis shows how much they are used and the Y-axis counts them. Now I have for every group (with group I mean all Server on acolumn like "0-5%") an array of the server names. I would like to display this array in the right corner when I hover them like here with the value: Link
This is the code I already have the obj are Arrays which count the servers:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Server Disk root used in %'
},
subtitle: {
text: 'All Linux Servers'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Anzahl Server'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
pointFormat: 'Anzahl Server: <b>{point.y}</b>'
},
series: [{
name: 'Server',
data: [
['0-5%', obj2],
['5-10%', obj5],
['10-15%', obj8],
['15-20%', obj11],
['20-25%', obj14],
['25-30%', obj17],
['30-35%', obj20],
['35-40%', obj23],
['40-45%', obj26],
['45-50%', obj29],
['50-55%', obj32],
['55-60%', obj35],
['60-65%', obj38],
['65-70%', obj41],
['70-100%',obj44]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 5,// 5 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
Here is a picture of my Chart:
The Arrays which I want to dsiplay when hover look like that
obj1 = ["server11", "server1125", "server1127"]
For every column there is an array like that this one is the array for the 0-5% column.
You need to use tooltip positioner function and define x,y coordinates where you want to show it.
positioner: function () {
return { x: 500, y: 30 };
}
See the fiddle here
The link you provided itself answers it. Not sure where you are getting stuck? Could you elaborate?
You need to use mouseOver and mouseOut event functions inside plotOptions to define what needs to be show when hovering over the data points.
New to highcharts and as the title said I am trying to pull json from a webservice and place it into the chart (bar chart) but I am getting some weird behavior. after I pull the data down through $http.get() I try and set the series to that string of json like series: '$scope.jsondata'. It will fill some legends (more than expected) so it is getting the data. but the bars on the chart wont show.
On the other hand when I go to the url where I am getting the json and just copy and paste all of the json into the series field, it works perfectly.
I have a plunker here I have been working on that shows what I am talking about. You can just paste:
[
{
"name":"Kaia",
"data":[19]
},
{
"name":"Deborah",
"data":[86]
},
{
"name":"Phoebe",
"data":[77]
},
{
"name":"Rory",
"data":[17]
},
{
"name":"Savannah",
"data":[15]
}
]
...into the series field and everything works.
EDIT I havent yet, but I am planning to use $interval to update the data every x seconds. Something like :
$http.get(fullUrl).success(function(data2) {
$scope.records = [];
data2.forEach(function(r) {
$scope.records.push(r);
});
});
mainInterval = $interval(function() {
$http.get(fullUrl).success(function(data2) {
$scope.records = [];
data2.forEach(function(r) {
$scope.records.push(r);
});
});
}, 5000);
So like one of the answers suggested I put the chart creation in the callback of the $http.get() but I think that'd hinder the $interval
You can move the creation of the Chart into the callback of the get call to simplify things. http://plnkr.co/edit/utQG34xOQmtbOukTK71e?p=preview
Note I also updated series: '$scope.jsondata' to series: $scope.jsondata.
$http.get('https://api.myjson.com/bins/38qm9').success(function(ret) {
$scope.jsondata = ret;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Active Users'
},
xAxis: {
categories: ['user']
},
yAxis: {
min: 0,
title: {
text: 'Total Score',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'top',
x: -40,
y: 100,
floating: false,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: false
},
credits: {
enabled: false
},
series: $scope.jsondata
});
console.debug($scope.jsondata);
});