How to calculate the weights in a Sankey chart? - highcharts

I am considering using a Sankey chart but I fail to clearly understand how to calculate the weights.
Let's assume a case where an entity (one) is split into hello and world, at respectively 70% and 30%.
hello is then split into aaa and bbb, also 70/30.
From the documentation I thought that the weights were relative to the output node (code also in JSFiddle and CodePen -- for some reason the same code refuses to run in the SO snippet below):
Highcharts.chart('container', {
series: [{
keys: ['from', 'to', 'weight'],
data: [
['One', 'hello', 70],
['One', 'world', 30],
['hello', 'aaa', 70],
['hello', 'bbb', 30],
],
type: 'sankey',
}]
});
#container {
min-width: 300px;
max-width: 800px;
height: 400px;
margin: 1em auto;
border: 1px solid silver;
}
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
This is not the case, however: both world and bbb have the same size, namely 30.
This means that the weights are absolute: in my case I need to take 100 and distribute it accordingly between world (30), aaa (70*0.7 = 49) and bbb (70*0.3 = 21).
If so, where should I put world as it is auto-calculated from the other data? (it is an "intermediate" result)

I finally worked out the numbers. The key is to use absolute numbers, but compute them for every step.
In the example of my question that would be:
one: 100 (fixed)
world: 30 (fixed)
hello: 70 (fixed)
aaa: 49 (calculated 70*0.7 = 49)
bbb: 21 (calculated 70*0.3 = 21)
This leads to the following code.

Related

How to increase and decrease the height of the gridlines in advanced accessible highcharts

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

Can I lay two Highcharts series side-by-side?

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/

How can I implement maxout with caffe?

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.

Large Y-axis tickInterval in high charts does not work

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

Highcharts with multipe Series

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.

Resources