Trying to plot like [{x:0,y:0},{x:1,y:1},{x:null, y:null}, {x:3,y:1},{x:null, y:null}, {x:5,y:2}]
jsfiddle link: [http://jsfiddle.net/rayholland/HSvBj/4/][1]
and I want to make data point invisible on line segments but visible on isolated data point.
In another word, I want to draw the following graph but with exactly one series Link to image
You have two options:
use two series, but link them (linkedTo option) to get just one legend item: http://jsfiddle.net/HSvBj/30/
use null points, but set x value, when x=null then where should be that point inserted? I don't know, so for a library it's even harder ;) See: http://jsfiddle.net/HSvBj/31/
You can't have a null x value - the chart can't possibly know what x = null means, or what to do with it.
1) For the points that you want to have null values, you need to provide the appropriate x value
2) For the points that you want to have a marker, you need to signify that in your data array
So, in your plotOptions, disable markers, and in your data array, turn them on point by point:
plotOptions : {
series : {
marker: {
enabled : false
}
}
}
And then:
series: [{
data: [
[0,0],
[1,1],
[2,null],
{x:3,y:1, marker: {enabled: true}},
[4,null],
{x:5,y:2, marker: {enabled: true}}
]
}]
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/65/
Related
I have a sparkline chart of temperature sensor data,
Its a year of data sampled at every 1 min
I first load a blank chart, then I do a server call, bring the results back and display it by calling
getchart.addSeries({
name: thisGroup,
id: probeItem[0],
data: probeDataArray,
keys: ['x', 'y', 'specialId'],
there could be upto 20 series, and they all load on the screen one by one
This renders quite quickly, however I now need to add a label annotation where the temperature goes over a certain Value (i.e. in add a warning symbol when its alarm state)
Currently I'm looping through each point and seeing if its over a certain value:
currentSeries.points.forEach(function (point) {
However this is very slow.
I have an array of the alarms, and can reference them as
['x', 'y', 'specialId']
However I cannot see how I can add an annotation label by x,y or specialId.
I can only seem to add the label if i loop through all the points already rendered
Is there a way to add a label by using my Id's?
I also need to resize the graph and the labels to remain in the same place
Alternatively if this is not possible, is there anyway to add the labels as i'm adding the series?:
getchart.addSeries({
name: thisGroup,
id: CurrentGroupID,
dashStyle: 'ShortDot',
data: groupLogArray,
keys: ['x', 'y', 'specialId'],
showInNavigator: true, //this shows the series data in the small bottom navigator
point: {
events: {
click: function () {
//alert("test click");
}
}
}
});
You can add an annotation by x and y axis values:
chart.addAnnotation({
labels: [{
text: 'Alarm',
point: {
x: 2,
y: 3,
xAxis: 0,
yAxis: 0
}
}]
});
Live demo: http://jsfiddle.net/BlackLabel/k6trha3e/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#addAnnotation
As an alternative, you can also use data labels: http://jsfiddle.net/BlackLabel/n4586xzq/
To ease graph readability, I've turned markers off on my highstock spline chart (markers : enabled : false). I also wanted to broke the graph in case of irregular interval between data and so I have successfully set the gapSize to 1. However, this has the bad side of hidding single data that are not linked from one side or an other.
Here's an example (you'll easily see that some of the points are hidden) : http://jsfiddle.net/qosdc6hr
series: [{
marker:{
enabled:false
},
gapSize: 5,
[...]
}]
I want to have these single points drawn on the chart to make them visible at first glance. Is there a way to do it?
You can enable marker for a specific point like this:
data: [
{ x: Date.UTC(1970, 9, 27), y: 0, marker: { enabled: true }},
live example: http://jsfiddle.net/3eco7Lmz/
I have a boxplot with a scatter plot of the raw values drawn on top of it. I'd like to change the boxplot tooltip (when you mouse over) to display the total number of points in the scatter series.
tooltip: {
useHTML: true,
headFormat: '{point.key}',
pointFormat: 'Median: {point.median}'
}
point and series are for the boxplot, is there a way to reference another series like series[1] and how would you get the total. Or can I reference an array with the total values.
Similar to How to edit the tooltip text in a highcharts boxplot
this.series contains a reference to the chart object, which in turn has a reference to the chart.series array.
tooltip: {
formatter: function() {
var arrayOfSeries = this.series.chart.series;
console.log(arrayOfSeries); // doing something with all the series!
}
},
Fiddle here.
According to formatter, you can reference to the series object via this.series. So for the total number of points in the series, you can try
tooltip: {
formatter: function() {
return this.series.data.length;
}
},
It seems shared tooltip doesn't work on scatter, https://github.com/highslide-software/highcharts.com/issues/1431. So I don't know how to reference another series. Otherwise you can use this.points[i].series.
Is it possible to have multiple candlestick series on the same axis and have them grouped next to each other like columns? Right now,they render on top of each other if their y values are similar. I have tried the series options related to this( point padding, grouping ) and they do not work.
Yes, you can add the option "dataGrouping" to the series this way:
serie = {
type: 'candlestick',
name: 'test',
data: seriesdata,
dataGrouping: {
enabled: true
}
}
For further information, check this: http://api.highcharts.com/highstock#plotOptions.series.dataGrouping
Why does the following code change the y value on my line graph instead of the x value? (By changing the y value, I mean the line moves up or down, not side to side)
chart.series[0].data[0].update(x = xMin);
The series was originally loaded with the following setup
series: [{
type: 'line',
name: 'Regression Line',
data: [[0, 1.11], [5, 4.51]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}]
update ([Mixed options], [Boolean redraw], [Mixed animation])
Update the point with new values.
Parameters
options: Number|Array|Object
The point options. If options is a single number, the point will be given that number as the y value.If it is an array, it will be interpreted as x and y values respectively. If it is an object, advanced options as outlined under series.data are applied.
redraw: Boolean
Defaults to true. Whether to redraw the chart after the point is updated.If doing more operations on the chart, it is a good idea to set redraw to false and call chart.redraw() after.
animation: Mixed
Defaults to true. When true, the update will be animated with default animationoptions. The animation can also be a configuration object with properties durationand easing.
Source
So, change to the following:
chart.series[0].data[0].update({x: 3});
Demo