Strange behaviour of Highcharts boxplot - highcharts

I was testing the new Boxplot graph created by the Highcharts team, located at :
http://www.highcharts.com/demo/box-plot
So it is rendered very well.
So I decided to add more values (more observed values) in the last array of the observations data :
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910, 888, 888, 888]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
}, {
Then the updated boxplot was very ugly.
So I was wondering if this is a normal behaviour ?
Indeed number of observed values can be differents from an experiment to another and it seems that this case can not be displayed by the boxplot highcharts ?
Or is there any option to handle this issue.
Thanks in advance for your help.
Fred


Maximum amount of boxplot parameter is 5.

Related

Bug? Using a data transform with date/timeunit

For a while now I've been using a flatten transform to move data from a columnar data frame to a Vega Lite spec, and wonder if it's the source of a recent problem I've encountered with a time series. The time series spec is in a gist on the vega editor, along with a similar pattern plotting sin and cos that uses flatten without a problem.
As near as I can tell, the spx time series should work with this transform, and it does work if I flatten the data myself. I'm out of ideas; maybe there's something odd with flatten and date/times? I've tried every combination of type specification, timeUnit, etc., I can think of but nothing seems to work.
Can anyone spot an error in the spx time series gist?

For some reason, your dates are not getting parsed properly. It may be a bug but you can easily workaround it by using a calculate to convert your date to a proper date.
Editor
{
"transform": [
{"flatten": ["spxdate", "open", "high", "low", "close"]},
{"calculate": "toDate(datum.spxdate)", "as": "new"}
],
"data": {
"values": {
"spxdate": [
"1990-01-02",
"1990-01-03",
"1990-01-04",
"1990-01-05",
"1990-01-08",
"1990-01-09",
"1990-01-10",
"1990-01-11",
"1990-01-12",
"1990-01-15",
"1990-01-16",
"1990-01-17",
"1990-01-18",
"1990-01-19",
"1990-01-22",
"1990-01-23",
"1990-01-24",
"1990-01-25",
"1990-01-26",
"1990-01-29",
"1990-01-30",
"1990-01-31",
"1990-02-01",
"1990-02-02",
"1990-02-05",
"1990-02-06",
"1990-02-07",
"1990-02-08",
"1990-02-09",
"1990-02-12",
"1990-02-13",
"1990-02-14",
"1990-02-15",
"1990-02-16",
"1990-02-20",
"1990-02-21",
"1990-02-22",
"1990-02-23",
"1990-02-26",
"1990-02-27",
"1990-02-28",
"1990-03-01",
"1990-03-02",
"1990-03-05",
"1990-03-06",
"1990-03-07",
"1990-03-08",
"1990-03-09",
"1990-03-12",
"1990-03-13",
"1990-03-14",
"1990-03-15",
"1990-03-16",
"1990-03-19",
"1990-03-20",
"1990-03-21",
"1990-03-22",
"1990-03-23",
"1990-03-26",
"1990-03-27",
"1990-03-28",
"1990-03-29",
"1990-03-30",
"1990-04-02",
"1990-04-03",
"1990-04-04",
"1990-04-05",
"1990-04-06",
"1990-04-09",
"1990-04-10",
"1990-04-11",
"1990-04-12",
"1990-04-16",
"1990-04-17",
"1990-04-18",
"1990-04-19",
"1990-04-20",
"1990-04-23",
"1990-04-24",
"1990-04-25",
"1990-04-26",
"1990-04-27",
"1990-04-30",
"1990-05-01",
"1990-05-02",
"1990-05-03",
"1990-05-04",
"1990-05-07",
"1990-05-08",
"1990-05-09",
"1990-05-10",
"1990-05-11",
"1990-05-14",
"1990-05-15",
"1990-05-16",
"1990-05-17",
"1990-05-18",
"1990-05-21",
"1990-05-22",
"1990-05-23"
],
"open": [
353.3999938964844,
359.69000244140625,
358.760009765625,
355.6700134277344,
352.20001220703125,
353.8299865722656,
349.6199951171875,
347.30999755859375,
348.5299987792969,
339.92999267578125,
337,
340.7699890136719,
337.3999938964844,
338.19000244140625,
339.1400146484375,
330.3800048828125,
331.6099853515625,
330.260009765625,
326.0899963378906,
325.79998779296875,
325.20001220703125,
322.9800109863281,
329.0799865722656,
328.7900085449219,
330.9200134277344,
331.8500061035156,
329.6600036621094,
333.75,
333.0199890136719,
333.6199951171875,
330.0799865722656,
331.0199890136719,
332.010009765625,
334.8900146484375,
332.7200012207031,
327.9100036621094,
327.6700134277344,
325.70001220703125,
324.1600036621094,
328.67999267578125,
330.260009765625,
331.8900146484375,
332.739990234375,
335.5400085449219,
333.739990234375,
337.92999267578125,
336.95001220703125,
340.1199951171875,
337.92999267578125,
338.6700134277344,
336,
336.8699951171875,
338.07000732421875,
341.9100036621094,
343.5299987792969,
341.57000732421875,
339.739990234375,
335.69000244140625,
337.2200012207031,
337.6300048828125,
341.5,
342,
340.7900085449219,
339.94000244140625,
338.70001220703125,
343.6400146484375,
341.0899963378906,
340.7300109863281,
340.0799865722656,
341.3699951171875,
342.07000732421875,
341.9200134277344,
344.3399963378906,
344.739990234375,
344.67999267578125,
340.7200012207031,
338.0899963378906,
335.1199951171875,
331.04998779296875,
330.3599853515625,
332.0299987792969,
332.9200134277344,
329.1099853515625,
330.79998779296875,
332.25,
334.4800109863281,
335.5799865722656,
338.3900146484375,
340.5299987792969,
342.010009765625,
342.8699951171875,
343.82000732421875,
352,
354.75,
354.2699890136719,
354,
354.4700012207031,
354.6400146484375,
358,
358.42999267578125
],
"high": [
359.69000244140625,
360.5899963378906,
358.760009765625,
355.6700134277344,
354.239990234375,
354.1700134277344,
349.6199951171875,
350.1400146484375,
348.5299987792969,
339.94000244140625,
340.75,
342.010009765625,
338.3800048828125,
340.4800109863281,
339.9599914550781,
332.760009765625,
331.7099914550781,
332.3299865722656,
328.5799865722656,
327.30999755859375,
325.7300109863281,
329.0799865722656,
329.8599853515625,
332.1000061035156,
332.1600036621094,
331.8599853515625,
333.760009765625,
336.0899963378906,
334.6000061035156,
333.6199951171875,
331.6099853515625,
333.20001220703125,
335.2099914550781,
335.6400146484375,
332.7200012207031,
328.1700134277344,
330.9800109863281,
326.1499938964844,
328.6700134277344,
331.94000244140625,
333.4800109863281,
334.3999938964844,
335.5400085449219,
336.3800048828125,
337.92999267578125,
338.8399963378906,
340.6600036621094,
340.2699890136719,
339.0799865722656,
338.6700134277344,
337.6300048828125,
338.9100036621094,
341.9100036621094,
343.760009765625,
344.489990234375,
342.3399963378906,
339.7699890136719,
337.5799865722656,
339.739990234375,
341.5,
342.5799865722656,
342.07000732421875,
341.4100036621094,
339.94000244140625,
343.760009765625,
344.1199951171875,
342.8500061035156,
341.7300109863281,
341.8299865722656,
342.4100036621094,
343,
344.7900085449219,
347.29998779296875,
345.19000244140625,
345.3299865722656,
340.7200012207031,
338.5199890136719,
335.1199951171875,
332.9700012207031,
332.739990234375,
333.760009765625,
333.57000732421875,
331.30999755859375,
332.8299865722656,
334.4800109863281,
337.0199890136719,
338.4599914550781,
341.07000732421875,
342.0299987792969,
343.0799865722656,
344.9800109863281,
352.30999755859375,
358.4100036621094,
355.0899963378906,
354.67999267578125,
356.9200134277344,
354.6400146484375,
359.07000732421875,
360.5,
359.2900085449219
],
"low": [
351.9800109863281,
357.8900146484375,
352.8900146484375,
351.3500061035156,
350.5400085449219,
349.6099853515625,
344.32000732421875,
347.30999755859375,
339.489990234375,
336.57000732421875,
333.3699951171875,
336.260009765625,
333.9800109863281,
338.19000244140625,
330.2799987792969,
328.6700134277344,
324.1700134277344,
325.3299865722656,
321.44000244140625,
321.7900085449219,
319.8299865722656,
322.9800109863281,
327.760009765625,
328.0899963378906,
330.45001220703125,
328.20001220703125,
326.54998779296875,
332,
332.4100036621094,
329.9700012207031,
327.9200134277344,
330.6400146484375,
331.6099853515625,
332.4200134277344,
326.260009765625,
324.4700012207031,
325.70001220703125,
322.1000061035156,
323.9800109863281,
328.4700012207031,
330.1600036621094,
331.0799865722656,
332.7200012207031,
333.489990234375,
333.57000732421875,
336.3299865722656,
336.95001220703125,
336.8399963378906,
336.1400146484375,
335.3599853515625,
334.92999267578125,
336.8699951171875,
338.07000732421875,
339.1199951171875,
340.8699951171875,
339.55999755859375,
333.6199951171875,
335.69000244140625,
337.2200012207031,
337.0299987792969,
340.6000061035156,
339.7699890136719,
338.2099914550781,
336.3299865722656,
338.70001220703125,
340.3999938964844,
340.6300048828125,
338.94000244140625,
339.8800048828125,
340.6199951171875,
341.260009765625,
341.9100036621094,
344.1000061035156,
342.05999755859375,
340.1099853515625,
337.5899963378906,
333.4100036621094,
330.0899963378906,
329.7099914550781,
330.3599853515625,
330.6700134277344,
328.7099914550781,
327.760009765625,
330.79998779296875,
332.1499938964844,
334.4700012207031,
335.1700134277344,
338.1099853515625,
340.1700134277344,
340.8999938964844,
342.7699890136719,
343.82000732421875,
351.95001220703125,
352.8399963378906,
351.95001220703125,
354,
352.5199890136719,
353.7799987792969,
356.0899963378906,
356.989990234375
],
"close": [
359.69000244140625,
358.760009765625,
355.6700134277344,
352.20001220703125,
353.7900085449219,
349.6199951171875,
347.30999755859375,
348.5299987792969,
339.92999267578125,
337,
340.75,
337.3999938964844,
338.19000244140625,
339.1499938964844,
330.3800048828125,
331.6099853515625,
330.260009765625,
326.0799865722656,
325.79998779296875,
325.20001220703125,
322.9800109863281,
329.0799865722656,
328.7900085449219,
330.9200134277344,
331.8500061035156,
329.6600036621094,
333.75,
332.9599914550781,
333.6199951171875,
330.0799865722656,
331.0199890136719,
332.010009765625,
334.8900146484375,
332.7200012207031,
327.989990234375,
327.6700134277344,
325.70001220703125,
324.1499938964844,
328.6700134277344,
330.260009765625,
331.8900146484375,
332.739990234375,
335.5400085449219,
333.739990234375,
337.92999267578125,
336.95001220703125,
340.2699890136719,
337.92999267578125,
338.6700134277344,
336,
336.8699951171875,
338.07000732421875,
341.9100036621094,
343.5299987792969,
341.57000732421875,
339.739990234375,
335.69000244140625,
337.2200012207031,
337.6300048828125,
341.5,
342,
340.7900085449219,
339.94000244140625,
338.70001220703125,
343.6400146484375,
341.0899963378906,
340.7300109863281,
340.0799865722656,
341.3699951171875,
342.07000732421875,
341.9200134277344,
344.3399963378906,
344.739990234375,
344.67999267578125,
340.7200012207031,
338.0899963378906,
335.1199951171875,
331.04998779296875,
330.3599853515625,
332.0299987792969,
332.9200134277344,
329.1099853515625,
330.79998779296875,
332.25,
334.4800109863281,
335.57000732421875,
338.3900146484375,
340.5299987792969,
342.010009765625,
342.8599853515625,
343.82000732421875,
352,
354.75,
354.2799987792969,
354,
354.4700012207031,
354.6400146484375,
358,
358.42999267578125,
359.2900085449219
]
}
},
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"height": 400,
"width": 600,
"mark": "line",
"encoding": {
"x": {"field": "new", "type": "temporal", "timeUnit": "yearmonthdate"},
"y": {"field": "close", "type": "quantitative"}
}
}

Adding data to Highcharts after initial rendering

I'm using Highcharts and initializing the data using;
var graph = Highcharts.chart('container', {
................
series: [{
color: 'red',
data: [[5, 2], [800, 2], [801, 1],[802, 3],[803, 2],[804, 2],[1200, 3]]
},
.............
}
The problem I have is when I want to add more data dynamically, after rendering the initial chart.
In this case I'm using the update;
graph.update(
{
series: [{
color: 'blue',
data: [[100, 2], [101, 2], [102, 1] ]
},
});
And this works but it replaces the entire data set.
So, how should I use the update() function to add points and not replace them?
I saw people are using other functions such as addPoint() and setData() but I couldn't make them work properly...
Thanks in advance
Gus

Refer to this live demo: http://jsfiddle.net/kkulig/opr4Lgpe/
I add all the points in a loop. redraw argument (second one) of the addPoint function is set to false - there's no need to redraw the chart after each addition. The redraw is performed only once in the end.
var chart = Highcharts.chart('container', {
series: [{
data: [1, 2]
}]
});
var pointsToAdd = [4, 5, 6, 6, 7];
pointsToAdd.forEach(function(p) {
chart.series[0].addPoint(p, false);
});
chart.redraw();
API reference:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

Wikimedia Commons API search images by (latitude, longitude)

I would like to retrieve images from Wikimedia Commons to display on a map. This means that given a pair (latitude, longitude) I would like to find pictures around this point.
After a day of searching and trying I have still no idea whether this is possible or not. In particular I have read MediaWiki API Main page, the API reference and some examples.
So my question is: is it possible to retrieve pictures with a pair of geographical coordinates? If yes, how?

Yeah, that's possible. On Commons, Extension:GeoData is installed. Use action=query&list=geosearch&gscoord=lat|lon&gsradius=meters&gsnamespace=6&gsprimary=all
Excerpt from the API documentation
gscoord - Coordinate around which to search: two floating-point values separated by pipe (|)
gspage - Title of page around which to search
gsradius - Search radius in meters
This parameter is required
The value must be between 10 and 10000
gsmaxdim - Restrict search to objects no larger than this, in meters
gslimit - Maximum number of pages to return
No more than 500 (5000 for bots) allowed
Default: 10
gsnamespace - Namespace(s) to search
Values (separate with '|'): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 100, 101, 102, 103, 104, 105, 106, 107, 460,
461, 490, 491, 1198, 1199, 828, 829
Maximum number of values 50 (500 for bots)
Default: 0
gsprop - What additional coordinate properties to return
Values (separate with '|'): type, name, dim, country, region, globe
Default: globe
File namespace is NS 6 in MediaWiki by default.
Example:
https://commons.wikimedia.org/w/api.php?format=jsonfm&action=query&list=geosearch&gsprimary=all&gsnamespace=6&gsradius=500&gscoord=51.5|11.95
Result:
{
"query": {
"geosearch": [
{
"pageid": 28971703,
"ns": 6,
"title": "File:RiveuferHerbst.JPG",
"lat": 51.501042,
"lon": 11.948794,
"dist": 142.8
},
{
"pageid": 32760810,
"ns": 6,
"title": "File:Pei\u00dfnitznordspitze4.JPG",
"lat": 51.499675,
"lon": 11.947992,
"dist": 143.6
}
]
}
}
If you additionally want to optain thumbnail urls with your API request, use list=geosearch as a generator:
Example:
https://commons.wikimedia.org/w/api.php?format=jsonfm&action=query&generator=geosearch&ggsprimary=all&ggsnamespace=6&ggsradius=500&ggscoord=51.5|11.95&ggslimit=1&prop=imageinfo&iilimit=1&iiprop=url&iiurlwidth=200&iiurlheight=200
Result:
{
"query": {
"pages": {
"28971703": {
"pageid": 28971703,
"ns": 6,
"title": "File:RiveuferHerbst.JPG",
"imagerepository": "local",
"imageinfo": [
{
"thumburl": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/RiveuferHerbst.JPG/200px-RiveuferHerbst.JPG",
"thumbwidth": 200,
"thumbheight": 150,
"url": "https://upload.wikimedia.org/wikipedia/commons/b/b2/RiveuferHerbst.JPG",
"descriptionurl": "https://commons.wikimedia.org/wiki/File:RiveuferHerbst.JPG"
}
]
}
}
}
}

highcharts converting area range to multiple lines on plot

Need a hand deciphering the Highcharts methodology please.
I have input data that is a lot of records with three fields (timestamp, min, max) that I'd like to generate a plot from. Goal is to have two lines, one with max-vs-time and the other with min-vs.time, both on that one plot.
I got an arearange to work (fiddle here) but if I change the plot type to spline, I just get one line graph with min vs. time (i.e., it ignores the last data parameter).
Same thing happens when I mess with the Highcharts arearange example, so I'm guessing that my series is not defined correctly, but I'm not deciphering the right terminology to figure out how to ask the question yet I guess. Any help appreciated....
// data is timestamp,min,max for the day
// - this currently plots only the min for each day
// - intent is two lines, one for min and one for max
var data = [
[1186124400000, 57.2, 75.6],
[1186210800000, 51.8, 74.7],
[1186297200000, 53.8, 74.8],
[1186383600000, 56.7, 72.7],
[1186470000000, 59.0, 76.1]
];
var options = {
chart: {
renderTo: 'container',
type: 'arearange'
},
title: {
text: 'historical temperatures'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'outsideTemp (F)'
}
},
legend: {
enabled: false
},
series: [{
legend: {
enabled: false
},
data: data
}]
};
$(document).ready(function () {
var chart1 = new Highcharts.Chart(options)
});

You need to create two separate series.
So this:
var data = [
[1186124400000, 57.2, 75.6],
[1186210800000, 51.8, 74.7],
[1186297200000, 53.8, 74.8],
[1186383600000, 56.7, 72.7],
[1186470000000, 59.0, 76.1]
];
Will need to be two separate arrays, each with a single y value, and the same x values:
var data1 = [
[1186124400000, 57.2],
[1186210800000, 51.8],
[1186297200000, 53.8],
[1186383600000, 56.7],
[1186470000000, 59.0]
];
var data2 = [
[1186124400000, 75.6],
[1186210800000, 74.7],
[1186297200000, 74.8],
[1186383600000, 72.7],
[1186470000000, 76.1]
];
Updated Fiddle:
http://jsfiddle.net/jlbriggs/5q5HJ/12/
If your x values are at consistent intervals, you can use the pointStart and pointInterval properties and skip specifying the x values
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval

Combination of ohlc and line plot in highchart

Can I have a plot which is a combination of both ohlc and line plot without time range using Highcharts/Highstock?

You should use two series (first ohlc and second line).
http://jsfiddle.net/ZZAR5/1/
series: [{
type: 'ohlc',
data: [
[1147996800000, 63.26, 64.88, 62.82, 64.51],
[1148256000000, 63.87, 63.99, 62.77, 63.38],
[1148342400000, 64.86, 65.19, 63.00, 63.15],
[1148428800000, 62.99, 63.65, 61.56, 63.34],
[1148515200000, 64.26, 64.45, 63.29, 64.33],
[1148601600000, 64.31, 64.56, 63.14, 63.55],
[1148947200000, 63.29, 63.30, 61.22, 61.22],
[1149033600000, 61.76, 61.79, 58.69, 59.77]
]
}, {
type: 'line',
data: [
[1147996800000, 63.26],
[1148256000000, 63.87],
[1148342400000, 64.86],
[1148428800000, 62.99],
[1148515200000, 64.26],
[1148601600000, 64.31],
[1148947200000, 63.29],
[1149033600000, 61.76]
]
}]
Disabling navigator: http://api.highcharts.com/highstock#navigator.enabled
rangeselector: http://api.highcharts.com/highstock#rangeSelector.enabled

Resources