Is it possible to have a step line with gaps? I'm talking about the square wave kind of line (step line) that would have gaps?
This kind of line (at least in my case) is drawn from such a dataset that has the start time and the new value (level) as one data point. For example can I set NULL to be a level to achieve gaps in the line?
Yes, it's possible. Just add null point when you need a gap. Just like this: http://jsfiddle.net/mCLpr/
series: [{
data: [1,2,3,4,null,6,7,null,9],
step: 'right',
name: 'Right'
}]
Related
If I change the y-axis type to logarithmic on the meteogram example of the highcharts demo, the temperature line stops being visible. Is this a bug or is there something in the code preventing it from displaying when in logarithmic mode?
The only change I made to the demo was to add type: 'logarithmic' on line 492:
yAxis: [{ // temperature axis
type: 'logarithmic',
See this jsFiddle.
Any ideas? Thanks!
It seems like this is a (solvable and unknown?) bug indeed.
Somehow a logarithmic y-axis is not compatible with a negativeColor attribute.
Go to line 594 of your meteogram example and remove the negativeColor: '#48AFE8' attribute:
592| zIndex: 1,
593| color: '#FF3333',
594| negativeColor: '#48AFE8' << remove this line
Now the logarithmic plot will work as expected. See DEMO.
I have also set the y-axis min, max properties and both startOnTick and endOnTick to false to make the graph look a bit better. I hope this helps you out :)
Update 1: This bug has now been reported to GitHub
Update 2: Highcharts developers have solved this bug as of June 3, 2015 in commit fde07c2
I am trying to set my X and Y axes to have set minimums, maximums and intervals. Easy enough according to the docs - and indeed I have had no problem working with Highcharts to date - in fact the complete opposite, it's an awesome, awesome tool. However, when I add errors bars to my line series', it seems to knock out the x-axis - http://jsfiddle.net/Su44W/
Simply changing to series' type to arearange (http://jsfiddle.net/46dsn/1), providing the same data points [x, low, high], the chart now respects my min, max and tickInterval on the x-axis. So this begs the question, is this a bug or and I doing something wrong?
From my understanding the errorbar causes the axis to consider itself part of a "column-like chart". That is, the points on the axis have a span. The result of this is that this piece of code is ran to prevent more ticks than there are points (found on line 7194 of the source):
// In column-like charts, don't cramp in more ticks than there are points (#1943)
if (axis.pointRange) {
axis.tickInterval = mathMax(axis.pointRange, axis.tickInterval);
}
I'm not exactly sure how this solves the problem, but in some way setting the pointRange of the errorbar series causes the axis to use that pointRange for the axis as well. I'm guessing it just uses the maximum point range of all series, or something similar. This means your specified tickInterval will be the "max" in the above mathMax-function. Like this:
{
name: 'Series 1 error bars',
data: [
[4,7.26,7.34],
[12,6.85,7.06],
[26,6.92,7.12]
],
linkedTo: ':previous',
color: "#013879",
zIndex: 0,
whiskerLength: 7,
type: 'errorbar',
pointRange: 0
}
Check this JSFiddle link for pointRange in action.
The negative effect that this will have is that the top and bottom line for your errorbars will have very short width. You can counter this by specifying a pointWidth for the series as well, as in this JSFiddle demonstration.
I have a series of points that has fast changing values, which makes it very spiky and uneasy to read when zooming out.
I would like to know if there is a way to draw above the already existing series, another one that would represent the average of, for exemple: every 10 points, or every point in a minute?
I've looked into dataGrouping but can't seem to make it work, is that what I'm looking for ?
Thanks for reading.
There is no current built-in method to do this. You would need to create a second series that is the running average and add it to the chart.
The main issue here is that HS has dataGrouping enabled by default for all series. So, when you add your second series that has dataGrouping enabled with params you want - it is also applied to the initial series. You only see one series on the chart because the 2 series are identical and overlap each other.
To fix this set dataGrouping off in the "real" series. Then have dataGrouping on in the averaged series. See this example.
...
series: [{
name: 'MSFT',
data: MSFT,
dataGrouping: {
enabled: false
}
}]
...
Simplifying my story, consider 2 series where I link their yAxes. In other words on the second yAxis there is a property linkedTo: 0
So the first yAxis is the master, hence sets extremes for both series.
However sometimes the second series has high values which are too high to be plotted in the visible area and so they get cropped.
To make matters worse, when the yAxes are linked to each other, the legend doesn't play ball: clicking on the master series name in the legend will hide both series. Clicking on the secondary series name will hide none.
Check out this JSFiddle - values on the right are cropped, legend functionality is broken.
What am I missing? How can I get both series to scale together and be all visible? How do I get the legend to work as expected? (click on series name should toggle it)
Thanks!
EDIT: As it turns out, if I remove yAxis.id (JSFiddle here) the chart and legend work as expected. However linking series to yAxis based on position in the array (I think?) instead of by some ID (string) sounds less than ideal.
Ideas?
Why you are trying assigning second series to axis which is just copy of proper one? I advice to set both series to master yAxis, and second yAxis use just as extra info on the right side of a chart.
Otherwise I don't understand the purpose of linking second axis to get THE SAME extremes as master yAxis, and then expecting to scale that yAxis according to series you have attached to that yAxis.
Something like this I think is better approach, see: http://jsfiddle.net/zYpcm/15/
series: [{
name: 'master',
data: self.masterData,
yAxis: 'master'
}, {
name: 'secondary',
data: self.secondaryData,
//yAxis: 'secondary'
}],
yAxis: [{
id: 'master'
}, {
id: 'secondary',
opposite: true,
linkedTo: 0
}]
I need to add a new series to this chart which will allow me to highlight / shade a particular range of dates. It needs to be 100% height of the chart.
I was looking at using another area series, but I couldn't get it working as I wanted it given I have two existing area series on this chart.
I thought another series which had a 1 or 0 for the particular point to indicate if it should be highlighted or not?
{name: 'mydates',
color:'red',
fillOpacity: 0.3,
data: [0, 0, 0,1,1,1,1, 1, 1,1,0,0],
type:'area',
stacking: 'percent'
},
http://jsfiddle.net/L3ynM/
The problem with my sample:
The 'mydates' series doesn't take 100% height of the chart
If the 'mydates' series begins midchart, it starts with an angle. I'd like it to go straight up
Unless you really need the legend entry, I would recommend using plotBands instead
http://api.highcharts.com/highcharts#xAxis.plotBands
You can also do it like this, if you do really need the legend:
http://jsfiddle.net/jlbriggs/JVNjs/305/
data:[[1.5,0],[1.5,80],[2.25,80],[2.25,0]]
It relies in part on setting a min and max, and using those min and max values as your y data points.