Highcharts multiple series remove reserved space - javascript

So I've been trying to find a way to do this properly, but as far as I understand it's not possible as of now. Hoping that someone might prove me wrong.
Some background:
I'm trying to plot a timeline to keep track of tickets in Jira. No worries getting the data in and drawing each item on separate rows since highcharts is pretty much doing this for me.
A bit more advanced:
Going a little further to enhance the viewing experience I would like to group the different items based on something (in my case a single component in Jira), give items in the same group the same color so that the viewer can see that some thing might be related.
Even this is really simple to do by using multiple series together with categories.
The problem:
So when doing the grouping using categories and multiple series (one item/series) the plotting is starting to behave weird.
It seems like each one of the categories (axes) is reserving space for each series, even if one category might only have a single item in it.
This creates way too much whitespace, forcing the items to get really narrow.
See fiddle here
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/modules/xrange.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>
<div id="container"></div>
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0
}]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 2
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 2
},]
}]
});
What I want:
Instead of creating a lot of whitespace I want either the width of each item to be relative to the space available in the group, or if the group axes themselves could adjust their width according to items inside (and all items is the same width).
I've found a few similar questions, but not a proper solution.
In this github issue the solution is to set grouping to false, but by doing that items in the same category will overlap instead of having their own row.
Would really appreciate if someone could help me out!

Such behavior is not supported in Highcharts by default, but I created some experimental workaround. We can change the sizes and positions of the points based on calculated values:
events: {
render: function() {
var series = this.series,
categoryWidth = this.yAxis[0].toPixels(2) - this.yAxis[0].toPixels(1),
pointWidth,
rectEl,
y,
levels = [];
Highcharts.each(series, function(s) {
if (!levels[s.yData[0]]) {
levels[s.yData[0]] = [s.index]
} else {
levels[s.yData[0]].push(s.index)
}
});
Highcharts.each(levels, function(level) {
if (level.length > 1) {
pointWidth = categoryWidth / level.length;
y = series[level[0]].points[0].shapeArgs.y;
Highcharts.each(level, function(index) {
rectEl = series[index].points[0].graphic.element.children[0];
rectEl.setAttribute('height', pointWidth);
rectEl.setAttribute('y', y);
y += pointWidth;
});
}
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/y8uqsx5h/

Related

Chart.js how set equal step size depending on actual data (xaxis)?

I want to achiev that the setp size of the xaxis depends on the actual value from the label. Here an example of excel how I expect my chart.js line chart should look the step on the x-axis is "2":
But my chart.js always distributes the labels equally on the xaxis:
My xaxis settings:
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Test'
},
ticks:
{
min: 1,
max:17,
stepSize: 5,
},
distribution: 'linear',
}],
Here a link to my chart.js example: https://jsfiddle.net/h97remq3/1/
I tried the whole afternoon different x-axis settings but never get my desired result like in excel. I think the solution should be an easy setting, but I didn't find it...
Instead of using line chart, use a 'scatter' chart. Then omit data.labels and define the data in point format as follows.
data: [
{ x: 1, y: 10 },
{ x: 2, y: 2 },
{ x: 3, y: 5 },
{ x: 5, y: 22 },
{ x: 10, y: 17 },
{ x: 15, y: 11 },
{ x: 17, y: 3 }
],
Please have a look at your amended JSFiddle.

react-highcarts using es6 getting some errors

I am new to react library and es6 and I tried to build a graph that display data. I started with creating the react app template and then I decided to use highchart and start playing with their xrange graph.
Im using https://github.com/kirjs/react-highcharts library.
My Code looks like:
import React, { Component } from 'react'
import ReactHighcharts from 'react-highcharts';
class Graph extends Component {
constructor() {
super();
this.state = {
config: {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
name: 'Project 1',
// pointPadding: 0,
// groupPadding: 0,
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: true
}
}]
}
}
}
render() {
const config = this.state.config;
return (
<ReactHighcharts config={config}></ReactHighcharts>
)
}
}
export default Graph
My final design is going to be importing a default template and inject to the component properties like title and data to make it a little more flexible.
Im getting 2 errors (I just copy the xrange graph from highcharts website):
Error: Highcharts error #17: www.highcharts.com/errors/17
TypeError: Cannot read property 'destroy' of undefined
Follow error link https://www.highcharts.com/errors/17 which state
This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.
Import highcharts more js
import ReactHighcharts from 'react-highcharts';
import xrange from 'highcharts/modules/xrange';
(xrange)(ReactHighcharts.Highcharts)
Stackblitz demo

Stacking Highcharts data in an xrange data series

I am creating a gantt chart showing my advertising buys for the year. Everything is working well except when I have data on the same y axis. The data ends up displayed one on top of the other. How can you stack the data show both can be displayed. Here is a JSFIDDlE showing my dilemma. http://jsfiddle.net/tagriffith/a16mgm04/1/
When I want to show the radio spots in the same y (4) series and they have the same run dates the data gets stacked on top of each other. Below is the partial code from the jsfiddle.
[{
name: 'Radio',
groupPadding: 0,
borderRadius: 0,
pointWidth: 20,
data: [{
name: 'WLW',
x: Date.UTC(2015, 12, 4),
x2: Date.UTC(2015, 12, 20),
y: 4
}, {
name: 'WNKU',
x: Date.UTC(2015, 12, 4),
x2: Date.UTC(2015, 12, 20),
y: 4
},
{
name: 'WGUC',
x: Date.UTC(2015, 12, 4),
x2: Date.UTC(2015, 12, 20),
y: 4
},]]
New answer:
Grouping data points with same y values, from the same series is not possible. Series can be grouped - as they are by default. If you want your data points to be displayed with different y values, then you would have to set those values - e.g. process your data before using it in Highcharts. Series can be linked to each other, so they will appear and behave as one - performance might slight drop and custom code might need a little adjustments.
Example: http://jsfiddle.net/m7av02t7/
Previous answer:
To get all series in a single group and allow overlapping of points with same values you could set grouping to false in plotOptions.series.
...
plotOptions: {
series: {
grouping: false,
...
Example: http://jsfiddle.net/8zy6mh0m/

Make highcharts bar-chart threshold line visible & labels not to overlap on one another

I have a tornado chart created using bar-charts form Highcharts. I have set a threshold value and on either side of which there are low and high bars.
Now I need to make the threshold line visible. I also have a problem of labels getting overlapped when high, low and base values are equal.
JSFiddle Link: http://jsfiddle.net/xe7qL156/
Please help me to solve it. Thanks.
series: [{
threshold: 29.5,
name: 'Low',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 12.15,
}, {
x: 1,
y: 15.45,
}, {
x: 2,
y: 31.25,
}, {
x: 3,
y: 12.15,
}],
labels: [10, 5, 1, 2]
}, {
threshold: 29.5,
name: 'High',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 46.86,
}, {
x: 1,
y: 42.28,
}, {
x: 2,
y: 27.77,
}, {
x: 3,
y: 46.86,
}],
labels: [30, 10, 3, 4]
}]
Update: here is a mockup image of what I need
I'm not 100% sure what you want, but I think you want a vertical line overthe bars at the 29.5 position ?
If so, you can do that with another series:
series: [
{type:'line',color:'black',zIndex:505,data:[[0,29.5],[4,29.5]]},
http://jsfiddle.net/fsbqnw7m/
Alternatively, you can use the renderer API to draw a line wherever you want.
http://api.highcharts.com/highcharts#Renderer
Line can be added also as plotLine in particular place.

Highcharts - display dates in heatmap

I there any easy way to load the data in the heatmap with dates on "Y".
My data is in the following format:
[{x:1, y: 1401292253, value:0.2, name:"a"},{x:2, y: 1401173762, value:0.3, name:"b"},{x:0, y: 1401173462 , value:0.6, name:"c"}]
I want Y of the heatmap to be build automatically based on the given value. But I cant figure out how to do it.
What I've tried is:
http://jsfiddle.net/tZ6GP/16/
You need to set rowsize (or colsize for xAxis) to tell highcharts what is the range for each point. Otherwise it will be 1ms which is really low value. Second thing is that your y-values are in seconds, while in JS timestamps are in ms.
When changed that two things, you will get nice chart: http://jsfiddle.net/tZ6GP/19/
series: [{
rowsize: 3600000, // one hour
data: [{
x: 0,
y: 1401292253000,
value: 0.2,
name: "a"
}, {
x: 1,
y: 1401173762000,
value: 0.3,
name: "b"
}, {
x: 2,
y: 1401173462000,
value: 0.6,
name: "c"
}]
}]
To do this you have to treat your yAxis as categories still but then apply a label.format. This should get you started:
xAxis: {
type: 'category',
categories: ['a', 'b', 'c']
},
yAxis: {
type: 'category',
categories: ['1401292253', '1401173762', '1401173462'],
labels: {
format: '{value: %H:%M:%S}'
}
}
I also cleaned up your series.data a bit. Basically you need to give the matrix coordinates (x/y) and the value.
series: [{
data: [{
x: 1,
y: 0,
value: 0.2
}, {
x: 2,
y: 1,
value: 0.3
}, {
x: 0,
y: 2,
value: 0.6
}]
}]
By looking at this you can make out the locations of your points.
Live demo.
Update for latest highcarts code. You need to modify the yAxis label formatter:
yAxis: {
categories: ['1401292253', '1401173762', '1401173462'],
labels: {
formatter: function () {
var theTime = parseFloat(this.value);
return Highcharts.dateFormat('%H:%M:%S', theTime);
}
}
},
Update live demo.

Categories