I built a custom map with Highmaps: see fiddle
Now I want to add a series with map points:
{
type: 'mappoint',
name: 'Cities',
zIndex: 100,
color: '#000000',
data: [{
name: 'Birmingham',
lat: 52,
lon: 1.8
}]
}
But I do not know how to use fromLatLonToPoint in this case. How can I do this?
You can directly use lat and lon properties, but your mappoint series is overwritten with parsed series from data property. As a soulution, use the addSeries method after the main data is loaded, for example:
parsed: function() {
var chart = this.chart,
center = chart.fromLatLonToPoint({
lat: 50,
lon: 10
});
setTimeout(function() {
chart.mapZoom(.15, center.x, center.y);
chart.addSeries({
type: 'mappoint',
name: 'Cities',
zIndex: 100,
color: '#000000',
data: [{
name: 'Birmingham',
lat: 52,
lon: 1.8
}]
});
}, 500)
}
Live demo: https://jsfiddle.net/BlackLabel/vw1p4jtr/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
https://api.highcharts.com/highmaps/series.mappoint.data.lat
Related
Highcharts.chart('course', {
chart: {
type: 'variablepie'
},
title: {
text: 'Countries compared by population density and total area.'
},
tooltip: {
headerFormat: '',
pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
'Population density (people per square km): <b>{point.y}</b><br/>'
},
series: [{
minPointSize: 10,
innerSize: '20%',
zMin: 0,
name: 'countries',
data: [{
name: 'C',
y: 7000
},{
name: 'A',
y: 5000
},{
name: 'B',
y: 2000
}, {
name: 'D',
y: 4000
}]
}]
});
Actually, after the edit made by #Adrian Mole - nothing.
Demo: https://jsfiddle.net/BlackLabel/8xzrdLva/
Highcharts.chart('container', {
...
});
I encourage to use online editors which autocorrections could help you to see the wrong parts of the code.
Your chart is working fine, you're probably simply missing the following script:
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
You can see the highcharts variable pie example on jsfiddle.
I have a bar chart where I want to add an url to the xAxis legend
the data looks like :
{
name: 'Title,
y: 123,
thumbnailURL: 'blabla.com',
}
xAxis: {
gridLineWidth: 1,
type: 'category',
labels: {
x: -130,
useHTML: true,
align: 'left',
formatter() {//get the url here}
The formater function must use this 3 values to draw what i want
DEMO :
https://jsfiddle.net/6a97ckzr/2/
But I can't find a way for the this inside the formatter function to have the custom property url (different for each data value.
I tried all, but none work
chart = {
series: [
{
keys: ['thumbnailURL', 'y'],
data: [{
name: v.name,
y: v.value,
thumbnailURL: v.thumbnailURL,
}]
}),
},
],
}
chart = {
series: [
{
keys: ['thumbnailURL', 'y'],
data: [[
v.name,
v.value,
v.thumbnailURL,
]]
}),
},
],
}
How do I get my custom value in the labels ?
In that case this.value is a data point name. If you want to get some other property from a point you can use:
this.chart.series[0].options.data[this.pos].customUrl
Live demo: https://jsfiddle.net/BlackLabel/h24sc1gn/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
good morning guys,
I need your help for a problem that I can not solve.
I need to highlight the intersections between a simple data series and the related moving average.
The data of the moving average are automatically generated by HighStock and are not calculated by me (otherwise I would have almost solved the problem!).
If it is not possible to graphically highlight with different colors every time the series is above or below the moving average
I would like to calculate the difference between the two series (in this way I could draw a single line around the zero value with negative red values and values green positive for example).
After numerous researches I have not yet solved my problem. I must say that the documentation of HighChart / HighStock is very complete but it is mainly for professionals.
Thanks for your help!
This is what I need (look at the picture)
$('#container').highcharts('StockChart', {
title: { text: 'Relative Strenght' },
navigator: { enabled: false },
series: [
{
id: 'forza-rel',
type: 'spline',
name: 'Rel. Str.',
data: forza_relativa,
},
{
name: 'M.A. 5',
type: 'sma',
linkedTo: 'forza-rel',
color:'#FF0000',
dashStyle: 'line',
marker: { enabled: false },
params: { period: 5 }
}
]
});
I need to highlight the intersections between a simple data series and
the related moving average.
It can be done, however, it requires a lot of custom code and it's a bit tricky.
I would like to calculate the difference between the two series
This can be done easily. SMA is just another series, so you have to loop through SMA series data and make a difference between its data and a basic series data. Than use series.setData() method to update the third series with calculated values (areasplie for example).
HTML:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JS:
Highcharts.stockChart('container', {
chart: {
height: 500,
events: {
load: function() {
var chart = this,
series = chart.series,
data = [],
offset,
diff,
i;
offset = series[0].xData.length - series[1].xData.length;
for (i = 0; i < series[1].xData.length; i++) {
diff = series[0].yData[i + offset] - series[1].yData[i];
data.push({
x: series[1].xData[i],
y: diff
});
}
chart.series[2].setData(data);
}
}
},
rangeSelector: {
selected: 0
},
title: {
text: 'AAPL Stock Price'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
yAxis: [{
height: '60%',
top: '0%',
id: '0'
}, {
height: '36%',
top: '62%',
id: '1'
}],
series: [{
type: 'spline',
id: 'aapl',
name: 'AAPL Stock Price',
data: data,
yAxis: '0'
}, {
type: 'sma',
linkedTo: 'aapl',
marker: {
enabled: false
},
yAxis: '0'
}, {
type: 'areaspline',
yAxis: '1',
color: 'green',
negativeColor: 'red',
data: []
}]
});
Demo:
https://jsfiddle.net/wchmiel/863n241h/3/
Does anyone if it's possible to create the following type of chart using Highcharts:
I was trying to use the Solid Guage type but couldn't find a way to incorporate a 2nd data series into the chart ?
You need to define a points in series and regular size and distance by innerRadius / outerRadius.
series: [{
name: 'Speed',
data: [{
name: 'First car',
radius: 100,
innerRadius: 80,
y: 80
}, {
name: 'Second car',
radius: 80,
innerRadius: 60,
y: 120
}],
dataLabels: {
enabled: true,
y:-10
},
tooltip: {
pointFormat: '{point.name}: <b>{point.y}</b> km/h'
}
}]
Example: http://jsfiddle.net/94akab33/2/
Missing elements can by added by renderer.
I looked around a bit but can't seem to find the exact answer for this.
I'm currently adding some data to highcharts. Essentially, I am using the HighStock column and candlestick chart, and it should suffice for my testing.
The issue is this. I've set up ONE of the two series' to have IDs. I would now like to retrieve an individual point object by calling [something].get("point_0"), which seems like it should be possible but doesn't seem to work. Here is the fiddle for it:
http://jsfiddle.net/mr3ezgh9/
and here is the code:
var chart = null;
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push(
{
name: data[i][0],
x: data[i][0], // the date
y: data[i][5], // the volume
color: "red",
id: "point_" + i
}
);
}
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
turboThreshold: Number.MAX_VALUE,
dataGrouping: {
units: groupingUnits
}
}]
});
alert(Highcharts.charts[0].get("point_0"));
});
});
I have tried a few variations on .get("point_0") like getting a series first (but the series doesn't have a get function), setting the chart to a variable and then getting it, and other similar changes, but nothing quite seems to work. Any insight on this?
The general problem is that in the highstock you have enabled datagrouping, so points are groupped and ids are skipped. Disable it and option will work.
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
}
Example: http://jsfiddle.net/mr3ezgh9/1/