I can create the following chart:
Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
chart: {
styledMode: false
},
plotOptions: {
series: {
// general options for all series
},
sankey: {
curveFactor: 0,
lineWidth: 1
}
},
series: [{
//minLinkWidth: 1,
keys: ['from', 'to', 'weight'],
data: [
['Root', 'Brazil', 0.01],
['Root', 'Canada', 0.005],
['Root', 'Mexico', 0.01],
['Root', 'USA', 0.01],
['Brazil', 'Portugal', 0.01],
['Brazil', 'France', 0.01],
['Brazil', 'Spain', 0.01],
['Brazil', 'England', 0.01],
['Canada', 'Portugal', 0.01],
['Canada', 'France', 0.01],
['Canada', 'England', 0.01],
['Mexico', 'Portugal', 0.01],
['Mexico', 'France', 0.01],
['Mexico', 'Spain', 0.01],
['Mexico', 'England', 0.01],
['USA', 'Portugal', 0.01],
['USA', 'France', 0.01],
['USA', 'Spain', 0.01],
['USA', 'England', 0.01],
['Portugal', 'Angola', 0.01],
['Portugal', 'Senegal', 0.01],
['Portugal', 'Morocco', 0.01],
['Portugal', 'South Africa', 0.01],
['France', 'Angola', 0.01],
['France', 'Senegal', 0.01],
['France', 'Mali', 0.01],
['France', 'Morocco', 0.01],
['France', 'South Africa', 0.01],
['Spain', 'Senegal', 0.01],
['Spain', 'Morocco', 0.01],
['Spain', 'South Africa', 0.01],
['England', 'Angola', 0.01],
['England', 'Senegal', 0.01],
['England', 'Morocco', 0.01],
['England', 'South Africa', 0.01],
['South Africa', 'China', 0.01],
['South Africa', 'India', 0.01],
['South Africa', 'Japan', 0.01],
['Angola', 'China', 0.01],
['Angola', 'India', 0.01],
['Angola', 'Japan', 0.01],
['Senegal', 'China', 0.01],
['Senegal', 'India', 0.01],
['Senegal', 'Japan', 0.01],
['Mali', 'China', 0.01],
['Mali', 'India', 0.01],
['Mali', 'Japan', 0.01],
['Morocco', 'China', 0.01],
['Morocco', 'India', 0.01],
['Morocco', 'Japan', 0.01]
],
type: 'sankey',
nodeWidth: 100,
name: 'Sankey demo series'
}]
});
Example
What I need is to have all bands of a small width: about 1.5 mm and not relevant to actual value. What happens now, is that soon as I set all values to the same value the chart refreshes bands with the new width.
Thanks
I am afraid that setting fixed link width is not possible in the current sankey implementation: https://www.highcharts.com/forum/viewtopic.php?f=9&t=47595&p=171541&hilit=sankey+link+sankey+link+width#p171541
Related
I am using highcharts library to plot Sankey chart with our data, which has many number of nodes in each column. My issue is links width is reduces when it is between one of nodes on the top and one of the nodes are a bit lower than that. More longer the link is more width reduces.
I am wondering if there is any work around or some simple thing from documentation that I am missing. Any help is appreciated. Below is the fiddle
https://jsfiddle.net/Saibabu276/cqj2n413/
Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
chart: {
height: 1000
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
}
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Brazil', 'Portugal', 5],
['Brazil', 'France', 1],
['Brazil', 'Spain', 1],
['Brazil', 'England', 1],
['Canada', 'Portugal', 1],
['Canada', 'France', 5],
['Canada', 'England', 1],
['Mexico', 'Portugal', 1],
['Mexico', 'France', 1],
['Mexico', 'Spain', 5],
['Mexico', 'England', 1],
['USA', 'Portugal', 1],
['USA', 'France', 1],
['USA', 'Spain', 1],
['USA', 'England', 5],
['Portugal', 'Angola', 2],
['Portugal', 'Senegal', 1],
['Portugal', 'Morocco', 1],
['Portugal', 'South Africa', 3],
['France', 'Angola', 1],
['France', 'Senegal', 3],
['France', 'Mali', 3],
['France', 'Morocco', 3],
['France', 'South Africa', 1],
['Spain', 'Senegal', 1],
['Spain', 'Morocco', 3],
['Spain', 'South Africa', 1],
['England', 'Angola', 1],
['England', 'Senegal', 1],
['England', 'Morocco', 2],
['England', 'South Africa', 7],
['South Africa', 'China', 5],
['South Africa', 'India', 1],
['South Africa', 'Japan', 3],
['Angola', 'China', 5],
['Angola', 'India', 1],
['Angola', 'Japan', 3],
['Senegal', 'China', 5],
['Senegal', 'India', 1],
['Senegal', 'Japan', 3],
['Mali', 'China', 5],
['Mali', 'India', 1],
['Mali', 'Japan', 3],
['Morocco', 'China', 5],
['Morocco', 'India', 1],
['Morocco', 'Japan', 3]
],
type: 'sankey',
name: 'Sankey demo series'
}]
});
To set the connection between nodes option series.sankey.curveFactor add a possibility to make the line straight completely or change the curve to lover.
Higher numbers makes the links in a sankey diagram or dependency wheelrender more curved. A curveFactor of 0 makes the lines straight.
plotOptions: {
sankey: {
nodeWidth: 10,
curveFactor: 0.1
}
},
Live demo:
https://jsfiddle.net/BlackLabel/6ac2syzx/
I have an array like this:
[["vietnam", "Hồ Chí Minh", "ho-chi-minh", 131],
["vietnam", "Hà Nội", "ha-noi", 96],
["lao", "Vien", "vien", 26],
["thailand", "Bangkok", "bangkok", 11],
["vietnam", "Đồng Nai", "dong-nai", 10],
["china", "Shanghai", "shanghia", 8],
["lao", "ABC", "abcc", 24],
["vietnam", "Long An", "long-an", 6]]
and i want to generate a hash function with key based on first element of array elements as follows
{:vietnam =>
[["Hồ Chí Minh", "ho-chi-minh", 131],
["Hà Nội", "ha-noi", 96],
["Long An", "long-an", 6]],
:lao =>
[["Vien", "vien", 26],
["ABC", "abcc", 24]],
:thailand =>
[["Bangkok", "bangkok", 11]],
:china =>
[["Shanghai", "shanghai", 8]]
}
how can i do this?
Use the combined power of group_by and Array#shift
array = [["vietnam", "Hồ Chí Minh", "ho-chi-minh", 131],
["vietnam", "Hà Nội", "ha-noi", 96],
["lao", "Vien", "vien", 26],
["thailand", "Bangkok", "bangkok", 11],
["vietnam", "Đồng Nai", "dong-nai", 10],
["china", "Shanghai", "shanghia", 8],
["lao", "ABC", "abcc", 24],
["vietnam", "Long An", "long-an", 6]
]
hash = array.group_by { |e| e.shift }
Output
=> {
"vietnam" => [["Hồ Chí Minh", "ho-chi-minh", 131], ["Hà Nội", "ha-noi", 96], ["Đồng Nai", "dong-nai", 10], ["Long An", "long-an", 6]],
"lao" => [["Vien", "vien", 26], ["ABC", "abcc", 24]],
"thailand" => [["Bangkok", "bangkok", 11]],
"china" => [["Shanghai", "shanghia", 8]]
}
You can use the ruby group_by method:
array = [["vietnam", "Hồ Chí Minh", "ho-chi-minh", 131],
["vietnam", "Hà Nội", "ha-noi", 96],
["lao", "Vien", "vien", 26],
["thailand", "Bangkok", "bangkok", 11],
["vietnam", "Đồng Nai", "dong-nai", 10],
["china", "Shanghai", "shanghia", 8],
["lao", "ABC", "abcc", 24],
["vietnam", "Long An", "long-an", 6]]
hash = array.group_by { |a| a[0] }
# {"vietnam"=>[["vietnam", "Hồ Chí Minh", "ho-chi-minh", 131], ["vietnam", "Hà Nội", "ha-noi", 96], ["vietnam", "Đồng Nai", "dong-nai", 10], ["vietnam", "Long An", "long-an", 6]], "lao"=>[["lao", "Vien", "vien", 26], ["lao", "ABC", "abcc", 24]], "thailand"=>[["thailand", "Bangkok", "bangkok", 11]], "china"=>[["china", "Shanghai", "shanghia", 8]]}
hash.each { |k, v| hash[k] = v.map { |arr| arr.drop(1) } }
# {"vietnam"=>[["Hồ Chí Minh", "ho-chi-minh", 131], ["Hà Nội", "ha-noi", 96], ["Đồng Nai", "dong-nai", 10], ["Long An", "long-an", 6]], "lao"=>[["Vien", "vien", 26], ["ABC", "abcc", 24]], "thailand"=>[["Bangkok", "bangkok", 11]], "china"=>[["Shanghai", "shanghia", 8]]}
My JSfiddle: https://jsfiddle.net/sathishkumar_v/sw0fa4m8/2/.
Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Brazil', 'Portugal', 5 ],
['Brazil', 'France', 1 ],
['Brazil', 'Spain', 1 ],
['Brazil', 'England', 1 ],
['Canada', 'Portugal', 1 ],
['Canada', 'France', 5 ],
['Canada', 'England', 1 ],
['Canada', 'Brazil', 4 ],
],
type: 'sankey',
name: 'Sankey demo series'
}]
});
We have two from side labels: Brazil, and Canada. The to side has the labels: Portugal, France, Spain, England, and Brazil.
The plotted graph is failing to display the Brazil label at right side as expected. Instead, it is showing the Brazil label in the bottom left corner.
I think you will need to change the data order like that :
data: [
['Canada', 'Brazil', 4 ], // In first position
['Brazil', 'Portugal', 5 ],
['Brazil', 'France', 1 ],
['Brazil', 'Spain', 1 ],
['Brazil', 'England', 1 ],
['Canada', 'Portugal', 1 ],
['Canada', 'France', 5 ],
['Canada', 'England', 1 ],
],
Fiddle
Edit 2nd solution
Use nodes Api Doc
data: [
['Brazil', 'Portugal', 5 ],
['Brazil', 'France', 1 ],
['Brazil', 'Spain', 1 ],
['Brazil', 'England', 1 ],
['Canada', 'Portugal', 1 ],
['Canada', 'France', 5 ],
['Canada', 'England', 1 ],
['Canada', 'Brazil-end', 4 ],
],
nodes: [{
id: 'Brazil-end',
name: 'Brazil'
}
],
Fiddle
I am currently struggling with my Highcharts chart with the hours format. I have a series with 65 points of data but the hour format of each point is 24 hours. I am unable to use the same format in the highchart and it automatically converts for example 13:00:00 to 01:00:00.
Here is my script
<script>
Highcharts.setOptions({ global: { timezoneOffset: 660, useUTC: true } });
var chart1;
$(document).ready(function() {
chart1 = new Highcharts.StockChart({
chart: { renderTo:'chart1_container', type: 'spline' },
plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: true } },
subtitle: { text: 'Y1' },
title: { text: 'Y1' },
tooltip: { enabled: true, formatter: function() {var s = [];$.each(this.points, function(i, point) {s.push('<span style="color:'+point.series.color+';font-weight:bold;">'+ point.series.name +' : '+point.y + '<span>'); });return s.join(' and ');}, shared: true },
xAxis: { dateTimeLabelFormats: { hour: '%H:%M', day: '%H:%M' }, type: 'datetime' },
yAxis: { title: { text: 'Y1' } },
series: [{ data: [[Date.parse('09/01/2016 12:45:34'), 0], [Date.parse('09/01/2016 12:46:11'), 0], [Date.parse('09/01/2016 12:47:24'), 0], [Date.parse('09/01/2016 12:48:59'), 0], [Date.parse('09/01/2016 12:50:41'), 1], [Date.parse('09/01/2016 12:51:43'), 1], [Date.parse('09/01/2016 12:52:01'), 1], [Date.parse('09/01/2016 12:55:14'), 1], [Date.parse('09/01/2016 13:01:12'), 1], [Date.parse('09/01/2016 13:01:30'), 1], [Date.parse('09/01/2016 13:02:37'), 1], [Date.parse('09/01/2016 13:03:31'), 1], [Date.parse('09/01/2016 13:04:19'), 1], [Date.parse('09/01/2016 13:05:14'), 1], [Date.parse('09/01/2016 13:05:32'), 1], [Date.parse('09/01/2016 13:06:52'), 1], [Date.parse('09/01/2016 13:07:47'), 1], [Date.parse('09/01/2016 13:08:06'), 1], [Date.parse('09/01/2016 13:09:01'), 1], [Date.parse('09/01/2016 13:10:14'), 1], [Date.parse('09/01/2016 13:12:27'), 2], [Date.parse('09/01/2016 13:13:15'), 2], [Date.parse('09/01/2016 13:14:03'), 2], [Date.parse('09/01/2016 13:14:40'), 2], [Date.parse('09/01/2016 13:15:35'), 2], [Date.parse('09/01/2016 13:16:30'), 2], [Date.parse('09/01/2016 13:17:55'), 2], [Date.parse('09/01/2016 13:18:21'), 2], [Date.parse('09/01/2016 13:21:30'), 2], [Date.parse('09/01/2016 13:23:58'), 3], [Date.parse('09/01/2016 13:26:39'), 3], [Date.parse('09/01/2016 13:29:18'), 4], [Date.parse('09/01/2016 13:30:14'), 4], [Date.parse('09/01/2016 13:31:29'), 4], [Date.parse('09/01/2016 13:32:36'), 4], [Date.parse('09/01/2016 13:34:10'), 4], [Date.parse('09/01/2016 13:36:39'), 5], [Date.parse('09/01/2016 13:39:01'), 5], [Date.parse('09/01/2016 13:39:38'), 5], [Date.parse('09/01/2016 13:40:46'), 5], [Date.parse('09/01/2016 13:42:01'), 6], [Date.parse('09/01/2016 13:43:09'), 6], [Date.parse('09/01/2016 13:45:32'), 6], [Date.parse('09/01/2016 13:46:59'), 7], [Date.parse('09/01/2016 13:48:26'), 7], [Date.parse('09/01/2016 13:49:04'), 7], [Date.parse('09/01/2016 13:50:11'), 7], [Date.parse('09/01/2016 13:51:46'), 8], [Date.parse('09/01/2016 13:55:18'), 8], [Date.parse('09/01/2016 13:56:04'), 8], [Date.parse('09/01/2016 13:59:37'), 9], [Date.parse('09/01/2016 14:02:25'), 10], [Date.parse('09/01/2016 14:08:38'), 11], [Date.parse('09/01/2016 14:12:13'), 12], [Date.parse('09/01/2016 14:13:12'), 12], [Date.parse('09/01/2016 14:15:58'), 13], [Date.parse('09/01/2016 14:19:44'), 14], [Date.parse('09/01/2016 14:20:35'), 14], [Date.parse('09/01/2016 14:20:55'), 14], [Date.parse('09/01/2016 14:21:53'), 14], [Date.parse('09/01/2016 14:22:52'), 14], [Date.parse('09/01/2016 14:23:51'), 15], [Date.parse('09/01/2016 14:24:30'), 15]], name: 'Y1' }]
});
});
</script>
Highcharts is not converting 13:00:00 to 01:00:00. You are using default 24-hour date time Highcharts/Highstock format. You just do not have a data point with such date that would show with a time after 12 PM, because of your timezoneOffset and other chart's settings.
Example with an extra data point: http://jsfiddle.net/68xay5jb/
for 24 hour formate try to do like below with Date.UTC
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime' //ensures that xAxis is treated as datetime values
},
series: [{
data: [
[Date.UTC(2012, 5, 22, 8, 15), 14.8],
[Date.UTC(2012, 5, 22, 8, 20), 13.9],
[Date.UTC(2012, 5, 22, 8, 25), 12.8]
//and so on...
]
}]
});
I am trying to adapt a highcharts heatmap from raw coding to the Yii2 plugin by Milos Schuman. Area and line charts are working but there is not an example of using heatmap and I tried almost everything.
This is the code as shown in highcharts demo:
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
});
And a sample of Area chart using the Yii2 widget:
use miloschuman\highcharts\Highcharts;
echo Highcharts::widget([
'options' => [
'title' => ['text' => 'Fruit Consumption'],
'xAxis' => [
'categories' => ['Apples', 'Bananas', 'Oranges']
],
'yAxis' => [
'title' => ['text' => 'Fruit eaten']
],
'series' => [
['name' => 'Jane', 'data' => [1, 0, 4]],
['name' => 'John', 'data' => [5, 7, 3]]
]
]
]);
The problem basically is that in case of a heatmap chart it is required to specify that the heatmap module is needed before the options description like that:
'scripts' => [
'modules/heatmap', // adds heatmap support
],
That is a working sample based on the highcharts demo:
$heatmap_options = [
'scripts' => [
'modules/heatmap', // adds heatmap support
],
'options' => [
'title' => ['text' => 'Sales per employee per weekday'],
'chart' => [
'type' => 'heatmap'
],
'xAxis' => [
'categories' =>['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
],
'yAxis' => [
'categories' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
],
'colorAxis' =>[
],
'series' => [[
'name' => 'Sales per employee',
'borderWidth' => 1,
'data' => [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117],
[1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114],
[3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12],
[5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82],
[7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31],
[9, 3, 48], [9, 4, 91]],
'dataLabels' => [
'enabled' => true,
'color' => '#000000'
]
]
]
]
];
echo Highcharts::widget($heatmap_options);