I started exploring highcharts. Created report with organization hierarchy with drilldown.
Unable to format the links in drilldown report, they look like triangles instead of straight lines like in the main org chart and getting messy when the hierarchy in the drilldown gets multiple nodes.
In below example, click on Div.2, see the drilldown links. What chart options do we have to control these triagle svg shapes other than linkLineWidth etc..
Links with Triangle Shape
jsfiddle Test Case
Highcharts.chart('container', {
chart: {
height: 600,
width: 600,
inverted: true,
type: 'organization'
},
title: {
text: 'Highcharts Org Chart'
},
series: [{
name: 'Highsoft',
data: [{
from: "CO",
to: "DIV01",
},
{
from: 'CO',
to: 'DIV02'
}
],
nodes: [{
id: 'DIV01',
title: 'Div Hd 1',
name: 'Div. 1',
drilldown: "DIV01"
},
{
id: 'DIV02',
title: 'Div Hd 2',
name: 'Div. 2',
drilldown: 'DIV02'
}
]
}],
drilldown: {
activeDataLabelStyle: {
color: 'contrast'
},
layout: 'hanging',
series: [{
id: "DIV01",
name: "DIV01",
keys: ['from', 'to'],
data: [
['DIV01', 'DEP01']
],
nodes: [{
id: 'DEP01',
title: 'Dept Hd 1',
name: 'Dept. 1'
}]
},
{
id: "DIV02",
name: "DIV02",
keys: ['from', 'to'],
data: [
['DIV02', 'DEP02'],
['DEP02', 'DEP03'],
['DEP02', 'DEP04'],
['DEP04', 'DEP05'],
['DEP04', 'DEP06'] ,
['DEP04', 'DEP08'] ,
['DEP06', 'DEP07']
],
nodes: [{
id: 'DEP02'
}]
}
]
}
});
It's a bug, more information you will find in Github issue, workaround you can change patch color via CSS fill: none.
.highcharts-series path {
fill: none;
}
demo: https://jsfiddle.net/BlackLabel/ay1czgxp/
Related
I am trying to set up a simple org chart with Highcharts to display our association board and functions.Below the president, there are 4 level 1 items, then there are 3 folks at level 2 and I would like to add another 5 folks also at level 2 but all this would not fit given the chart width, so I would like to extend the level 2 line so that these 5 level 2 folks get displayed below, pretty much like a level 3...just like this
I believe that this is easy but just couldn't figure it out...
Thanks for helping out
Philippe
Try to manipulate properties offsetHorizontal and offsetVertical.
series: [{
type: 'organization',
name: 'Digital Transformation',
keys: ['from', 'to'],
data: [
['CEO', 'Department1'],
['CEO', 'Department2'],
['CEO', 'Department3'],
['CEO', 'Department4'],
['CEO', 'Department5'],
['CEO', 'Department4x'],
],
levels: [{
level: 0,
color: 'silver',
dataLabels: {
color: 'white'
},
height: 25
}, {
level: 1,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 2,
color: 'green',
dataLabels: {
color: 'black'
},
height: 25
}],
nodes: [{
id: '',
title: 'CEO',
name: null,
color: "#000000",
info: "CEO"
}, {
className: 'title',
id: 'Department1',
title: 'Department1',
name: '',
layout: 'hanging',
}, {
id: 'Department2',
title: 'Department2',
name: '',
layout: 'hanging',
}, {
id: 'Department3',
title: 'Department3',
name: '',
layout: 'hanging',
}, {
id: 'Department4',
title: 'Department4',
name: '',
layout: 'hanging',
}, {
id: 'Department5',
title: 'Department5',
name: '',
layout: 'hanging',
level: 1,
offsetHorizontal: 15,
offsetVertical: 0,
}, {
id: 'Department4x',
title: 'Department4x',
name: '',
layout: 'hanging',
level: 2
}],
}],
Live demo:
https://jsfiddle.net/BlackLabel/0tk6n94L/
API References:
https://api.highcharts.com/highcharts/series.organization.nodes.offsetHorizontal
https://api.highcharts.com/highcharts/series.organization.nodes.offsetVertical
Hi guys I want to achieve something like this using HighCharts Stacked Column
This is my current code
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
}
}
},
xAxis: {
categories: ['Cukai Semasa', 'Tunggakan Cukai']
},
series: [{
name: 'Baki Cukai Semasa',
data: [69000000, 60000000]
}, {
name: 'Kutipan Semasa',
data: [69000000, 60000000]
}]
Which resulting this chart
As you can see, my generated chart dont have the label for Tunggakan Cukai category (Baki Kutipan Tunggakan and Kutipan Tunggakan).
How to achieve this using Stacked Column?
Thanks
Another way is to use series.legendType: 'point'.
Code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
legendType: 'point',
stacking: 'normal',
dataLabels: {
enabled: true,
}
}
},
xAxis: {
categories: ['Cukai Semasa', 'Tunggakan Cukai']
},
series: [{
data: [{
name: 'Baki Cukai Semasa',
y: 69000000,
color: '#72AD4D'
}, {
name: 'Baki Kutipan Tunggakan',
y: 60000000,
color: '#FC3D45'
}]
}, {
data: [{
name: 'Kutipan Semasa',
y: 69000000,
color: '#AAD092'
}, {
name: 'Kutipan Tunggakan',
y: 60000000,
color: '#FD7C82'
}]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/9xmnrqp2/
One way of achieving this and showing all points in legend is by making them individual series:
series: [{
name: 'Baki Cukai Semasa',
data: [69000000, null]
}, {
name: 'Kutipan Semasa',
data: [60000000, null]
}, {
name: 'Baki Kutipan Tunggakan',
data: [null, 69000000]
}, {
name: 'Kutipan Tunggakan',
data: [null, 60000000]
}]
See this JSFiddle demonstration of it in use.
I have created a HighCharts bar chart and now I want it to drill down in to further detail.
Here is my JS FIDDLE
My data looks like this
var seriesData = [{
name: 'A',
data: [
{
y : 10,
drilldown: {
name: 'A',
categories: ['1', '2'],
data: [5, 7],
color: colors[0]
}
},
{
y : -29,
drilldown: {
name: 'A',
categories: [' 1', '2'],
data: [5, 7],
color: colors[0]
}
}
]
}];
I am still not able to drill down in to detail view
Just start with this example: http://www.highcharts.com/demo/column-drilldown
This is proper setting for drilldown:
series: [{
name: 'Brands',
colorByPoint: true,
data: data
}],
drilldown: {
series: drilldownSeries
}
In your data drilldown is full series, while should be just series ID from drilldown.series. Study for a while example from above URL, it's really simple example.
I have the following data structure:
{
"origin": "category2",
"value": 30,
"key": "name1"
},
{
"origin": "category1",
"value": 18,
"key": "name2"
},
{
"origin": "category2",
"value": 15,
"key": "name3"
},
{
"origin": "category1",
"value": 11,
"key": "name4"
},
Now I'm looking for a way to draw this data as bar chart where the key is used as legend for the axis and the origin is used for the color of the bar and the chart legend, so I have a chart with 4 bars with 2 different colors and a chart legend that shows category1 and category2.
I wonder if there is better way then have 2 series looking like this:
{name: 'category1', data: [0,18,0,11]}
{name: 'category2', data: [30,0,15,0]}
and the categories:
['name1','name2','name3','name4' ]
Apart of your solution, you can use single serie and define color for point like:
series: [{
name: 'Year 1800',
data: [107, 31, {
y: 635,
color: 'red'
}, {
y: 635,
color: 'red'
}]
}]
http://jsfiddle.net/RBSpe/
Other option is to manage each bar as unique and have more control over each bar configuration.
Template.body.helpers({
createChart: function () {
// Prepare some data:
category1= [{
y: 18,
name: "category1"
}],
category2 = [{
y: 30,
name: "category2"
}],
category3 = [{
y: 40,
name: "category3"
}],
category4 = [{
y: 5,
name: "category4"
}];
// Use Meteor.defer() to create chart after DOM is ready:
Meteor.defer(function() {
// Create standard Highcharts chart with options:
Highcharts.chart('Charts', {
chart: {
renderTo: 'container',
type: 'column',
},
series: [{
type: 'column',
margin: 75,
data: category1,
name: "category1Name",
color: '#FF6600'
}, {
type: 'column',
margin: 75,
data: category2,
name: "category2Name",
color: '#FF6600'
}, {
type: 'column',
margin: 75,
data: category3,
name: "category3Name",
color: '#ffff00'
}, {
type: 'column',
margin: 75,
data: category4,
name: "category4Name",
color: '#ffff00'
}]
});
});
I have a chart that looks like this:
http://jsfiddle.net/rtGFm/37/
I would like to have a "sort" button that sorts high to low each category, putting the columns in a different order for each category. Is this possible with HighCharts?
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'foreclosures',
'nuisances',
'distance from city center'
]
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Alger Heights',
data: [49.9, 71.5, 50]
}, {
name: 'Shawmut Hills',
data: [83.6, 78.8, 67]
}, {
name: 'Baxter',
data: [48.9, 38.8, 100]
}, {
name: 'Midtown',
data: [42.4, 33.2, 80]
}, {
type: 'scatter',
data: [55,60,70],
marker: {
symbol: 'square',
lineColor: '#FFFFFF',
lineWidth: 1,
radius: 8
},
name: 'Average'
}]
});
});
I had the same problem :) highcharts still does not provide any solution for this problem, but it is flexibel enough so that you can sort anyway - just by javascript.
Put your data in a separate value:
var dataMain = [{name:"test1",data:5}, {name:"test1",data:1},{name:"test1",data:2}]
In series you can just add a function which sorts your data:
series: (function(){
for(var i = 0;i<dataMain.length;i++){
dataMain[i].data = dataMain[i].data.sort(function(a,b){
return a[0] - b[0] ;
})
return dataMain;
}
Hope I got everything wright.
Got it to work, I believe. Trick is to add each column in correct order as a new serie with same type (column), reuse colors and hide legend...
Very hackish, the JS code to sort like 8 categories independently will be ugly but the result looks fine.
Edit: Updated fiddle, I see the spacing between the categories grows with series, doesn't look supernice.
My jsfiddle is here
$(function () {
$('#container').highcharts({
chart: {
inverted: true
},
title: {
text: 'Series sorted in within categories'
},
xAxis: {
categories: ['January']
},
series: [{
type: 'column',
name: 'Stockholm',
data: [{x:0, y:95, color: Highcharts.getOptions().colors[0]}]
}, {
type: 'column',
name: 'Göteborg',
data: [{x:0, y:80, color: Highcharts.getOptions().colors[1]}]
}, {
type: 'column',
name: 'Göteborg',
data: [{x: 1, name: 'February', y: 98, color: Highcharts.getOptions().colors[1] // VGR's color
}],
showInLegend: false,
dataLabels: {
enabled: false
}
}, {
type: 'column',
name: 'Stockholm',
data: [{x: 1, name: 'February', y: 80, color: Highcharts.getOptions().colors[0] // VGR's color
}],
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
br,
Jens
I think this can be done,
this may look like a little work around.
since we have a limited number of columns i mean 4 in the given example.
if we have arrays with sorting done with respect to each series then we can handle them.
on button click we can update the chart with new set of data as well as category array.
May be there is no solution from the APi.
According to me this is a possible approach.
Thanks,