I have a component where I have to show high maps. No errors but the maps is always empty
My chart options object :
let chartData = [{ code3: "ABW", z: 105 }, { code3: "AFG", z: 35530 }];
this.chartConfigObject = new MapChart(<any>{
chart: {
borderWidth: 1,
map: 'custom/world'
},
title: {
text: 'World population 2013 by country'
},
subtitle: {
text: 'Demo of Highcharts map with bubbles'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
name: 'Population 2016',
joinBy: ['iso-a3', 'code3'],
data: chartData,
map: mapData,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
}
}]
});
When I console the created MapChart object i am getting the series as null always.
What am i missing and why the maps series is always null?
I am using angular-highcharts component as explained here :
https://github.com/cebor/angular-highcharts
reproduced in stackblitz: https://stackblitz.com/edit/angular-highcharts-stock-nbvnuw?file=app%2Fapp.module.ts
You are not providing the map data to your chart , so it doesn't know which map to show. Try showing the map data like mapData: Highcharts.maps['custom/world'] under Series.
If you cannot access the maps in your Highcharts reference , try importing all the maps (JS files) from the HighMaps library into your project and reference them in your typescript component file like this:
const Highcharts = {maps: {}};
require('../../../assets/maps')(Highcharts); //your custom project path
and use mapData: Highcharts['maps']['custom/world'] or whatever is the map you wanted to use like 'countries/us/us-all'
Below is working map code using angular-highcharts to plot the map and points on it:
getMap(data) {
return new MapChart({
chart: {
events: {
load: function (point) {
//do something here on page load
}
},
spacingBottom: 20
backgroundColor: '#FFF',
style: {fontFamily: 'inherit'}
},
title: {
text: ''
},
mapNavigation: {
enabled: true
},
tooltip: {
headerFormat: '',
formatter: function () {
var toolTipTxt = '<b>' + this.point.options.name + '</b>';
return toolTipTxt;
}
},
plotOptions: {
series: {
color: '#00A778',
marker: {
radius: 6,
symbol: 'circle',
lineColor: '#00A778',
lineWidth: 1,
states: {
select: {
fillColor: '#00A778',
lineWidth: 1,
lineColor: '#00A778'
}
}
},
point: {
events: {
click: function () {
this.select(null, true);
}
}
}
}
},
series: [
{
//mapData: Highcharts['maps']['custom/world']
mapData: Highcharts.maps['custom/world'],
name: 'Basemap',
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false,
data: []
},
{
// Specify points using lat/lon
type: 'mappoint',
name: 'MySites',
data: data
}
]
});
}
Also you need proj4js library to plot points on the map, in case if that's your requirement as well.
Hope this helps !
Might, it can be useful.
Here is the solution for angular-highcharts:
1) Download the map from collection:
https://code.highcharts.com/mapdata/
2) Create a variable that equals to the content of this file and export it:
instead of
Highcharts.maps["custom/world"] = { ... content of the file ... }
use
const worldMap = { ... content of the file ... }
export default worldMap;
2) Import this map to your component (for world-map.ts):
import worldMap from './world-map';
3) use
chart: {
...
map: worldMap,
...
},
And, of course, don't forget to add a couple of lines to your module:
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as highmaps from 'highcharts/modules/map.src';
#NgModule({
...
providers: [
{ provide: HIGHCHARTS_MODULES, useFactory: () => [highmaps] }
],
...
})
About modules: https://www.npmjs.com/package/angular-highcharts#highmaps
Here is the working example:
https://stackblitz.com/edit/angular-highcharts-stock-byjo6a
Solution was found here:
https://forum.highcharts.com/highmaps-usage-f14/highmaps-bubble-chart-is-empty-t40432/
Related
As the title says, i want to switch the tooltip header with the tootlip body text.
for me it makes no sense why the standard config is this way around...
i know i can create a custom tootlip but thats not my favorite way to do it.
the code im using currently
var options = {
series: [{
name: 'Series',
data: [v0, v1, v2, v3, v4]
}],
colors: ['#3979bd', '#c1a748', '#69b761', '#69b761', '#d54c4c'],
chart: {
type: 'bar',
height: 200
},
plotOptions: {
bar: {
distributed: true,
borderRadius: 0,
horizontal: true,
}
},
tooltip: {
enabled: true,
},
dataLabels: {
enabled: true,
},
xaxis: {
categories: ['open', 'planned', 'done', 'done cloud', 'stopped'],
}
};
var chart = new ApexCharts(document.querySelector("#overview_apex_sc4stats"), options);
chart.render();
and heres a image what i want
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 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}
});
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 am trying to create a dot density map of the state of Florida. While I know that Highmaps doesn't support color axis with mappoints. I extended it and it works but it comes with a side affect. When I click on one of the categories in the legend no hiding occurs. For example if I click on '>10', all values greater than 10 don't hide. When I open up the Chrome debugger it states that: a.setVisible is not a function What can I do to solve this problem. This is a requirement, while it may seem minor. I would appreciate any sort of tips or maybe some sort of example would be perfect. I can't show more code than what is shown. If you need me to explain more about the problem I will be glad to do so.
(function (H) {
H.seriesTypes.mappoint.prototype.axisTypes = [ 'xAxis', 'yAxis', 'colorAxis'];
H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) {
p.call(this);
H.seriesTypes.mappoint.prototype.translateColors.call(this);
});
H.seriesTypes.mappoint.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors;
H.seriesTypes.mappoint.prototype.colorKey = 'value';
})(Highcharts);
// Initiate the chart
$('#container').highcharts('Map', {
title: {
text: title
},
mapNavigation: {
enabled: false,
},
colorAxis: {
dataClasses: [{
from: 0,
to: 3,
color: "#66FFFF"
}, {
from: 4,
to: 9,
color: "#0099FF"
}, {
from: 10,
color: "#0000FF"
}
]
},
tooltip:
{
enabled: true
}
,
series: [{
mapData: Highcharts.maps['countries/us/us-fl-all'],
name: 'Basemap',
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false,
},
{
// Specify points using lat/lon
type: 'mappoint',
name: 'A',
turboThreshold: 2000000,
data: p_data,
dataLabels: {
enabled: false
}
},
{
// Specify points using lat/lon
type: 'mappoint',
name: 'B',
turboThreshold: 2000000,
data: m_data,
dataLabels: {
enabled: false
}
},
{
// Specify points using lat/lon
type: 'mappoint',
name: 'C',
turboThreshold: 2000000,
data: h_data,
dataLabels: {
enabled: false
}
}
]});
A sample to play with: http://jsfiddle.net/dlope073/4mabw6zr/2/
Use setVisible method from default map series. Like this: http://jsfiddle.net/4mabw6zr/3
(function (H) {
H.seriesTypes.mappoint.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis'];
H.seriesTypes.mappoint.prototype.pointClass.prototype.setVisible = H.seriesTypes.map.prototype.pointClass.prototype.setVisible; // use the same setVisible method as map type.
H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) {
p.call(this);
H.seriesTypes.mappoint.prototype.translateColors.call(this);
});
H.seriesTypes.mappoint.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors;
H.seriesTypes.mappoint.prototype.colorKey = 'value';
})(Highcharts);