I'm trying to create a mapping website for my thesis. I got this sample from high-maps, and it works.
// Prepare random data
var data = [
['DE.SH', 728],
['DE.BE', 710],
['DE.MV', 963],
['DE.HB', 541],
['DE.HH', 622],
['DE.RP', 866],
['DE.SL', 398],
['DE.BY', 785],
['DE.SN', 223],
['DE.ST', 605],
['DE.NW', 237],
['DE.BW', 157],
['DE.HE', 134],
['DE.NI', 136],
['DE.TH', 704],
['DE.', 361]
];
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
tickPixelInterval: 100
},
series: [{
data: data,
mapData: geojson,
joinBy: ['code_hasc', 0],
keys: ['code_hasc', 'value'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<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/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px"></div>
I have a map file which is located in my local data, so I want to change the existing map with mine and also change the random data. I try to change the $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?', function (geojson) with $.getJSON('3312kec.geojson', function (geojson).
// Prepare random data
var data = [
['010', 728],
['020', 710],
['030', 963],
['040', 541],
['050', 622],
['060', 866],
['070', 398],
['080', 785],
['090', 223],
['100', 605],
['110', 237],
['120', 157],
['130', 134],
['140', 136],
['150', 704],
['160', 398],
['170', 785],
['180', 223],
['190', 605],
['200', 237],
['201', 157],
['210', 134],
['220', 136],
['230', 704],
['240', 361]
];
$.getJSON('3312kec.geojson', function (geojson) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
tickPixelInterval: 100
},
series: [{
data: data,
mapData: geojson,
joinBy: ['code_hasc', 0],
keys: ['code_hasc', 'value'],
name: 'Random data',
states: {
hover: {
color: '#a4edba'
}
},
dataLabels: {
enabled: true,
format: '{point.properties.postal}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<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/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px"></div>
I have tried various ways but always failed. Is there someone who can help me?
Related
I am trying to understand from this demo
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-time-series
by changing only data and run it , But it not working , from my understand datetime type it should be millisecond right ?
This test data is select from mysql by using command UNIX_TIMESTAMP(dateTime_Field)*1000
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: '[[1015174800000, 62], [1044810000000, 86], [1081011600000, 147], [1110819600000, 177], [1137344400000, 408], [1191258000000, 1612], [1221411600000, 960], [1240160400000, 960], [1291395600000, 6833], [1319043600000, 2952], [1332262800000, 3746], [1366995600000, 5612], [1417971600000, 8662], [1442250000000, 6504], [1482166800000, 15010], [1512838800000, 8168], [1526662800000, 10439], [1559581200000, 33594], [1580922000000, 22307], [1614186000000, 25955]]'
}]
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 360px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Highcharts has extensive support for time series, and will adapt
intelligently to the input data. Click and drag in the chart to zoom in
and inspect the data.
</p>
</figure>
Your data structure looks correct, but you need to use an array instead of a string. You can use JSON.parse to convert.
series: [{
type: 'area',
name: 'USD to EUR',
data: JSON.parse('[[1015174800000, 62], [1044810000000, 86], ...]')
}]
Live demo: https://jsfiddle.net/BlackLabel/w9vfut1k/
API Reference: https://api.highcharts.com/highcharts/series.area.data
I am using high charts https://www.highcharts.com/ for making a combination chart of Jump line and Column chart. High charts do not have such type for jump line charts . Can anyone have better solution?
How can I integrate jump line chart with column chart using high charts ?
This is what I need to make ...
Combo Chart
Here's the code I am using
Highcharts.chart("container", {
title: {
text: "Combination chart"
},
plotOptions: {
column: {
borderRadius: 5
},
series: {
marker: {
enabled: false
}
}
},
xAxis: {
categories: ["PU", "EK", "EY", "BR", "MS", "DL", "JL", "BA", "NZ", "CV"]
},
labels: {
items: [
{
// html: 'Total fruit consumption',
style: {
left: "50px",
top: "18px",
color:
// theme
(Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color) ||
"black"
}
}
]
},
series: [
{
// max:0,
pointWidth: 7,
type: "column",
name: "TP",
lineWidth: 8,
data: [10, 45, 15, 95, 10, 100, 75, 20, 66, 55]
},
{
type: "column",
name: "1S",
pointWidth: 7,
data: [13, 25, 50, 75, 100, 60, 25, 50, 75, 100],
// yAxis: 1
},
{
type: "column",
name: "1A",
pointWidth: 7,
data: [13, 20, 50, 75, 100, 40, 28, 51, 95, 100],
// yAxis: 1
},
{
type: "line",
name: "LYTP",
data: [10,10,null,80,80,null,90,90,null,103,103],
// dashStyle: "longdash",
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[1],
fillColor: "lightblue"
}
},
{
// type: 'pie',
// name: 'Total consumption',
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}
]
});
.highcharts-strong {
font-weight: bold;
}
.highcharts-figure, .highcharts-data-table table {
min-width: 320px;
max-width: 600px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Timeline charts are used to place events on a time axis,
such as this example showing the major space exploration
events from 1951 to 1975.
</p>
</figure>
There is no a series in Highcharts which perfectly meets your requirements in this case, but you can easily create such. It is enough to slightly modify the column series:
(function(H) {
H.seriesType('jump-line', 'column', {
height: 6
}, {
translate: function() {
H.seriesTypes.column.prototype.translate.apply(this);
this.points.forEach(function(point) {
point.shapeArgs.height = this.options.height;
}, this);
}
});
}(Highcharts));
Highcharts.chart('container', {
...,
series: [..., {
type: 'jump-line',
pointPadding: 0,
grouping: false,
data: [4, 4, 4]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/x3rtdzc0/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.seriesType
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I am using Highmaps to plot a map on my webpage. I want to disable any kind of zooming, for ex:
Through zoom in zoom out buttons.
Through scroll.
Pinch to zoom.
On touch devices.
Multiple clicks to zoom in.
I have tried this:
chart:{
pinchType : 'none',
zoomType : 'none'
}
and this:
mapNavigation:{
enableButton:false,
enableDoubleClickZoom:false,
enableDoubleClickZoomTo:false,
enableMouseWheelZoom:false,
enableTouchZoom:false
},
but no luck.
Try this demo
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function(data) {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'Zoom in on country by double click'
},
mapNavigation: {
enabled: false,
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series: [{
data: data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#a4edba'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<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/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container" style="max-width: 1000px"></div>
jsfiddle demo : http://jsfiddle.net/geogeorge/ssh63xhb/
I am displaying a highchart's polar chart on top of google map to to show the wind direction on the map.
Please see this example http://jsfiddle.net/rishad/azarpssv/
<html>
<head>
<title>Simple Polar chart on Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#wrapper { position: relative; }
#over_map { position: absolute; top: 75px; left: 75px; z-index: 99; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
polar: true,
backgroundColor:'rgba(255, 255, 255, 0.0)'
},
title: {
text: ''
},
pane: {
startAngle: 0,
endAngle: 360
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'line',
name: 'Line 1',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line 2',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'line',
name: 'Line 3',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<div id="wrapper">
<div id="map" style="width: 500px; height: 500px;"></div>
<div id="over_map">
<div id="container" style="width: 350px; height: 350px;"></div>
</div>
</div>
<script>
var map;
function initMap() {
var myCenter = new google.maps.LatLng (53.244661, -2.479360)
map = new google.maps.Map(document.getElementById('map'), {
center: myCenter,
zoom: 16,
draggable:false,
scrollwheel:false
});
var marker = new google.maps.Marker({
position: myCenter,
map: map,
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpmEdrvxaqxIIGuawFFtBuhBUQ76Q2hLo&signed_in=true&callback=com/maps/api/js?sensor=false&callback=initMap"></script>
</body>
</html>
But I am unable to make it one element. For instance, I want to put this at the centre of a html table row but that does not work.
<table style="width: 100%;">
<tr align="center">
<td>
<div id="wrapper">
<div id="map" style="width: 500px; height: 500px;"></div>
<div id="over_map">
<div id="container" style="width: 350px; height: 350px;"></div>
</div>
</div>
</td>
</tr>
</table>
If I change the padding, it will not work for different screen size. Can anyone help me with the css.
Thanks in advance.
The problem is caused by incorrect left parameter in the CSS styles. You should avoid to use harcoded value (because in table you have dynamic 100%). So the solution is using calc(50% - 175px) where 175px is half of chart width.
CSS:
#wrapper { position: relative; }
#over_map { position: absolute; top: 75px; left:calc(50% - 175px); z-index: 99; }
Example:
- http://jsfiddle.net/sjmxke8g/
I have a highchart pie chart which have the labels with the following format:
{point.name} <div class="pct">{point.percentage:.2f}%</div>
But unfortunatly, the div is deleted when the labels are loaded.
There is any way to apply the class so the percentajes got the same apperance independently of the style of the label?
Here is the jsfiddle where you can try: http://jsfiddle.net/69x7a/5/
HTML
<div id="container" style="width: 100%; height: 400px;"></div>
CSS
.pct {
color: blue;
font-size: 8px;
}
JS
$(function () {
$('#container').highcharts({
plotOptions: {
pie: {
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name} <div class="pct">{point.percentage:.2f}%</div>'
}
}
},
series: [{
type: 'pie',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
dataLabels: {
style: {
color: "#ff0000",
fontFamily: 'serif',
fontSize: '17px'
}
}
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
Seems class is removed, but you can do this:
format: '<b >{point.name}</b>:<span style="color: blue;font-size: 8px;"> {point.percentage:.1f}%</span>