I am using the highstock component to display stock history data that goes in the range of years. So what I require (if possible) is to set a max zoom range (the opposite of what minRange does) to limit the user to zoom out over several years...say to limit the zoom range to a maximum of one year.
Thanks in advance for your support.
Unfortunately there isn't any specific option for that. However, you can achieve that by using afterSetExtremes callback. In that callback you can compare event.min and event.max and set new extremes if timespan is bigger then your max.
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'm using the ios-charts library and I have a LineChart View that has x values that are dates from every weekday of this year. On the y-axis I have values between 0 and 25.
I would like to zoom in on different intervals on the LineChart View.
For example only show Data for week X one time and later change to show data for three months, etc etc.
I did not find anything in the documentation on how to do this. I used the "zoom" function with out any success.
(Example : Zoom and show the last 20 days on the x axis or zoom and show the last three months)
Has someone does this before?
It's a tough question and very advanced control. I guess you need to read carefully about the code, focusing on moveViewToX, and the logic and functions in ChartTransformer. Combining some tricks and calculations, you may find a way to fine-grainedly controll what you want to display.
Also, there is a property:
/// the maximum number of entried to which values will be drawn
internal var _maxVisibleValueCount = 100
may also help you.
I have some data that can have values in the range (0..100). Highcharts will sometimes label the axis from -10 to 110, which looks odd.
How can I prevent this? I can set a fixed min and max value for the axis, but if the current values happen to be between e.g. (50..60), I'd rather let Highcharts zoom in on the axis accordingly. Just don't want Highcharts to ever show anything outside of (0..100).
I could of course determine the appropriate min and max values myself every time I load data, but was hoping there would be some kind of minMin and maxMax setting?
So it looks like this isn't possible; opened a feature request.
Nowadays highcharts has floor and ceiling options for this use case.
The problem is that, if I try to change the lowest point to somewhere higher, the entire chart will be lowered severely.
How do I adjust each point with no above mentioned issue?
P.S. I use Highchart's Highstock.
It would be helpful if you could show a JsFiddle with the actual working code. Without knowing what exactly is going on with your chart it's difficult to figure out what the issue is and how to fix it.
Have a look at the yAxis - Highstock API Reference, you could potentially make use of min or max to counteract the scaling. Again though, without seeing your code it's tough to know.
If I understand your problem, you are trying to set the 7th point from currently at ~150 to something really high, say 5000? I did not notice any real change in the position of other points if the new value was under 1500 (or something around twice the first point)
Appears that your chart is set to comparison mode, hence, I believe, the default max and min are (100% & -100%) by default, this is w.r.t. to first point of the series. Highcharts would auto adjust these extremes if any of the points were to lie outside this range, you could force an override using yAxis.min & max.
For instance, you can set yAxis.min to -100 and yAxis.max to 100 like this
yAxis: {
min:-100,
max:100
}
Play around with the min and max to get to the values that suits your data the most, do remember these are % comparison to the first point. Any points outside these ranges would not show in the chart.
#jsFiddle
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.