Sankey Diagram highchart Issue - highcharts

I want to generate a Sankey Diagram like below , as of now I am using data for series like this:
keys: ['from', 'to' ,'weight'],
data: [
['Entrance A', 'Platform 1' , 10 ],
['Entrance A', 'Platform 2' , 2 ],
['Entrance B', 'Platform 2' , 3 ],
['Entrance C', 'Platform 3' , 5 ],
['Entrance D', 'Platform 4' , 7 ],
['Entrance E', 'Platform 1' , 6 ],
['Entrance F', 'Platform 2' , 10 ],
['Entrance F', 'Platform 4' , 4 ],
['Entrance G', 'Platform 1' , 13 ],
['Platform 1', 'Exit F' , 9 ],
['Platform 2', 'Exit D' , 10 ],
['Platform 2', 'Exit F' , 4 ],
['Platform 3', 'Exit G' , 5 ],
['Platform 3', 'Exit B' , 11 ],
['Platform 4', 'Exit C' , 5 ],
['Platform 4', 'Exit E' , 6]
]
but this generate three node diagram
What kind of data should I use to get similar kind of graph as given in image 1

For the platforms, you can create two types of node : 'Platform X from' and 'Platform X to'. Then, you can use the nodes section to re-define them so both have the same name and same color :
series: [{
type: 'sankey',
keys: ['from', 'to' ,'weight'],
data: [
['Entrance A', 'Platform 1 to' , 10 ],
['Entrance A', 'Platform 2 to' , 2 ],
['Entrance B', 'Platform 2 to' , 3 ],
['Entrance C', 'Platform 3 to' , 5 ],
['Entrance D', 'Platform 4 to' , 7 ],
['Entrance E', 'Platform 1 to' , 6 ],
['Entrance F', 'Platform 2 to' , 10 ],
['Entrance F', 'Platform 4 to' , 4 ],
['Entrance G', 'Platform 1 to' , 13 ],
['Platform 1 from', 'Exit F' , 9 ],
['Platform 2 from', 'Exit D' , 10 ],
['Platform 2 from', 'Exit F' , 4 ],
['Platform 3 from', 'Exit G' , 5 ],
['Platform 3 from', 'Exit B' , 11 ],
['Platform 4 from', 'Exit C' , 5 ],
['Platform 4 from', 'Exit E' , 6]
],
nodes: [
{id: 'Platform 1 from', 'name': 'Platform 1', colorIndex: 0},
{id: 'Platform 1 to', 'name': 'Platform 1', colorIndex: 0},
{id: 'Platform 2 from', 'name': 'Platform 2', colorIndex: 1},
{id: 'Platform 2 to', 'name': 'Platform 2', colorIndex: 1},
{id: 'Platform 3 from', 'name': 'Platform 3', colorIndex: 2},
{id: 'Platform 3 to', 'name': 'Platform 3', colorIndex: 2},
{id: 'Platform 4 from', 'name': 'Platform 4', colorIndex: 3},
{id: 'Platform 4 to', 'name': 'Platform 4', colorIndex: 3},
]
}]

Related

Get all objects that has an array that contains a specific value

I have an array of objects called students that looks like this:
[
{
student_id: '1',
student_name: 'student 1',
courses: [
{ course_id: 'dxgk22452', course_name: 'courses 1' },
{ course_id: 'asdf9d2d', course_name: 'courses 2'},
{ course_id: 'h355dsf4', course_name: 'courses 3'}
]
},
{
student_id: '2',
student_name: 'student 2',
courses: [
{ course_id: 'asdf9d2d', course_name: 'courses 2'},
{ course_id: 'glld9432d2', course_name: 'courses 4' }
]
},
{
student_id: '3',
student_name: 'student 3',
courses: [
{ course_id: 'dxgk22452', course_name: 'courses 1' },
{ course_id: 'glld9432d2', course_name: 'courses 4' }
]
}
]
I am trying to figure out the best way to get all objects that contain a specific course id.
I tried students.where(courses.course_id == "dxgk22452") with no luck and could not find a post with my specific situation.
What would be the best way to go about this?
You can iterate twice to select those hashes, where their courses include at least one hash where its course_id is equal to dxgk22452:
data.select { |e| e[:courses].find { |f| f[:course_id] == 'dxgk22452' } }
Given an array:
students = [
{
student_id: '1',
student_name: 'student 1',
courses: [
{ course_id: 'dxgk22452', course_name: 'courses 1' },
{ course_id: 'asdf9d2d', course_name: 'courses 2'},
{ course_id: 'h355dsf4', course_name: 'courses 3'}
]
},
{
student_id: '2',
student_name: 'student 2',
courses: [
{ course_id: 'asdf9d2d', course_name: 'courses 2'},
{ course_id: 'glld9432d2', course_name: 'courses 4' }
]
},
{
student_id: '3',
student_name: 'student 3',
courses: [
{ course_id: 'dxgk22452', course_name: 'courses 1' },
{ course_id: 'glld9432d2', course_name: 'courses 4' }
]
}
]
Return the students whose courses include the given value:
students.select { |student| student[:courses].any? { |course| course[:course_id] == 'dxgk22452' } }
=> [
{
student_id: '1',
student_name: 'student 1',
courses: [
{ course_id: 'dxgk22452', course_name: 'courses 1' },
{ course_id: 'asdf9d2d', course_name: 'courses 2'},
{ course_id: 'h355dsf4', course_name: 'courses 3'}
]
},
{
student_id: '3',
student_name: 'student 3',
courses: [
{ course_id: 'dxgk22452', course_name: 'courses 1' },
{ course_id: 'glld9432d2', course_name: 'courses 4' }
]
}
]

Hicharts sankey diagram error when looping

I want to build a sankey diagram with some looping items.
I found this JSFiddle example:
Highcharts.chart('container', {
chart: {
marginLeft: 100,
marginBottom: 200,
marginRight:200
},
title: {
text: 'Highcharts Sankey Diagram'
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['a', 'b', 5 ],
['b', 'c', 5 ],
['c', 'b', 5 ],
],
clip: false,
type: 'sankey',
name: 'Sankey demo series'
}]
});
It works, but some modifications of the series give errors.
For example this data guides to
Uncaught TypeError: Cannot read property 'options' of undefined
error in console:
['a', 'b', 5 ],
['b', 'c', 5 ],
['c', 'a', 5 ],
So is there any possibility to loop it back to the first element?
As of today, circular references are not supported in sankey diagrams in highcharts. See the open issue at github for more details: https://github.com/highcharts/highcharts/issues/8218.

Highchart Sankey is not working with same from value as to value settings

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

How to use PlotLines only for drilldown option?

I have used Column with drilldown highchart.
and its drilldown is
I am getting the right output in its drilldown but I don't want PlotLine to be visible in the first image. How do I solve this?
$(document).ready(function () { });
angular.module('myModule', []).service("AttendanceService", function ($http) {
this.getdata = function () {
return $http({
method: "post",
url: "GetAttendanceReport",
params: [{ EmpID: $("#nameofEmp").val(), YearID: $("#YearIn").val() }],
dataType: "json"
});
};
}).controller('myController', function ($scope,AttendanceService) {
GetAlldata();
function GetAlldata() {
var getAttendanceData = AttendanceService.getdata();
getAttendanceData.then(function (Attendances) {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Attendance Report' + ' ' + $("#YearIn option:selected").text()
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total Attendance Recorded'
},
plotLines: [{
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: { text: 'goal' },
}],
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}mins</b> of total<br/>'
},
series: [{
name: 'Attendance',
colorByPoint: true,
data: [{
name: 'Jan',
y: Attendances.data.YearlyReport[0],
drilldown: 'Jan'
}, {
name: 'Feb',
y: Attendances.data.YearlyReport[1],
drilldown: 'Feb'
}, {
name: 'March',
y: Attendances.data.YearlyReport[2],
drilldown: 'March'
}, {
name: 'April',
y: Attendances.data.YearlyReport[3],
drilldown: 'April'
}, {
name: 'May',
y: Attendances.data.YearlyReport[4],
drilldown: 'May'
}, {
name: 'June',
y: Attendances.data.YearlyReport[5],
drilldown: 'June'
}, {
name: 'July',
y: Attendances.data.YearlyReport[6],
drilldown: 'July'
}, {
name: 'Aug',
y: Attendances.data.YearlyReport[7],
drilldown: 'Aug'
}, {
name: 'Sep',
y: Attendances.data.YearlyReport[8],
drilldown: 'Sep'
}, {
name: 'Oct',
y: Attendances.data.YearlyReport[9],
drilldown: 'Oct'
}, {
name: 'Nov',
y: Attendances.data.YearlyReport[10],
drilldown: 'Nov'
}, {
name: 'Dec',
y: Attendances.data.YearlyReport[11],
drilldown: 'Dec'
}]
}],
drilldown: {
series:
[{
name: 'Jan',
id: 'Jan',
data: [
[
'1',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 1])
],
[
'2',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 2])
],
[
'3',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 3])
],
[
'4',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 4])
],
[
'5',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 5])
],
[
'6',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 6])
],
[
'7',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 7])
],
[
'8',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 8])
],
[
'9',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 9])
],
[
'10',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 10])
],
[
'11',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 11])
],
[
'12',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 12])
],
[
'13',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 13])
],
[
'14',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 14])
],
[
'15',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 15])
],
[
'16',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 16])
],
[
'17',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 17])
],
[
'18',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 18])
],
[
'19',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 19])
],
[
'20',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 20])
],
[
'21',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 21])
],
[
'22',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 22])
],
[
'23',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 23])
],
[
'24',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 24])
],
[
'25',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 25])
],
[
'26',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 26])
],
[
'27',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 27])
],
[
'28',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 28])
],
[
'29',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 29])
],
[
'30',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 30])
],
[
'31',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 31])
]
]},and so on]
}
});
}, function () {
alert('Error in getting records');
});
} $("#btnLoad").click(function (event) {
GetAlldata();
});
$("#btnBack").click(function (event) {
window.location.href = "homepage";
});
});
This is the full code I have used.
You could remove and add plotLine dynamically when drilling down or up.
Example: http://jsfiddle.net/a5yzsarx/
$(function() {
$('#container').highcharts({
chart: {
events: {
drilldown: function() {
this.xAxis[0].removePlotLine('p1');
},
drillup: function() {
this.xAxis[0].addPlotLine({
id: 'p1',
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'goal'
}
});
}
}
},
series: [{
type: 'column',
data: [{
y: 42,
drilldown: 's2'
}]
}],
drilldown: {
series: [{
id: 's2',
data: [1, 2, 3]
}]
},
yAxis: {
plotLines: [{
id: 'p1',
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'goal'
}
}]
}
});
});

how to use different colour for some specific column in my high chart?

I have my highchart below
what I want is to colour those columns with some different colour which are having the value exactly 8.00
here is my code
$(document).ready(function () { });
angular.module('myModule', []).service("AttendanceService", function ($http) {
this.getdata = function () {
return $http({
method: "post",
url: "GetAttendanceReport",
params: [{ EmpID: $("#nameofEmp").val(), YearID: $("#YearIn").val() }],
dataType: "json"
});
};
}).controller('myController', function ($scope,AttendanceService) {
GetAlldata();
function GetAlldata() {
var getAttendanceData = AttendanceService.getdata();
getAttendanceData.then(function (Attendances) {
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function () {
this.yAxis[0].addPlotLine({
id: 'p1',
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'goal'
}
})
},
drillup: function () {
this.yAxis[0].removePlotLine('p1');
}
},
}
title: {
text: 'Attendance Report' + ' ' + $("#YearIn option:selected").text()
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total Attendance Recorded',
plotLines: [{
id: 'p1',
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'goal'
}
}]
},
}
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}mins</b> of total<br/>'
},
series: [{
name: 'Attendance',
colorByPoint: true,
data: [{
name: 'Jan',
y: Attendances.data.YearlyReport[0],
drilldown: 'Jan'
}, {
name: 'Feb',
y: Attendances.data.YearlyReport[1],
drilldown: 'Feb'
}, {
name: 'March',
y: Attendances.data.YearlyReport[2],
drilldown: 'March'
}, {
name: 'April',
y: Attendances.data.YearlyReport[3],
drilldown: 'April'
}, {
name: 'May',
y: Attendances.data.YearlyReport[4],
drilldown: 'May'
}, {
name: 'June',
y: Attendances.data.YearlyReport[5],
drilldown: 'June'
}, {
name: 'July',
y: Attendances.data.YearlyReport[6],
drilldown: 'July'
}, {
name: 'Aug',
y: Attendances.data.YearlyReport[7],
drilldown: 'Aug'
}, {
name: 'Sep',
y: Attendances.data.YearlyReport[8],
drilldown: 'Sep'
}, {
name: 'Oct',
y: Attendances.data.YearlyReport[9],
drilldown: 'Oct'
}, {
name: 'Nov',
y: Attendances.data.YearlyReport[10],
drilldown: 'Nov'
}, {
name: 'Dec',
y: Attendances.data.YearlyReport[11],
drilldown: 'Dec'
}]
}],
drilldown: {
series:
[{
name: 'Jan',
id: 'Jan',
data: [
[
'1',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 1])
],
[
'2',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 2])
],
[
'3',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 3])
],
[
'4',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 4])
],
[
'5',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 5])
],
[
'6',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 6])
],
[
'7',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 7])
],
[
'8',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 8])
],
[
'9',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 9])
],
[
'10',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 10])
],
[
'11',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 11])
],
[
'12',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 12])
],
[
'13',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 13])
],
[
'14',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 14])
],
[
'15',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 15])
],
[
'16',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 16])
],
[
'17',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 17])
],
[
'18',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 18])
],
[
'19',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 19])
],
[
'20',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 20])
],
[
'21',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 21])
],
[
'22',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 22])
],
[
'23',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 23])
],
[
'24',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 24])
],
[
'25',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 25])
],
[
'26',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 26])
],
[
'27',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 27])
],
[
'28',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 28])
],
[
'29',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 29])
],
[
'30',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 30])
],
[
'31',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 31])
]
]},and so on]
}
});
}, function () {
alert('Error in getting records');
});
} $("#btnLoad").click(function (event) {
GetAlldata();
});
$("#btnBack").click(function (event) {
window.location.href = "homepage";
});
});
I have used Column with drilldown highchart. Is there any way??
You can directly pass an attribute color the the datapoint of your series like this:
color: '#00ff00'
You then just need to cycle through your data and replace those point's color.
JsFiddle
You may find this question elsewhere on Stack Overflow helpful: Highcharts Change Bar Color Based on Value. Please refer to the accepted answer, which has code to iterate over the series and color them based on their value.

Resources