I am new to Thingsboard.
Today I created a chart to see temperature from a few sensors.
The problem is, I can see a few vertical marks which are the same:
I.e. two pairs of 28, two pairs of 26, etc.
As to me, it is quite strange… Maybe, it was designed this way, and I simply don’t understand why…
This is caused by rounding: By default, the Y-Axis doesn't show decimal values.
In this example, I have 4 Values: 20.1, 19.7, 20, 20 which are all rounded to 20 in the Y-Axis:
If you change the number of decimals displayed in the settings, it works as expected:
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 have a line chart with a limited Y axis (1-5). There are six different lines represented on the chart (3 each from two different users: measuring feeling 1, feeling 2 and feeling 3 from 1-5).
When users enter the same value over time (for instance, ranking feelings 1 and 2 as 5 for several weeks), the two lines completely overlap and you can only see one.
Is there a way I can offset a particular line by say, a couple pixels up and to the right so if there are two different lines representing same values over time, I can see both at once?
Using pointPlacement it is possible to slightly offset each series, so points with the same values do not overlap each other. The tooltip will still work as if points would overlap, so setting shared to true should help.
Example: https://jsfiddle.net/BlackLabel/3mhyojtd/1/
Another option that will allow not shared tooltip would be to use scatter type series with lineWidth set to 2, to imitate line type series.
Example with scatter series: https://jsfiddle.net/BlackLabel/r6pL4f2j/
My xAxis is displaying the years with decimals depending on the width of the screen, so if its small it will display(2012,2013,2014...) but when I increase the width of the screen it will display (2012, 2012.1, 2012.2, 2012.3 ...) and the decimal places change depending of the width(2012, 2012.5, 2013 ...)
I know that tickPixelInterval has some effect on that but I don't know what value to use, I`ve tried:
xAxis: {
tickPixelInterval: 100, //also tried 10 and 1 and 1000 even null
crosshair: true
}
What can I do so the chart only displays the whole number of the years (2012, 2013, 2014) not depending on the screen size and NOT giving an specific width to the div that renders the chart?
http://jsfiddle.net/antonioj1015/ff2m2bsx/7/
tickPixelInterval will give a setting of how far apart ticks should be - that won't help in your situation, and will in fact make sure the problem persists.
What you want is just tickInterval, and set it to 1, since your year numbers are in increments of 1:
http://jsfiddle.net/ff2m2bsx/8/
if you won't always have increments of 1, another option is the allowDecimals property:
http://jsfiddle.net/ff2m2bsx/9/
References:
http://api.highcharts.com/highcharts#xAxis.tickInterval
http://api.highcharts.com/highcharts#xAxis.allowDecimals
A 3rd option is using a datetime x axis type, and setting the dates as your x axis values, and setting your tickInterval to one year.
http://api.highcharts.com/highcharts#xAxis.type
Introduction
I am using the TChart component and am finding the options rather confusing and hard to find what I need.
The Left Axis of the chart has a minimum of 0 and a maximum of 5000, the Bottom Axis has a minimum of 0 and a maximum of 52 (weeks in a year).
In my chart I have 2 series that are populated based on values from a record I have created which can be edited at runtime, everything is working good so far.
Problem
Take a look at the below image of part of the chart filled with some random values:
I am not sure if such an option exists or not, but notice from week 4 onwards where no values have been added there is a solid red line.
I don't want the chart to plot values that are less than 0, so in this example from week 4 onwards there should be no more lines (I can confirm that from week 4 onwards I have the values set at -1)
Week 1 to 4 does not show this bottom red line, obviously because the values are greater than 0 and are therefore plotted above the line, but this should make my problem a bit more clearer.
So, how do I prevent the chart from plotting / drawing values that are less than 0, importantly for the Bottom Axis of the chart?
I am sure there must be a simple option somewhere, I just cannot find it if there is one as I am not too familiar with the TChart Component.
You have the possibility when adding values to a series to add them as null.
This will prevent them from showing.
Ken is correct saying that a tricky situation is to handle a single value surrounded by null values.
Picking another series type than FastLine and show dots as well as lines might work better.
For a FastLine series to show gaps, set:
Series1.IgnoreNulls := False;
And to discriminate values below zero:
if (y < 0) then
Series1.AddNullXY(x, y, '')
else
Series1.AddXY(x, y, '');
if y < 0 then
LineSeries1.AddXY(x, y, '', clNone)
else
LineSeries1.AddXY(x, y, '', clRed);
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.