I want to name a few points on my time data with irregular intervals. I am trying this as shown on fiddle by appending as
{ [Date.UTC(1970, 9, 27), 0 ] , name: 'point 1'},
but it is not working, any inputs ? I also want to have color for those points.
DEMO
You will have to pass data like:
data: [
{x:Date.UTC(1970, 11, 2), y:2,color:'red', name:'point 1'},
{x:Date.UTC(1970, 11, 3), y:3,color:'blue', name:'point 2'},
{x:Date.UTC(1970, 11, 4), y:4,color:'orange', name:'point 3'},
[Date.UTC(1970, 11, 2), 0.8 ],
[Date.UTC(1970, 11, 9), 0.6 ],
.......
...
Change from:
{ [Date.UTC(1970, 9, 27), 0 ] , name: 'point 1'},
To:
{ x: Date.UTC(1970, 9, 27), y: 0, name: 'point 1'},
Related
Is it possible to have both colorAxis and series in the legend? http://jsfiddle.net/6k17dojn/ i see i can only show one at a time when I toggle this setting
colorAxis: {
showInLegend: true,
}
Currently to show a basic legend with colorAxis, you need to add some code to Highcharts core. This plugin below allows you to add colorAxis to a legend if showInLegend property is set to false:
(function(H) {
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
var colorAxisItems = [],
colorAxis = this.chart.colorAxis[0],
i;
if (colorAxis && colorAxis.options) {
if (colorAxis.options.dataClasses) {
colorAxisItems = colorAxis.getDataClassLegendSymbols();
} else {
colorAxisItems.push(colorAxis);
}
}
i = colorAxisItems.length;
while (i--) {
e.allItems.unshift(colorAxisItems[i]);
}
});
}(Highcharts))
Live demo: http://jsfiddle.net/BlackLabel/hs1zeruy/
API Reference: https://api.highcharts.com/highcharts/colorAxis.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts
It's possible, but not with the data you currently work with. A heatmap's data is a set of coordinates, but here, your two series overlap.
Your raw data is :
[
[0,0,0.2, 0.4],
[0,1,0.1, 0.5],
[0,2,0.4, 0.9],
[0,3,0.7, 0.1],
[0,4,0.3, 0.6]
]
From there, you're mapping two series: 2018, and 2019 via the seriesMapping: [{x: 0, y: 1, value: 2}, {x: 0, y: 1, value: 3}] option.
You thus end up with the following two series:
2018 2019 2019 should be
[ [ [
[0, 0, 0.2], [0, 0, 0.4], [1, 0, 0.4],
[0, 1, 0.1], [0, 1, 0.5], [1, 1, 0.5],
[0, 2, 0.4], [0, 2, 0.9], [1, 2, 0.9],
[0, 3, 0.7], [0, 3, 0.1], [1, 3, 0.1],
[0, 4, 0.3] [0, 4, 0.6] [1, 4, 0.6]
] ] ]
Notice that in both cases, the coordinates are the same, but for 2019, the x value should be 1. Since you have 0 as x coordinate for both series, they overlap.
To fix you issue, you need to change your data (or pre-process it, whatever is easier). For example:
var data = '[[0,0,0.2, 0.4],[0,1,0.1, 0.5],[0,2,0.4, 0.9],[0,3,0.7, 0.1],[0,4,0.3, 0.6]]';
var rows = JSON.parse(data);
rows = $.map(rows, function(arr){
return [[
arr[0], arr[1], arr[2], // 2018
arr[0] + 1, arr[1], arr[3], // 2019
]];
});
// and the seriesMapping changes to
data: {
rows: rows,
firstRowAsNames: false,
seriesMapping: [{x: 0, y: 1, value: 2}, {x: 3, y: 4, value: 5}]
},
You can see it in action here: http://jsfiddle.net/Metoule/qgd2ca6p/6/
Can we fill colors like this in boxplot chart of Highcharts?
Please refer the image below:
You can calculate point color based on some algorithm, for example:
chart: {
type: 'boxplot',
events: {
load: function(){
var points = this.series[0].points,
color,
length = points.length;
Highcharts.each(points, function(point, i){
color = 'rgb(255,' + Math.floor(i * 255 / length) + ', 0)'
point.update({ fillColor: color }, false)
});
this.redraw();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/5k8wfrgc/
Yes, its possible to control the fillColor for a boxplot.
This is a demonstration to show you:
http://jsfiddle.net/mqunbjrs/
If you take a look at the highcharts API you will see that instead of using an array with the 6 plot values, you can use an object with named values: https://api.highcharts.com/highcharts/series.boxplot.data
instead of this:
data: [
[0, 3, 0, 10, 3, 5],
[1, 7, 8, 7, 2, 9],
[2, 6, 9, 5, 1, 3]
]
You would use this:
data: [{
x: 1,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
fillColor: "#00FF00"
}, {
x: 2,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
fillColor: "#FF00FF"
}]
In torch7 / lua
There is a matrix:
[ 1, 2, 3, 4;
5, 6, 7, 8;
9, 10, 11, 12;
13, 14, 15, 16 ]
how to extract this:
[ 6, 7;
10, 11 ]
and how to overwrite it by matrix operation
[ 1, 2, 3, 4;
5, 78, 66, 8;
9, 45, 21, 12;
13, 14, 15, 16 ]
Thanks in advance.
matrix
matrix:sub(2,3,2,3)
z = torch.Tensor({{78,66},{45,21}})
matrix:sub(2,3,2,3):copy(z)
I need a slider to let the user select a weight.
$( "#slider" ).slider({
value: 15,
slide: function( event, ui ) {
$('#weight').text(ui.value);
}
});
But the values should be nonlinear: That means a 'normal' behaviour for values from 10 to 50 (increasing steps of 1).
Then for example: If the values are getting bigger they should increase in steps of 10. If the user selects lower values it should be more precise: values 3 to 10 (increasing steps of 0.5), below 3 -> increasing steps 0.1.
My attempt would be to use an own array for the data:
myData = [ 0.4, 0.45, 0.5, 0.55, 0.65, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 6, 7, 8, 9, 10,11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 40, 50, 60, 70 ];
$( "#slider" ).slider({
min: 0,
max: myData.length - 1,
step: 1,
slide: function( event, ui ) {
$('#weight').text(ui.value);
},
create: function() {
$(this).slider('values',0,0);
$(this).slider('values',1,myData.length - 1);
}
});
But this doesn't work. Is there a smarter solution?
myData = [ 0.4, 0.45, 0.5, 0.55, 0.65, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 6, 7, 8, 9, 10,11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 40, 50, 60, 70 ];
$( "#slider" ).slider({
min: 0,
max: myData.length - 1,
step: 1,
slide: function( event, ui ) {
$('#weight).text(myData[ui.value]);
}
});
I have problems with displaying an highcharts area chart.
At the jsFiddle link you can see that the red area (with negative values) is tilt or rotated or however I should describe this ;-)
Any idea what i have to do, or is this bug?
Best regards
Andi
[http://jsfiddle.net/7jGx5/1/]
Data for red series should be sorted by x, ascending.
EDIT:
[Date.UTC(2013, 3, 8, 8, 46), -177],
[Date.UTC(2013, 3, 8, 8, 47), -1072],
[Date.UTC(2013, 3, 8, 8, 48), -2199],
[Date.UTC(2013, 3, 8, 8, 49), -2265],
[Date.UTC(2013, 3, 8, 7, 52), 308],
[Date.UTC(2013, 3, 8, 7, 53), 277],
[Date.UTC(2013, 3, 8, 7, 54), 317],
[Date.UTC(2013, 3, 8, 7, 55), 154],
[Date.UTC(2013, 3, 8, 7, 56), 296],
[Date.UTC(2013, 3, 8, 7, 57), 200],
[Date.UTC(2013, 3, 8, 7, 58), -237],
[Date.UTC(2013, 3, 8, 7, 59), 207],
[Date.UTC(2013, 3, 8, 8, 0), 128],
[Date.UTC(2013, 3, 8, 8, 1), 276],
[Date.UTC(2013, 3, 8, 8, 2), 225],