I have a scenario where a point does not render in zoomed-in mode. Wondering if it's a highchart bug or something I can do.
JSFiddle is here -- try zooming on the first point of series B (y value of 99.297). The chart zooms in but it seems like the focus is not in the right place
http://jsfiddle.net/HqMye/
Scatter chart with xy zoom; x axis is type datetime; series rendered in the scatterchart are as follows:
var zoomSeries = [{
name: "Series A",
data: [
[Date.parse("2013-05-16T11:01:25-04:00"), 99.75],
[Date.parse("2013-05-14T10:18:41-04:00"), 99.5]
]
}, {
name: "Series B",
data: [
[Date.parse("2013-05-16T10:58:34-04:00"), 99.489],
[Date.parse("2013-05-14T10:13:32-04:00"), 99.297]
]
}];
Your data should be sorted ascending by x.
Not sure if it is Highcharts bug.
You can fix this by adding min to yAxis. http://jsfiddle.net/yevkim/ujj2f/
for example:
yAxis: {
min:99.2
}
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/
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/
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
I am currently experimenting with the Highcharts charting library, and am totally blown away by its capabilities.
Something I am trying to accomplish is to add a permanent, draggable 'selection' box (or mask) to my chart. This selection box will always be a certain fixed width. For example, say my chart has 30 days worth of data, I would like there to be a draggable box with the width of 1 day. Dragging the box up and down the x-axis (over the actual chart data) will fire off other application events using the selected day as a parameter.
I guess I am looking for something very similar to the navigator in Highstock charts - but again the primary difference is keeping a fixed width selection. Any tips or suggestions would be greatly appreciated.
In Highcharts there is no such built-in feature but in Highstock you can also use only scrollbar, see: http://jsfiddle.net/ea7za/ Now you can use or bottom scrollbar or panning (drag on plotting area).
$.getJSON('url.json', function(data) {
var min = data[0][0], // min
max = data[500][0]; // max - e.g. max = min + 24 * 3600 * 1000; as one day
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
navigator: {
enabled: false
},
xAxis: {
min: min,
max: max
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
I am using highcharts to perform sensor graphing for basic temperatures, or things of that nature. The issue is I have the current default view set at 3 days, but at that view it distorts the y axis data values.
For example, if the majority of the data is 1.5 but there is a value of 10 also, in the three day view the y axis is only showing a range up to 3 or 4. It shows the spike in the actual line graph however when you hover over the point the value is 3 or 4 instead of 10. However, if I shrink the view to 2 hours, the data gets displayed properly and the value then returns to 10 and the y axis accomodates the 10 value.
Also I am having issues with the data being rounded down constantly it seems, since the values should be a steady 1.5 it is constantly being rounded down to 1.
Any help will be appreciated and I will be around the computer all day to answer any questions that someone might have about this issue.
$.getJSON('mkjson.php?device=<?echo $device_name;?>&sensor=<?echo $sensor_name;?>&pin=<?echo $pin;?>&user=<?echo $_SESSION['user'];?>', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container',
zoomType: 'x'
},
rangeSelector : {
selected : 1
},
title : {
text : 'Device:<?echo $device_name;?>'
},
subtitle : {
text : 'Sensor:<?echo $sensor_name;?>'
},
xAxis : {
minRange: 600 * 1000 // one hour
},
yAxis : {
title : {
text : '<?echo $unit;?>'
}
},
rangeSelector : {
buttons : [{
type : 'minute',
count : 10,
text : '10m'
}, {
type : 'hour',
count : 1,
text : '1H'
}, {
type : 'day',
count : 1,
text : '1D'
},
{
type : 'day',
count : 3,
text : '3D'
}],
selected : 3,
inputEnabled : false
},
series : [{
name : 'Voltage',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
This is the example of how the data is skewed. The high points to the right are 10, and 13 yet they show up at only 3.
Have a look at dataGrouping as it lets you determine how to group or to have it off completely. It defaults to enabled.
Have you tried to use numberFormat() http://api.highcharts.com/highstock#highcharts.numberFormat()
I've been burned by the auto-rounding; the chart does some sort of value rounding for its internal representation of points.
I only have a workaround - I got around it by storing the data points in a separate array and referencing THAT in the tooltip function.
As of note, if you're using column data and don't turn data grouping off, the chart will round your X values too.