I am using following code to insert points in the scatter chart:
series: [
{
name: 'Machine 1',color: '#0000FF',marker: {radius: 3, symbol: 'circle'},
data: [
{x: Date.UTC(2020,10,07,00,00,00), y: 0, prod_type: 'Production', number_of_cycles: '10',},
{x: Date.UTC(2020,10,07,00,01,00), y: 0, prod_type: 'Production', number_of_cycles: '11',}
]
},
{
name: 'Machine 2',color: '#00FF00',marker: {radius: 3, symbol: 'circle'},
data: [
{x: Date.UTC(2020,10,07,00,00,00), y: 1, prod_type: 'Setup', number_of_cycles: '1',},
{x: Date.UTC(2020,10,07,00,01,00), y: 1, prod_type: 'Setup', number_of_cycles: '2',}
]
}
]
This works but when I put a high number of points (more than 1,000) into one section data[], the chart shows nothing.
Thanks for your help
Jan
That is caused by the turboThreshold option:
turboThreshold: number
When a series contains a data array that is longer than this, only one
dimensional arrays of numbers, or two dimensional arrays with x and y
values are allowed. Also, only the first point is tested, and the rest
are assumed to be the same format. This saves expensive data checking
and indexing in long series. Set it to 0 disable.
Note: In boost mode turbo threshold is forced. Only array of numbers
or two dimensional arrays are allowed. Defaults to 1000.
You can map your data to a simpler format, like: [x, y] or change the value of turbo threshold.
API Reference: https://api.highcharts.com/highcharts/series.scatter.turboThreshold
Related
I want to create a chart like the pic below
Each point has x, value, cat1, cat2
x-Axis to have DateTime data
y-Axis can be Category cat1. I want cat2 as a sub category/ as an analogy it could be a highchart series
Please do not suggest to take cartesian product of cat1 cat2 and plot a single category because that crowds the chart and looses the functionality to select via cat2
Cat1 and cat2 are not related to each other. Just think of it as 2 enum tags to each data point.
Ex for a daily cars sold data, Cat1 = [Hatchback, Sedan...], Cat2 = [Yellow, Red, Green] etc..
This is a very trivial usecase and I find it hard to believe that highchart cannot let me do it. i am sure I am missing something. Any examples or help would be highly appreciated since i have tried several approaches already now and spent considerable amount of time
The idea is not to have a mixture of column series or heatmap series. i am ok with same type for all series, I personally would prefer a heatmap solution
You can create two separate heatmap charts, both of them with two rows of data:
Highcharts.chart('container', {
...,
xAxis: {
type: 'datetime',
visible: false
},
series: [{
type: 'heatmap',
data: [
[0, 0, 10],
[1, 0, 19],
[2, 0, 8],
[3, 0, 24],
[4, 0, 67],
[0, 1, 92],
[1, 1, 58],
[2, 1, 78],
[3, 1, 117],
[4, 1, 48]
],
...
}]
});
Highcharts.chart('container2', {...});
Live demo: https://jsfiddle.net/BlackLabel/jLbvw43z/
Docs: https://www.highcharts.com/docs/chart-and-series-types/heatmap
This is my chart
I need that tick start from the start of my chart, without padding left.
I tried read docs, but I couldn't find anything about it
Per the docs it should be doing this anyway with xAxis.startOnTick:
Whether to force the axis to start on a tick.
Use this option with the minPadding option to control the axis start.
Defaults to false.
So, perhaps you overwrote this in your chart code?
Update:
So, from your code what you have is a categorical xAxis and an area line chart. Stylistically* this does not make much sense as the entire category "bin" is one single value and you are putting in time values (I assume since they are ['00:00', '05:00', '05:00', '05:00', '05:00']). Why not make an actual time series xAxis? This would give discrete x positions based upon the time and you could see that area chart a bit clearer.
Sample time-based xAxis:
$(function() {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
startOnTick: false,
type: 'datetime'
},
series: [{
name: 'John',
data: [0, 3, 4, 7, 2],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}]
});
});
What I mean "stylistically" is that you have hard breaks from "00:00" to "05:00". So let's assume that is 5 hours between categories. Does an area plot really convey any information to the user since you have a 5 hour gap between points? Wouldn't a simply column chart make more sense here? If this is even 5 minutes between categories it seems a little iffy to make this an area chart.
I am a bit confused by the documentation regarding the notation for point values when it comes to 3+ value charts such as HeatMap and BoxPlot.
I see that point values can be supplied as n length arrays:
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080]...
]
And that they can be config objects with additional/custom properties:
data: [{
name: 'Point 1',
color: '#00FF00',
x: 1,
y: 3
}, {
name: 'Point 2',
color: '#FF00FF',
x: 2,
y: 5
}]
But how does one use the config object notation for HeatMap/BoxPlot when the only documented value properties seem to be 'x' and 'y'?
Is there a supported property of the config object that will be interpreted as the n length array? Something like this?
data: [{
name: 'Point 1',
color: '#00FF00',
values: [1,2,3]
}, {
name: 'Point 2',
color: '#FF00FF',
values: [4,5,6]
}]
It depends on the type of chart.
For HeatMap (reference):
A heat map has an X and Y axis like any cartesian series. The point definitions however, take three values, x, y as well as value, which serves as the value for color coding the point. These values can also be given as an array of three numbers.
In other words you could do { x: 0, y: 1, value: 10 } or [0,1,10].
For BoxPlot (reference):
Each point in a box plot has five values: low, q1, median, q3 and high. Highcharts recognizes three ways of defining a point:
Object literal. The X value is optional.
{ x: Date.UTC(2013, 1, 7), low: 0, q1: 1, median: 2, q3: 3, high: 4 }
Array of 5 values. The X value is inferred.
[0, 1, 2, 3, 4]
Array of 6 values. The X value is the first position.
[Date.UTC(2013, 1, 7), 0, 1, 2, 3, 4]
Highcharts does a great job figuring out appropriate tick intervals.
However, I have a "duration" series (in ms), which I format e.g. like "3y 6M" or "1d 3h" or "3h 30min" for display. Because Highcharts is optimizing the tick intervals for the ms value (e.g. 10,000,000ms), I end up with awkward values such as [ 2h 46min 40s, 5h 33min 20s, 8h 20min ] rather than [ 3h, 6h, 9h ].
Can I get Highcharts to prefer multiples of certain values (e.g. 1000, 60 * 1000, 60 * 60 * 1000 etc)? I'd rather not have to calculate the exact tick interval myself (depends on chart size etc).
I think you should consider using datetime axis for yAxis. For example: http://jsfiddle.net/jRGvs/
yAxis: {
type: 'datetime'
},
series: [{
type: 'column',
name: 'Column',
data: [Date.UTC(1970, 0, 1, 2, 30),
Date.UTC(1970, 0, 1, 1, 45),
Date.UTC(1970, 0, 1, 4, 10),
Date.UTC(1970, 0, 1, 3, 30)]
}]
you can go with label > formatter for yAxis,
here you can write a routine which will handle the text/value to be displayed beside the grid line. but the thing is you cannot override the tick interval from here.
In the below demo link, if user clicks on series or legend [Jane or John] the values or graph dynamic sets the y axis values based on the series input.
Is there a way to set a static or equal set of values on either side of threshold? [7.5,5,2.5,0-2.5,-5,-7.5]??? which remains constant?
Example from highcharts demo section
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
You need to set min/max values on the Y-axis, like bellow
yAxis: {
min: -7.5,
max: 7.5
}
Or you can do let highcharts set the extremes, but set manually after
var chart = $('#container').highcharts({
...
}).highcharts();
var extremes = chart.yAxis[0].getExtremes();
chart.yAxis[0].setExtremes(extremes.min, extremes.max);