I am a Highcharts beginner currently working with legacy code. The project displays two line graphs in the same space, each with their own y-axis, with data points over a 24 hour period. One varies wildly between 1400 and 1600 and the other is either a 0 or a 1 over time.
For some reason, when we render the 1400 graph first and then the 0/1 graph, the 0/1 graph averages to 0.5 as soon as its value would have been a 1, then remains as 0.5 even when its value would have been a 0. Example:
When only the 0/1 graph is displayed or when it is the primary axis, there are no problems. Example:
Looking at related questions, we do have alignTicks set to false, a common solution. Please see screenshots for this behavior. Any suggestions on where the problem might be?
Related
In Vaadin 14.6.1, I tried to create a Vaadin heatmap foollowing the documentation / example from here.
However, I encountered a few problems/questions, listed in descending order of importance below:
The heatmap supported 30 rows by 30 columns; but when I tried 40 rows by 40 columns, the entire heatmap showed a single color (blue in my case).
Is it possible to manually set the minimum numeric value and maximum numeric value for the color scheme. This way, if I plot my data one day and it has values in the range of 0 to 1, but on another dataset from another day, the numeric values range from between 0 and 0.5, the color scheme range won't automatically change (to being between 0 and 0.5) and confuse the user.
In the documentation, it has the following methods listed, but they do not seem to exist in Vaadin 14.6.1
plotOptions.setBorderColor(SolidColor.WHITE);
plotOptions.setBorderWidth(2);
When I hover over the datapoints, is there a way that the tooltip can only show the numeric value (and not the x, y coordinate or the series name etc.?)
Is there any limit to the number of datapoints? I'm hoping that if #1 above is resolved that I can plot a 100 by 100 (ie 10,000) point heatmap.
If I plot 100by100, there will be many labels on the x and y axis. In my case, the x and y axis are actually numerical, so I did what the documentation suggested and just placed category labels in the xaxis and yaxis spots. However, is there any way to only display every "nth" label, so that the x-axis and y-axis is not so crowded? (This would essentially mimic what Vaadin does for normal line charts' xaxis and yaxis).
I'm not that experienced with Vaadin Chart, but these are the questions that I can comment on:
(1) With 40x40 items you go over the threshold of 1000 in which the Chart switches into "turbo" mode for performance reasons. This seems to not be compatible with the heatmap series. You can disable turbo mode by setting plotOptions.setTurboThreshold(0);
(2) Unfortunately the ColorAxis doesn't support this, it only has an API for min and max color. Definitely a valid use-case though, and it seems to be supported by the Highcharts library that the Vaadin Chart uses under the hood. You should consider opening a feature request for this in the Github repo.
(3) This seems to be a documentation issue. The methods are available in later Vaadin platform versions, but not in 14.6.
(5) In theory not, but in practice there will be a huge performance hit in the browser due to the excessive amount of DOM elements (quick test of 100x100 froze the browser for 10s). I'm afraid the component isn't really made for such extreme use-cases. In this case it might be better to utilize a low-level JS drawing library using the canvas, or draw an image on the server-side and display that in the browser. Maybe you can also consider modifying your use-case so that you only display one slice of your data and allow the user to switch between slices.
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 two axis in highcharts and I dont specify the range for either. Please see graph.
For some reason, series one from 201 to 206 is taking up the whole chart while series 2 which is only -2k to 2k is being squeezed to the bottom, thereby extending the range all the way to 30k which is totally unnecessary. I think highcharts by nature wants to not have any overlap but I want that. What I'd like is for the right series to be centered, in fact I want the right axis to be centered at 0 always and can grow unrestricted in either direction. I can't hardcode any of these since I have no idea what the values could be. So Series 1 on the left is ok, but I want the value 0 for series 2 to always start at the middle of the chart. Any way to achieve that?
Try to set alignTicks as false.
I have a series of data collected every 15 minutes for a few weeks. Unfortunately, there's a week of missing data in the middle. This is just a fact of my business. When I use Highcharts to chart this data, it compresses the x-axis (time), skewing the chart. For example, the x-axis has major ticks every 2 hours until the missing week. Then it jumps to major ticks of days.
Regardless of the data, I need the x-axis to remain consistent. If this causes a large gap in the diagram, so be it.
I have skimmed the documentation but found nothing. If anyone could direct me to the relevant page that would be great. Thanks!
Refer: https://stackoverflow.com/a/13439281/1566575
You will need to set the xAxis.ordinal property to false, this is true by default. True value indicates the points should be placed at fixed intervals w.r.t space (pixels), and False changes points to be placed at fixed intervals w.r.t. time
xAxis: {
ordinal: false
}
Linear x-axis | Highstock # jsFiddle
Docs:
http://api.highcharts.com/highstock#xAxis.ordinal
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.