Related
I created highcharts heatmap with drilldown. Drilldown has link on xaxis lable. Could I have link only on yaxis? And remove link on xaxis. Since my drilldown chart is associate to y not x.
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
colorAxis: {
min: 0,
stops: [
[0, '#7EAB55'],
[0.5, '#FFFE55'],
[1, '#B02418']
],
},
series: [{
data: [{
x: 0,
y: 0,
value: 0,
drilldown: 'animals'
}, {
x: 0,
y: 1,
value: 1
}, {
x: 1,
y: 0,
value: 2,
drilldown: 'animals'
}, {
x: 1,
y: 1,
value: 1
}],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
drilldown: {
series: [{
id: 'animals',
data: [
[0, 3, 1],
[1, 1, 4],
[2, 4, 3]
]
}]
}
});
This is example in fiddle. Thanks.
https://jsfiddle.net/lundi/jdc4mpk2/
From Sebastian's suggestion, this is the answer.
You can use the chart.inverted feature to achieve the wanted result: jsfiddle.net/BlackLabel/82qapmoe
I am working ReactHigh charts on polar graphs, I want my labels to come in between the sectors of the circle, they are coming on points but i dont want them to come there.
JSfiddle : https://jsfiddle.net/ra73mp0c/12/
Also I want a background color on each of the labels.
Graph as of now :
Desried Outcome :
Please help me .
Config of graph :
const config = {
chart: {
polar: true,
type: 'line',
width: 700,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: null
},
pane: {
size: '80%'
},
xAxis: {
categories: [
'Sales',
'Sales',
'Sales',
'Sales',
'Marketing',
'Development',
'Customer Support',
'Customer Support',
'Customer Support',
'Information Technology'
],
labels: {
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
},
tickmarkPlacement: 'on'
},
yAxis: {
gridLineInterpolation: 'polygon',
min: 0,
tickInterval: 1,
max: 6
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: { enabled: false },
series: [
{
name: 'Allocated Budget',
data: [1, 2, 3, 1, 4, 3, 1, 2, 4, 1],
pointPlacement: 'between'
},
{
name: 'Actual Spending',
data: [2, 4, 2, 1, 3, 4, 2, 2, 1, 4],
pointPlacement: 'between'
}
]
}
Thanks a lot, It would be helpful ig you can edit the fiddle Link https://jsfiddle.net/ra73mp0c/12/
Creating that kind of background for x axis labels is not supported in Highcharts.
As a workaround you can create a phantom series that mimics their look:
{
showInLegend: false,
type: 'polygon',
name: 'Labels background',
data: [
[1, 5],
[2, 5],
[2, 6],
[1, 6]
],
zIndex: -9999
}
labels.distance should be a negative value to make it work.
Demo: https://jsfiddle.net/BlackLabel/63nc1csv/
I am looking for help in implementing multi-level drill down with Highcharts async drill down. I was able to implement the drill down to first level but i need drill down to one more level. Below is sample example which i am using for reference. In below example i can drill down to "Animals","Fruits" & "Cars". I also can click on Sheep and able to drilldown but how can i add series which will be displayed after i click on Sheep. Thanks for any help..
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
{name: 'Sheep',
y:5,
drilldown: true
},
['Cow', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
Since their sample code references the point's name, should should create the drilled down values in the "drilldowns" dictionary using the data's parent name as the dictionary key. Here is an example of drilling into Dogs:
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
{name: 'Dogs',
drilldown: true,
y: 2
},
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
},
"Dogs": {
name: 'Dogs',
data: [
{
name: 'Rottweiler',
drilldown: true,
y: 6,
}, {
name: 'Pit Bull',
y: 2,
}, {
name: 'Poodle',
y: 4,
}]
},
"Rottweiler": {
name: 'Rottweiler',
data: [
['male', 4],
['female', 2]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 200);
}
Notice I added two new keys: "Dogs" and "Rottweiler".
Hope that helps.
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2, true],
['Sheep', 3, true]
],
keys: ['name','y','drilldown']
},
'Sheep': {
name: 'Sheep',
data: [
['Red', 2],
['White', 1]
]
},
'Cows': {
name: 'Cows',
data: [
['Red', 1],
['White', 1]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5, true],
['Oranges', 7, true],
['Bananas', 2]
],
keys: ['name','y','drilldown']
},
'Apples': {
name: 'Apples',
data: [
['Red', 3],
['Green', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});
I'm new at Highcharts. I'm trying to create a Drilldown Bubble Chart.
I took the basic column drilldown as a starting point,
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
and edited it a bit, to get this,
http://jsfiddle.net/Slate_Shannon/kdwa9x7v/1/
$(function() {
$('#container').highcharts({
chart: {
type: 'bubble'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'linear'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
x: 4,
y: 5,
z: 10,
drilldown: 'animals'
}, {
name: 'Fruits',
x: 14,
y: 20,
z: 20,
drilldown: 'fruits'
}, {
name: 'Cars',
x: 8,
y: 9,
z: 7,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', x: 5, y: 9, z: 7],
['Dogs', x: 8, y: 8, z: 9],
['Cows', x: 1, y: 5, z: 2],
['Sheep', x: 4, y: 7, z: 2],
['Pigs', x: 4, y: 5, z: 7]
]
}, {
id: 'fruits',
data: [
['Apples', x: 2, y: 9, z: 6],
['Oranges', x: 6, y: 5, z: 1]
]
}, {
id: 'cars',
data: [
['Toyota', x: 2, y: 8, z: 7],
['Opel', x: 8, y: 2, z: 4],
['Volkswagen', x: 4, y: 4, z: 4]
]
}]
}
});
});
All I did was
change the chart type to "bubble",
add the x and z data,
change the xaxis to "linear"
And it doesn't work.
Can you see the problem?
Thanks much!
Good day.
The formatting of your drilldown data is incorrect, as hinted to in console. Currently you have:
data: [
['Cats', x: 5, y: 9, z:7],
['Dogs', x: 8, y: 8, z:9],
// ...
]
This is half way between an array declaration and a object declaration. I'd suggest switching to each item being an object, like this:
data: [
{ name: 'Cats', x: 5, y: 9, z:7 },
{ name: 'Dogs', x: 8, y: 8, z:9 },
// ...
]
Secondly, you haven't included the required Highcharts-more module which includes the bubble chart type. You can do that like this:
<script src="https://code.highcharts.com/highcharts-more.js"></script>
See this updated JSFiddle for a basic example of how it can work.
I need to show on graph duration of periodic events. For example user with ID 1 is calling to user with ID 2 at 10:00 AM and they are speaking 5 minutes. Then he is calling him again at 2:00PM and they are speaking 2 minutes. So this events are happening periodically and I need to show them on the graph as horizontal bars. They should look something like that: User 1: [ 5min ][ 2min ][ ... ][ ... ]
I've almost achieved what I want except that I can't find the way to show time at X axis. The X axis should show time with 30 minutes interval.
Here is my configuration:
title: null,
chart: {
type: 'bar',
backgroundColor: '#F9F9F9',
plotBackgroundColor: '#F9F9F9',
borderColor: '#F9F9F9',
borderWidth: 1,
animation: 0
},
legend: {
enabled: false
},
series: [
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'blue'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'blue'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] },
{ data: [{ y:1, color: 'transparent'} ] },
{ data: [{ y:1, color: 'red'} ] }
],
xAxis: {
categories: ['User 1']
},
yAxis: {
allowDecimals: false,
min: 0,
type: '',
title: {
text: 'Time'
},
stackLabels: {
enabled: false
}
},
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
enabled: false
},
borderWidth: 0
}
Here is demonstration of concept: http://jsfiddle.net/dimitrykislichenko/SjdR5/
I think you should be using columnrange series with axis type: 'datetime'. See: http://jsfiddle.net/SjdR5/2/
Note requires change in series object:
series: [{
data: [{
x: 0,
low: Date.UTC(2013, 1, 1, 10, 53),
high: Date.UTC(2013, 1, 1, 10, 59),
color: 'red'
},{
x: 0,
low: Date.UTC(2013, 1, 1, 12, 12),
high: Date.UTC(2013, 1, 1, 12, 17),
color: 'red'
},{
x: 0,
low: Date.UTC(2013, 1, 1, 16, 35),
high: Date.UTC(2013, 1, 1, 16, 55),
color: 'red'
}]
}],
x:0 -it's category index ( 0 = User 1 )
low and high is like from and to for time
color is just color of bar ;)