I am attempting to implement a custom interactive map using the Highcharts Maps JavaScript library (http://www.highcharts.com/maps/). I managed to get the map to appear on screen, but it far to small to view properly.
I took GeoJSON data for a map of Haiti with administrative boundaries.
The map is here: http://haitidata.org/layers/cnigs.spatialdata:hti_boundaries_communes_adm2_cnigs_polygon
This is a direct link to a GeoJSON file of the map data:
http://haitidata.org/geoserver/wfs?srsName=EPSG%3A4326&typename=cnigs.spatialdata%3Ahti_boundaries_communes_adm2_cnigs_polygon&outputFormat=json&version=1.0.0&service=WFS&request=GetFeature
Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type='text/css' href="css/normalize.css" type="text/css">
<link rel="stylesheet" type='text/css' href="css/main.css" type="text/css">
<link rel="stylesheet" type='text/css' href="css/responsive.css" type="text/css">
<!-- start JavaScript includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="js/haiti.js"></script> }
<!-- end JavaScript includes -->
</head>
<body>
<div id="container">
</div>
<p>This is some text.</p>
</body>
</html>
This is the content of haiti.js, a JavaScript file with the code to initialize the map:
$(function () {
// Prepare random data
var data = [
{
"id_dept": 1,
"value": 5000
},
{
"id_dept": 2,
"value": 10000
},
{
"id_dept": 3,
"value": 15000
},
{
"id_dept": 4,
"value": 20000
},
{
"id_dept": 5,
"value": 25000
},
{
"id_dept": 6,
"value": 30000
},
{
"id_dept": 7,
"value": 40000
},
{
"id_dept": 8,
"value": 5000
},
{
"id_dept": 9,
"value": 60000
},
{
"id_dept": 10,
"value": 70000
},
];
$.getJSON('js/haiti.json', function (geojson) {
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoom: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
},
series : [{
data : data,
mapData: geojson,
joinBy: ['id_com', 'id_dept'],
name: 'Random data',
dataLabels: {
enabled: true,
format: '{point.properties.id_com}'
}
}]
});
});
});
I have placed the GeoJSON data of the map in a separate file titled haiti.json. See link at top of question.
What I am doing wrong? The map is being displayed far too small and I am not able to click and zoom in on it.
Here is a screenshot of what is displayed on my screen. The container for the map should be 500px by 500px, so the map is showing up much small at just a few pixels width and height.
https://www.dropbox.com/s/844030r2o395zea/Screenshot%202014-08-01%2023.15.50.png
You can use maps from javascript and then use data module to add data to your map, like in the example: http://jsfiddle.net/X85CS/3/
var mapData = Highcharts.geojson(Highcharts.maps['countries/ht/ht-all']);
var data = [{
"value": 1438,
"code": "OU"
}];
Related
I'm an beginner in js code and i want to use Highcharts to construct a treemap with color from a csv.
My csv looks like that :
Name,Value,colorValue
The first column is the name.
The second one is the percentage of activity.
The third one is a color attribute to say if the percentage (of the 2nd column) has been increase or decrease (Color red to green).
Do someone has an example ?
Because it doesn't work, nothing happen (no error too), i think it come from the csv load.
Here my actual code :
HTML :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<pre id="data" style="display:none">Name,Value,colorValue
A,1,1
B,10,25
C,20,0
D,30,16
E,40,78
F,50,85
G,60,20
H,70,35
I,80,9
</pre>
<div id="container"></div>
<script src="Highcharts/code/highcharts.js"></script>
<script src="Highcharts/code/modules/heatmap.js"></script>
<script src="Highcharts/code/modules/treemap.js"></script>
<script src="Highcharts/code/modules/data.js"></script>
<script src="index.js"></script>
</body>
</html>
my Js :
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
}
}],
title: {
text: 'Highcharts Treemap'
}
});
The CSV data properties should not be inside a series object but chart object, like that:
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
keys: ['name', 'value', 'colorValue']
}],
title: {
text: 'Highcharts Treemap'
}
});
Demo:
https://jsfiddle.net/BlackLabel/L4uo8h13/1/
API reference:
https://api.highcharts.com/highcharts/data.csv
I need to implement mapbubble using highmaps. I have generated a custom geojson file using qgis for maps.
I refered this example but I am not getting the bubbles on the map. Even I do not have any errors in the console except this:
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Highmap</title>
</head>
<body>
<div id="container" style="height: 500px; min-width: 350px; max-width: 800px; margin: 0 auto;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/maps/modules/offline-exporting.js"></script>
<script src='./data/custom-world.js'></script>
<script>
$.getJSON('./data/data.json', function (data) {
Highcharts.mapChart('container', {
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_A2', 'name'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.deposited}: [BTC]'
}
}]
});
});
</script>
</body>
</html>
data.json
[
{
"name" : "GB",
"deposited" : "5"
},
{
"name" : "RU",
"deposited" : "10"
},
{
"name" : "CH",
"deposited" : "3"
},
{
"name" : "IN",
"deposited" : "50"
}
]
custom-world.js
Please download this file from here
Now the problem is, I am getting custom map but not the map bubbles.
Any help will be appreciated as these highchart/maps are bit confusing for me.
The code looks perfectly fine. However, the problem seems to be related to your data.json file. You don't define the size of the bubble (z - property). Check docs: https://api.highcharts.com/highmaps/series.mapbubble.data.z. That's why bubbles are not visible.
Example data.json:
[
{
"name" : "GB",
"deposited" : "5",
"z": 1000
},
{
"name" : "RU",
"deposited" : "10",
"z": 1350
}
...
]
Generally speaking, will a chart that reads embedded JSON also read a JSON file?
For example, my current chart looks like this:
anychart.onDocumentReady(function() {
chart = anychart.fromJson({
chart: {
type: "line",
series: [{
seriesType: "spline",
data: [{
x: "January",
value: 10000
}, {
x: "February",
value: 12000
}, {
x: "March",
value: 18000
}]
}],
container: "container"
}
}).draw();
});
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<div id="container"></div>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
Now, instead of the JSON being embedded, it's in a file called myData.json. Will that chart read the JSON file? Or does that depend on the chart?
Original post:
As you can see at the following example, the same data can be stored to an Object named data and then create the chart by using chart = anychart.fromJson(data).draw();
Since you want to get this data from a json file, you will have to use something like this: How to get JSON from URL in Javascript?
$.getJSON('http://your_json_url', function(data) {
anychart.fromJson(data).draw();
});
anychart.onDocumentReady(function() {
data = {
chart: {
type: "line",
series: [{
seriesType: "spline",
data: [{
x: "January",
value: 10000
}, {
x: "February",
value: 12000
}, {
x: "March",
value: 18000
}]
}],
container: "container"
}
}
chart = anychart.fromJson(data).draw();
});
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<div id="container"></div>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
Edit - working example:
file: test_data.json (take it as it is)
{
"chart": {
"type": "line",
"series": [{
"seriesType": "spline",
"data": [{
"x": "January",
"value": 10000
}, {
"x": "February",
"value": 12000
}, {
"x": "March",
"value": 18000
}]
}],
"container": "container"
}
}
file: index.html (modify the url of the json file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
$(document).ready(function(){
$.getJSON('http://localhost/json_chart_test/test_data.json', function(data) {
console.log(data);
anychart.fromJson(data).draw();
});
});
</script>
I am generating one image using High-Charts library but i have 40000 polygon series so it takes lot of time in plotting all those points.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function () {
var options = {
chart :{
type: 'polygon',
renderTo: 'container',
zoomType:'x'
},
title: {
text: ''
},
yAxis: {
title: false,
gridLineWidth:0,
lineWidth:0,
labels:{
enabled: false
}
},
xAxis: {
title: false,
gridLineWidth:0,
lineWidth:0,
labels:{
enabled: false
}
},
plotOptions: {
series: {
lineWidth: 1,
lineColor:'black',
}
},
series: []
};
$.getJSON('data.json', function(data) {
options.series=data;
var chart = new Highcharts.Chart(options);
})
$.getJSON('title.json', function(title) {
options.title.text=title;
var chart = new Highcharts.Chart(options);
})
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://highcharts.base.is/highcharts-downsample.js"></script>
<script src="http://highcharts.base.is/demo_data.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
sample data.json file
[{"showInLegend": false,"color": "#FFFFFF", "data": [[61448208.5, 10791], [61453100.5, 20575], [61451242.5, 24291], [61446350.5, 14507]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453100.5, 20575], [61453544, 21462], [61451686, 25178], [61451242.5, 24291]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453544, 21462], [61453681.5, 21737], [61451823.5, 25453], [61451686, 25178]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453681.5, 21737], [61459631.5, 33637], [61457773.5, 37353], [61451823.5, 25453]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61459631.5, 33637], [61462023.5, 38421], [61460165.5, 42137], [61457773.5, 37353]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462023.5, 38421], [61462226, 38826], [61460368, 42542], [61460165.5, 42137]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462226, 38826], [61462340, 39054], [61460482, 42770], [61460368, 42542]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462340, 39054], [61462372.5, 39119], [61460514.5, 42835], [61460482, 42770]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462372.5, 39119], [61462429.5, 39233], [61460571.5, 42949], [61460514.5, 42835]] }
]
Is there any way to down sample multiple series to some 100's or create a mouse event on selection of area so that plot can regenerate plot based on coordinates and read chunk of json data within that range.
If your data sets sizes are 50,000 points and beyond, you can consider using the Highcharts Boost module, released in the beginning of 2017 if memory serves. There are some great examples, like this Highcharts line chart with 600,000 data points across 600 series.
You just include the highcharts Boost module, either directly in a separate tag, or if using NPM just import the boost module from the highcharts package:
import boost from 'highcharts/modules/boost'
Then, you can add some boost options in your Highcharts options object, as an example:
{
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts Boost'
},
series: [{
boostThreshold: 1, // Boost when there are more than 1
// point in the chart.
data: [[0, 1], [1, 2], [2, 3]],
}]
};
I've found that module to be of great help as I'm working with multiple series of > 100,000 data points each and multiple charts on one page.
I've searched for a few hours and looked for tons of examples, but in the end noting has worked for me.
My problem: I want to use a server-side json for a Line-Highchart. In the examples, which I've found the json comes either from a database or in an already preformated json-file.
For my use case it looks like the following: I want to visualize the value "depending" on their timestamp.
sampleData.json
[{
"timestamp": "2014-05-22T02:15:00+02:00",
"value": 235.0
}, {
"timestamp": "2014-05-22T02:30:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T02:45:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:00:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:15:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:30:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:45:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T04:00:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T04:15:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T04:30:00+02:00",
"value": 235.0
}, {
"timestamp": "2014-05-22T04:45:00+02:00",
"value": 235.0
}, {
"timestamp": "2014-05-22T05:00:00+02:00",
"value": 235.0
}]
This json file is read by my getData.php
<?php
// It reads a json formatted text file and outputs it.
$json_o = file_get_contents("sampledata.json");
echo $json_o;
?>
The output looks exactly like the input, so exactly like the sampleData.json itself.
Now I use my highchart.html to create a Highchart.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/media/com_demo/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div><style type='text/css'></style>
<script type='text/javascript'>
$(function () {
$(document).ready(function () {
$(document).ready(function () {
function requestData() {
$.ajax({
url : 'getData.php',
datatype : 'json',
success : function (data) {
alert(data);
chart.series[0].setData(data[0]);
},
cache : false
});
}
var chart;
//Chart bits
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'line',
events : {
load : requestData
}
},
title: {
text: 'Line Chart'
},
xAxis: {
type: 'datetime',
minRange: 1 * 24 * 3600000 // one day
},
yAxis : {
title : {
text : 'Value'
}
},
legend: {
enabled: true
},
series : [{
name : 'Random data',
data : [0]
}
]
});
});
});
});
</script>
</head>
<body></body>
</html>
I've also put all of it in a JsFiddle (unfortunately with a "XMLHttpRequest cannot load"-Error) but maybe it is useful: http://jsfiddle.net/ft8hc/1/
Now we come to my actual questions:
Until now I get no data into my Chart. Although it is created, but there is no data loaded. The json itself is loaded - alert(data) shows me the sampleData.json.
Although I've looked through existing examples, I could not figured out, how to define the attributes, which should be used to draw the line and the axes. For me timestamp and value should be used.
Additionally I am not sure, if the json Format is the right one that can be used by Highchart. Is it okay like this or do I have to parse it differently?
Would be absolutely awesome if someone could help me. I've tried it for hours without success :-(
This is because you have no data specified in your chart definition.
See:
series : [{
name : 'Random data',
data : [0]
}]
Upon getting the JSON data, you must PUSH that data into this Series.data and generate the chart thereafter.
You can refer to this solution : https://stackoverflow.com/a/8169187/3660930
Your json should
- use values x/y instead of your custom names
- date should be timestamp (time in miliseconds) [number type]
- value should be number