Highcharts xrange timeline overlapping - javascript

I am using Highcharts with the xrange plugin, as seen in this fiddle here.
As seen in the dataobject, I have two areas that overlap:
data: [{
x: Date.UTC(2015, 0, 1),
x2: Date.UTC(2020, 11, 2),
y: 0
}
,{
x: Date.UTC(2015, 0, 1),
x2: Date.UTC(2020, 5, 2),
y: 0
}
, {
x: Date.UTC(2015, 0, 2),
x2: Date.UTC(2020, 11, 5),
y: 1
}]
Is there a Highcharts way to group a 'y row' according to the rowLabel, as is done in google charts, as seen below?
var options = {
**timeline: { groupByRowLabel: true},**
backgroundColor: 'white',
avoidOverlappingGridLines: true,
tooltip: { isHtml: false }
};
I would like to create this without creating a new row (e.g. y:3), as this causes spacing, alternating colours and visual confusion in the dataset.
EDIT: Here is what I am looking for:

Related

Highcharts x-range series: difficulty removing numerical labels on y-axis

This is a question for anyone with HighchartsJS experience
I’m currently having an issue displaying state data using the Highcharts X-range series charts. Specifically, My problem is that our data that we are using to represent each individual state are both fairly high and non consecutive (768, 769 and 773). To label these individual states I’m using a sparse array and placing my labels at the corresponding indices.
The problem I am trying to solve which is depicted by this jsfiddle: https://jsfiddle.net/sn4d2hvq/10/
let categoryArray = [];
categoryArray[768] = 'one';
categoryArray[769] = 'two';
categoryArray[773] = 'three';
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Example'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: categoryArray,
},
series: [{
name: 'dataset 1',
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 768,
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 769
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 773
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 769
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 773
}],
dataLabels: {
enabled: true
}
}]
});
is that I want to exclude all values (which in this case means all numerical values) on the y-axis such that there are no numbers from zero up until the first index as well as no numbers in between any of the labels (ie. 770, 771,772). Here’s an example of the desired view:
https://jsfiddle.net/estgbr6j/2/
let categoryArray = ['one', 'two', 'three'];
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Example'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: categoryArray,
},
plotOptions: {
xrange: {
colorByPoint: false,
}
},
series: [{
name: 'dataset 1',
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
}, {
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
}
}]
});
The only way I’ve been able to consistently achieve the desired result (as depicted by the second example) has been to map the values from [768, 769, 773] => [0, 1, 2] and use a dense array to label the newly mapped values. It seems that this workaround shouldn’t be necessary but I have yet to find an option in the highcharts API to easily allow for our desired result without mapping the values. It should also be noted that in our actual data set, we are usually displaying multiple series with each series depicted by its own color rather than each category (which I have been able to achieve). I would like to know which API option or options are available to display our desired result. Thank you so much.
highcharts: 9.0.1
highcharts-angular: 2.10.0
angular: 12.0.5
node: 14.18.0

The solution with mapping your data is really good. The intervals must be regular if you want to have equally distributed points.
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
}, {
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
}]
You can use tickPositions property, but labels will not be equally distributed. Example: https://jsfiddle.net/BlackLabel/gbwhk5nx/
API Reference: https://api.highcharts.com/highcharts/yAxis.tickPositions

mateusz.b on the official Highcharts forum had a great answer to this. He suggested using a columnrange series instead of an xrange series to present the data.
Check out the post here:
https://www.highcharts.com/forum/viewtopic.php?f=9&t=47822

Change Scatter Chart Size and shape dynamically - LightningChart JS

How do we change scatter chart size and shape dynamically while adding data to series
const pointz = chart.addPointSeries({ pointShape: PointShape.Circle })
.setName('Kuopio')
.setPointFillStyle(fillStyles[0])
.setPointSize(pointSize)
.setMaxPointCount(10000);
I know that we can change color dynamically by
const fillStyle = new IndividualPointFill({ color: ColorHSV(0) })
Is there any way to change size dynamically like elipse series ?

Lightning Chart JS v2.0.0 or greater
Point size and rotation can be set individually for each point. To enable support for individual size or rotation call series.setIndividualPointSizeEnabled(true) and/or series.setIndividualPointRotationEnabled(true)
const series = chart.addPointSeries({ pointShape: PointShape.Triangle })
.setIndividualPointSizeEnabled(true)
When the individual point size is enabled, the point size can be set by providing a value to a size field for each point.
series.add([
{ x: 0, y: 0, size: 1 },
{ x: 1, y: 0, size: 5 },
{ x: 2, y: 0, size: 10 },
{ x: 3, y: 0, size: 15 },
{ x: 4, y: 0, size: 20 },
{ x: 5, y: 0, size: 25 },
])
Rotation works in a similar way, the point rotation can be set by providing a value to a rotation field for each point. The rotation is defined in radians.
const series = chart.addPointSeries({ pointShape: PointShape.Triangle })
.setIndividualPointSizeEnabled(true)
series.add([
{ x: 0, y: 3, rotation: 0 },
{ x: 1, y: 3, rotation: Math.PI / 4 },
{ x: 2, y: 3, rotation: Math.PI / 2 },
{ x: 3, y: 3, rotation: Math.PI },
{ x: 4, y: 3, rotation: Math.PI * 3/2 },
{ x: 5, y: 3, rotation: Math.PI * 2 },
])
Individual point size and rotation can be also used at the same time.
const series = chart.addPointSeries({ pointShape: PointShape.Triangle })
.setIndividualPointSizeEnabled(true)
.setIndividualPointRotationEnabled(true)
series4.add([
{ x: 0, y: 3, size: 1, rotation: 0 },
{ x: 1, y: 3, size: 5, rotation: Math.PI / 4 },
{ x: 2, y: 3, size: 10, rotation: Math.PI / 2 },
{ x: 3, y: 3, size: 15, rotation: Math.PI },
{ x: 4, y: 3, size: 20, rotation: Math.PI * 3/2 },
{ x: 5, y: 3, size: 25, rotation: Math.PI * 2 },
])
Point shape can't yet be changed individually.
Lightning Chart JS v1.x:
LightningChart JS currently doesn't support changing the point shape or size individually. This is a feature that we would like to develop but haven't yet decided on when or if it will be done.
As a workaround you could use multiple point series for different shapes. So you could have one series for each point shape (square, triangle, circle) and then add the points to the different series based on the factors you want to use to determine the shape. I know that this isn't an optimal solution but it's the only solution that I can think of right now.

Highchart x-range chart extending the data point without ending

I have an x-range highchart which is used to display an event timeline. I was able to make it work for events which has start and end date. But I have events that are not yet ended and for those I need to extend the data point of the chart without stopping like below. Green event hasn't finished yet.
Following is my existing code:
Highcharts.chart('container', {
chart: {
type: 'xrange',
height: 100
},
title: {
text: ''
},
xAxis: {
visible: true,
tickLength: 0,
lineWidth: 6,
lineColor: '#000',
labels: {
enabled: false
}
},
yAxis: {
visible: false
},
legend: {
enabled: false
},
series: [{
name: '',
borderRadius: 0,
pointPadding: 0,
borderWidth: 6,
groupPadding: 0,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
color: 'transparent',
borderColor: 'rgba(230, 141, 11, 0.5)'
}, {
x: Date.UTC(2014, 10, 26),
x2: Date.UTC(2014, 11, 5),
y: 0,
color: 'transparent',
borderColor: 'rgba(228, 53, 70, 0.5)'
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 10),
y: 0,
color: 'transparent',
borderColor: 'rgba(40, 167, 69, 0.5)'
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 12),
y: 0,
color: 'transparent',
borderColor: 'rgba(40, 147, 164, 0.5)'
}],
dataLabels: {
enabled: false
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<div id="container"></div>
I tried putting Date.UTC(0, 0, 0) for the x2 but it didn't work as expected. Is this possible with xrange charts in highcharts. Thanks in advance!

You can set the x2 value to a later date than xAxis.max:
xAxis: {
...,
max: Date.UTC(2014, 11, 5)
},
...,
series: [{
data: [{
x: Date.UTC(2014, 10, 26),
x2: Date.UTC(2014, 11, 15),
...
}],
...
}]
Live demo: http://jsfiddle.net/BlackLabel/9f6Lejbs/
API Reference: https://api.highcharts.com/highcharts/xAxis.max

Xrange chart height

How can I set the height of each bar in xrange charts? I don't want to specify the height of the whole chart, instead the height of each single bar.
This type of chart (as in the link):
http://jsfiddle.net/vqpjL3ns/1/
height of bar

You should create separate series for each data point, than you will be able to set different width for each bar:
series: [{
name: 'Project 1',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}],
dataLabels: {
enabled: true
}
}, {
pointWidth: 15,
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}]
}, {
pointWidth: 30,
data: [{
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}]
}, {
pointWidth: 40,
data: [{
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}]
}, {
pointWidth: 10,
data: [{
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4uydm6tr/
API: https://api.highcharts.com/highcharts/series.xrange.pointWidth

How to create a horizontal threshold line in plotly js?

I am creating a simple line graph using plotly JS. The code is something like below:
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
xaxis:{
title:"X-Axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
autorange:false
}
}
Plotly.newPlot(myDiv,[trace1],layout);
Now I want to create a horizontal line across the graph, parallel to x-axis which I want to span the entire graph. For this I added 'shapes' in layout something like below:
var layout = {
xaxis:{
title:"X_Axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
autorange:false
},
shapes: [
{
type: 'line',
x0: 2,
y0: 12.0,
x1: 3,
y1: 12.0,
line:{
color: 'rgb(255, 0, 0)',
width: 4,
dash:'dot'
}
}
]
};
Adding the 'shapes' parameter creates a horizontal value only between point 2 and 3 on the x-axes which I have specified .
My question is how to get the horizontal line span the entire graph without depending on x-axis value? Any help will be appreciated.

You could set xref to paper which tells Plotly not to rely on the x-axis coordinates but relative to the whole graph, i.e. 0 to 1.
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
shapes: [
{
type: 'line',
xref: 'paper',
x0: 0,
y0: 12.0,
x1: 1,
y1: 12.0,
line:{
color: 'rgb(255, 0, 0)',
width: 4,
dash:'dot'
}
}
]
}
Plotly.newPlot(myDiv,[trace1],layout);
<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>

Categories

Resources