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
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
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/
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 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/
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
}]