I am using advanced accessible high charts and I need to be able to increase and decrease the height of gridlines based on the data points for a particular series. If the data points for a particular series is less than 10 I want the height of the gridline to be 30 px else if the data points is between 10 and 15 I want the height to be 50px if the data points are more than 20 i will need the gridline height to be 100px
The only solution that came to my mind is to attach each series into an independent axis which allows setting each axis height (in percentage or pixel value).
xAxis: [{
height: '30%',
}, {
height: '60%',
top: '30%',
offset: 0
}, {
top: '80%',
height: '10%',
offset: 0
}],
series: [{
data: [2, 3, 4],
xAxis: 0
}, {
data: [10, 12],
xAxis: 1
}, {
data: [10, 12],
xAxis: 2
}]
Demo: https://jsfiddle.net/BlackLabel/8pu13s7d/
API: https://api.highcharts.com/highcharts/yAxis.height
API: https://api.highcharts.com/highcharts/yAxis.top
Looking at this example: http://www.highcharts.com/stock/demo/candlestick-and-volume
Is there a way that I can lay these two series side-by-side rather than stacked on top?
You can use axis.width and axis.left. You will not find them in axis official API, so you may encounter some issues with it, e.g. problem with a tooltip - issue on github.
The basic config for using two x axis next to each other:
xAxis: [{
width: 200,
left: 50
}, {
width: 200,
left: 300,
linkedTo: 0,
offset: 0
}],
Workaround for a tooltip position (shared tooltip does not seem to work correctly)
tooltip: {
shared: false,
shape: 'rect',
positioner: function(w, h, p) {
return {
x: p.plotX + this.chart.hoverSeries.xAxis.left - w / 2,
y: p.plotY
}
}
},
example: http://jsfiddle.net/fqc5np5g/
I'm very new to Caffe but want to add a maxout layer in my project. There are some code about maxout in the website,such as
implement maxout with caffe
My code is here:
layers {
name: "conv1"
type: CONVOLUTION
bottom: "data"
top: "conv1"
blobs_lr: 1
blobs_lr: 2
weight_decay: 1
weight_decay: 0
convolution_param {
num_output: 16
kernel_size: 9
stride: 1
}
}
layers {
name: "slice1"
type: "Slice"
bottom: "Conv1"
top: "slice1A"
top: "slice1B"
top: "slice1C"
top: "slice1D"
slice_param{
axis: 1
slice_point: 4
slice_point: 8
slice_point: 12
}
}
layers {
name: "maxout1"
type: ELTWISE
bottom: "slice1A"
bottom: "slice1B"
bottom: "slice1C"
bottom: "slice1D"
top: "maxout1"
eltwise_param {
operation:MAX
}
}
Here, I use the SLICE layer to divide conv1 layer to four and do ELTWISE operation. There will be four outputs,but i don't know how the slice1A, slice1B,slice1C and slice1D to do MAX operation.
The following picture is my opinion.
ELTWISE diagram of this code snippet
Thank you very much!
First, to put it simply, what maxout to do is taking two or more tensors as input, which have exactly the same dimension, for example, it takes 2 10-dimension vectors as input and then, on same position of the 2 vectors choosing the maximum as maxout's output vector's elements, which will finally result in a 10-dimension vector. You can see this procedure as a fusion process.
Then to the ELTWISE layer in your code, this layer is exactly going to accomplish the above procedure. Specificially, the ELTWISE layer will seperately take one element from each bottom conv1A,conv1B, then choose the maximum from the two elements as the output maxout1's element and repeat this operation successively till the last position of the bottom. The maximizing operation is assigned by
"eltwise_param {
operation:MAX
}"
in your code.
I have a chart at this JSFiddle to demonstrate a problem where our charts are not respecting the y-axis tick interval for large values:
http://jsfiddle.net/z2cDu/1/
var plots = {"usBytePlots":[[1362009600000,143663192997],[1362096000000,110184848742],[1362182400000,97694974247],[1362268800000,90764690805],[1362355200000,112436517747],[1362441600000,113563368701],[1362528000000,139579327454],[1362614400000,118406594506],[1362700800000,125366899935],[1362787200000,134189435596],[1362873600000,132873135854],[1362960000000,121002328604],[1363046400000,123138222001],[1363132800000,115667785553],[1363219200000,103746172138],[1363305600000,108602633473],[1363392000000,89133998142],[1363478400000,92170701458],[1363564800000,86696922873],[1363651200000,80980159054],[1363737600000,97604615694],[1363824000000,108011666339],[1363910400000,124419138381],[1363996800000,121704988344],[1364083200000,124337959109],[1364169600000,137495512348],[1364256000000,136017103319],[1364342400000,60867510427]],"dsBytePlots":[[1362009600000,1734982247336],[1362096000000,1471928923201],[1362182400000,1453869593201],[1362268800000,1411787942581],[1362355200000,1460252447519],[1362441600000,1595590020177],[1362528000000,1658007074783],[1362614400000,1411941908699],[1362700800000,1447659369450],[1362787200000,1643008799861],[1362873600000,1792357973023],[1362960000000,1575173242169],[1363046400000,1565139003978],[1363132800000,1549211975554],[1363219200000,1438411448469],[1363305600000,1380445413578],[1363392000000,1298319283929],[1363478400000,1194578344720],[1363564800000,1211409679299],[1363651200000,1142416351471],[1363737600000,1223822672626],[1363824000000,1267692136487],[1363910400000,1384335759541],[1363996800000,1577205919828],[1364083200000,1675715948928],[1364169600000,1517593781592],[1364256000000,1562183018457],[1364342400000,681007264598]],"aggregatedTotalBytes":43476367948896,"aggregatedUsBytes":3150320403841,"aggregatedDsBytes":40326047545055,"maxTotalBytes":328186292129,"maxTotalBitsPerSecond":30387619.641574074}
;
$('#container').highcharts({
yAxis: {
tickInterval: 53687091200 // 500 gigabytes. Maximum y-axis value is approx 1.8TB
},
series : [
{
color: 'rgba(80, 180, 77, 0.7)',
type: 'areaspline',
name : 'Downstream',
data : plots.dsBytePlots,
total: plots.aggregatedDsBytes
},
{
color: 'rgba(33, 143, 197, 0.7)',
type: 'areaspline',
name : 'Upstream',
data : plots.usBytePlots,
total: plots.aggregatedUsBytes
}]
});
In this example we are charting bandwidth utilization in bytes. The chart has a maximum value of about 1.8TB. We set the y-axis tick interval to exactly 500GB but the rendered y-axis ticks don't make any sense for the given interval.
You can set max value or use tickPositioner.
Ref:
- http://api.highcharts.com/highcharts#yAxis.max
- http://api.highcharts.com/highcharts#yAxis.tickPositioner
I'm trying to create a stacked bar chart with a Y axis as a percentage (0-100%) and the X axis multiple separate stacks. The data for each stack is independent and has no relationship to the other stacks.
e.g.
Stack 1 = Animals [10, 20, 30 , 40]
Stack 2 = Cars [10, 30]
Stack 3 = Aeroplanes [10, 20, 30, 40, 50, 60, 70]
Is this achievable?
This is what I have so far.
http://jsfiddle.net/carlskii/f3EK8/
For each series, you can set stack: id
Like this:
series: [{
stack: 'aeroplanes',
name: 'Prop Planes',
data: [25],
color: 'green'
}]
Stacks with the same ID will be grouped together.