Hi I used high stock chart for showing data in time series format. I received data every 5 minutes, for X-axis I set timestamp which I received on every 5 minutes. but in case some data not coming from 5 minutes then I want to display that line in red or blank below I tried
JsFiddle link
In this demo data come at 10:25 and after 10:35 so in between I want to shows red line or blank space. Following images shows expected output
Or
I think the issue here is how is highcharts supposed to know that there is no data at 10:30? Your data timestamp intervals are not identical (meaning they don't occur every 5 minutes).
What you could do is put a watcher function in place that gets the data first. Inside of this put a timer that if 5 minutes go by without any data being retrieved, send out a data point like [<the time stamp>, null]. Now, you will also need to a property to not link null points called connectNulls. This is false by default so your 2nd option above is satisfied (see this fiddle).
For option 1 (the red line) you would need to create a new series containing the previous point and the next point surrounding your no-data point and set its series color to red. The drawback here is that if you have many cases with data gaps you will be creating many 2 point series. An example series to add would be:
{
color: 'red',
showInLegend: false,
data: [
[1415787839488, 0.5590000152587891],
[1415788494848, 0.5139999985694885]
]
}
And an example fiddle.
Related
I want to use the Highcharts StockChart library to make a chart. Here's more info on the chart I need to create:
The type of the chart is datetime
The data is being updated on every minute (it's data from stocks), so the chart is being constantly updated.
The data of the chart is from 9:00am to 11:40am and then from 12:35pm to 3:00pm (there's a lunch break).
The data is being shown with bars in an interval of 5 minutes (data is received for every 5 minutes except for the lunch break).
The bars will start to be drawn from left to right as the data is received.
The bars width needs to be the same size regardless of how many data is being shown on the chart.
The labels of x axis of the chart need to be always the same and on the same position (from 9:00am to 3:00pm every hour) even when there's missing data (a line must be drawn on the x axis).
So, I'm using the max property set to that day at 3:00pm on the x axis of the chart. With this, I can:
Have the bars width to be the same
Have the x axis be drawn regardless of the missing data on the same interval (until 3pm).
Everything works ok until the lunch break (11:40am). However, when receiving data for 12:35pm (after lunch break), the chart will ignore the max property and the last line of the x axis that is drawn is until 1pm (this line needs to be drawn until 3pm). I assume that this is because until 11:40am all the data for 5 minutes is present, so the chart understands the interval on which the data needs to be drawn and also can draw the x axis lines on the same interval. But as soon as there's a gap on the data, the chart doesn't know anymore if data will keep coming in an interval of 5 minutes, so will just take into consideration all the data that has received until now, ignoring the max property.
I have tried different options in order to solve the issue:
I used ordinal property set to false. With this, I can solve the issue of the missing x axis labels until 3pm, but the issue is that the lunch break will have a gap on the chart. I need to merge the lunch break and having the x axis labels drawn until 3pm.
I tried to use the tickInterval property and was able to set the interval of the x axis but only for the data that is being drawn. However, the x axis label it still until 1pm and needs to be until 3pm.
I tried to use the breaks property for the lunch break while using the ordinal property set to false but didn't work. Also, the chart needs to be merged on the lunch break; using this property will create a gap on purpose, so this property won't help me to fix this issue.
So, I noticed that the interval is being changed correctly where there's data, but the lines are not being drawn where there's no data on the x axis (only until 1pm and not until 3pm). And if I use the ordinal property, it will show all the x axis lines for the missing data, but need to hide the gap for the lunch break.
Any help with this is appreciated =)
UPDATE:
I noticed that when there's still no data, if using v1.3.1 of highcharts (the one I'm currently using), the x axis lines are being drawn correctly until 3pm, but if using the latest version this doesn't happen. It seems that the max property is being ignored for the latest version.
Including the links of jsfiddle for my code on the comments (since stackoverflow doesn't allow me to post many links because don't have enough reputation).
I was able to achieve what I wanted. In the end what I did was to create null data to fill this gap for the lunch break. Also, I created null data for the remaining data until 3pm, that way the x axis lines were drawn properly: https://jsfiddle.net/K4Cj6/201/:
[1504528800000,null,null,null,null]
Thanks anyway guys =)
I have a live graph that updates every x time. Included below is an image using a dummy variable. What I would like is for Highcharts to only label the first, middle, and last. Or anything to where I don't spam my graph label with ticks.
Presently my xAxis looks like so:
xAxis: {
crosshair: true,
type: "categories",
categories: xaxis
},
Nothing out of the ordinary. I have tried adding a tickInterval, however, that does not really solve the issue over the long run. Essentially what I need is the opposite of a tickInterval, where ticks are removed after a certain interval. Not unlike the datetime API that highcharts currently has. The difference here is that this data cannot be generated by myself, but by an API that I am using, which spits out the as-shown x-axis label.
After a while, in case there is too much xAxis labels displayed on a chart, the number of them is automatically reduced (the first example). Although, if you want, you can use couple of solutions. The best way, would be to use tickPositioner to display only the first, the middle and the last labels and format them using Highcharts.dateFormat inside xAxis.labels.formatter (the second example). You could also set bigger step of xAxis.labels (the third example).
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickPositioner
http://api.highcharts.com/highcharts/Highcharts.dateFormat
http://api.highcharts.com/highcharts/xAxis.labels.step
Example:
http://jsfiddle.net/vxjdwer7/ - default behaviour
http://jsfiddle.net/30t45zvq/ - using tickPositioner
http://jsfiddle.net/6g9uvokL/ - using step
Up until now, my highcharts was working fine. I have about 7,300 data points and new data is added once every hour.
Before, when I first loaded the highchart, it loaded and displayed all of the data normally (each point was 1 hour apart).
Today, I noticed that it only displays a point until it's 12 hours apart unless you zoom in. Is there a setting in highcharts that filters how many points can be shown or something?
I have a 'datetime' chart which has one point per day. So my requirement is to have each date displayed on x-axis and value plotted for each date. So I have set the tickinterval as 1 day (24*3600*1000) as follows:
http://jsfiddle.net/vuf5e/1/
However, the x-axis seems to show only Aug28th and chart has two points on either side of it instead of showing one point for Aug27th and another one for Aug28th.
I tried using tickPositions and the chart appears as follows:
http://jsfiddle.net/vuf5e/2/
What is wrong here?
One of the numbers is wrong.
the second position in the tick is 137766608975 but then in the data is 1377666808975 which has a full digit more than the other.
You are in fact missing an 8 somewhere in the middle.
so basically the number on the second tick become smaller than the first one.
[...]
xAxis: {
type:'datetime' , tickPositions:[1377601929269, **137766608975**]
},
series:[{"yAxis":0,"name":"Device_INTERFACE_in_octets--.2","data":[[1377601929269,5.8583],[**1377666808975**,6.6278]]}]
});
});
I am using a Highcharts Stock graph to show a percentage with respect to time.
http://jsfiddle.net/michaelchart/yYmPR/1/
At certain zoom levels (in this case, when zooming to a timespan of between about 6 and 12 years) the plot strangely turns from a line to sporadic points.
Any ideas as to why this might be? Or is it a bug with Highstock?
You can see an example of a working Highstock graph here http://www.highcharts.com/stock/demo/basic-line.
After posting on the Highstock forum and consequently having an issue posted on github, I found that it was because of the default value of the gapSize option. According to the docs;
gapSize : Number
Defines when to display a gap in the graph. A gap size of 5 means that if the distance between two points is greater than five times that of the two closest points, the graph will be broken.
In practice, this option is most often used to visualize gaps in time series. In a stock chart, intraday data is available for daytime hours, while gaps will appear in nights and weekends.
Defaults to 5.
Setting gapSize to null fixes the problem.
In my particular case, the reason of this problem was bad data output.
Within "series" property, within the "data" array there was a "false" value.
Example:
series : {
"type":"column",
"name":"Test",
"data":[541,784,false,251,353]
}
Corrected the problem in the backend so "false" was interpreted as 0, and everything works now.