Highchart - ThingSpeak - IoT - issues with graphs (axes) - graph

I use Highcharts for my ThingSpeak IoT project.
All is fine except these things, which just makes me angry (I cannot find a solution on my own... I have been trying with my frind Google for last 3 days without any success).
Here is my project page: http://net.cekuj.net/
There are my issues:
1) I cannot see the most top number next to the Y axes (I can see only the tick, not the number - if you check browser console, it is there but it has wrong X and Y coordinates)
2) I cannot align "tick mark" for all Y axes according to the manual - I would like to align them "on" mark, but now there are still "between"... and yes I use added a var for this :(
3) I would like to use decimalplace setting independently for every series of data - for example - Temperature will have 1 decimal place, humidex will have 0 decimal place etc. is that possible?
4) I added major ticks, but no succes with adding minor ticks :(
I would be really happy if any of these 4 issues would be solved, thank you for your help and time!
EDIT:
Also autorefresh is not working, but it seems to be because of wrong URL pattern, will be fixed later :)

Try to set the yAxis.showLastLabel options to true
Demo: https://jsfiddle.net/BlackLabel/hqv97ws0/
yAxis: {
showLastLabel: true,
},
API: https://api.highcharts.com/highstock/yAxis.showLastLabel
You can set how many decimal values should be shown in the tooltip for each series:
API: https://api.highcharts.com/highcharts/series.line.tooltip.valueDecimals
I don't understand here - could you reproduce this issue as a really simple chart with sample data? You can use the above demo.
That's weird, ticks should be applied with setting the yAxis.minorTicks to true. Could you reproduce this issue also?
Demo: https://jsfiddle.net/BlackLabel/dLy6x59q/

Related

How to zoom in the Y-Axis in a line chart using kibana 7.12/7.16

I'm working on an application that get values from different cryptocurrency exchanges and I'm trying to plot that values on Kibana (V 7.12.1) to visually compare the oscillations, everything is working fine (I think), the main application is getting the values from the exchanges and sending to ElasticSearch (V 7.12.1) and I can see the values on Kibana/Discover. I don't have much experience on ElasticSearch/Kibana.
So, in Kibana, I created a new dashboard with a Lens panel, I added the DateTime field to X-axis, ask price and bid price to Y-axis and the exchange name as a break down. The plot looks nice as you can see:
The problem is, at this moment, the values are between 42940 and 43080, a very small difference comparing to the total size of the Y-axis and I can not adjust the Y-axis to get a small window to only see the values of interest.
I don't need different scales to each line, in really it must be the same scale. And values will change over the time, so, the value window will change in size too.
Thanks in advance.
Update:
I did all the same tests on ElasticSearch 7.16.3 and Kibana 7.16.3 and I got exact the same results.
Finally I found it.
There is an Up-Down button to set up the Y-axis, clicking on that button we get the window "Left axis". In that window, the field "Bounds" does this adjust.
Full: to see all the graph;
Data bounds: to automatically adjust the zoom;
Custom: to insert your own limits;

resourceDayGrid with vertical days headers

I'm using resourceDayGrid for recreation functionality of grid previously used:
previous grid.
In resourceDayGrid - day headers are displayed under resources (as columns):
current resourceDayGrid
Is there any property/configuration changing day header display position to vertical (rows)?
No there isn't.
The closest you could get to your original grid is the timeline view which splits the dates/times and the resources onto separate axes, but it's always arranged so that resources are on the Y axis and times/dates on the X axis - i.e. the reverse of your previous arrangement. But the effect is similar.
There is a demo here showing the day/week/month versions of the timeline so you can get a idea how it looks. There are some things you can configure, but flipping the axes isn't one of them unfortunately.
You could check if anyone has requested this feature in fullCalendar, and vote for it, or request it yourself - see here for details.

How to set minimum for Jenkins Plot Plugin

I use Jenkins and its Plot Plugin to generate statistics.
Example:
For every Build I plot the line of codes. Lets say I have like 500.000 lines and it changes about +-100 lines per build.
Since the plot y-axis always starts with 0 the whole plot is meaningless. It looks like 1 straight line.
Same goes for other metrics, if the value is too high.
Question: is there any configuration to set minimum y-axes to the minimum value?
Unfortunately, I think the answer to your question is currently 'no'.
First of all, the documentation does not give any hints towards such an option.
Secondly, Given that the Jenkins Plot Plugin uses JFreeChart for the plotting, the setting of a range for the Y-axis should be done using the 'getRangeAxis' function. A search in the source-code does not reveal a call to this function.
Lastly, you do not seem to be the only one that has this problem. Issue JENKINS-2841 asks for the same functionality, but appears not be solved yet.

Why does the NVD3 StreamGraph shift the y zero axis over time?

Link to sample image with tilting graph:
Link to NVD3 Streamgraph page:
The nvd3 streamgraph will descend or ascend sharply over time. I searched SO and the NVD3 documentation but didn't find a variable that controls where the zero of the y axis is at each point in time. Nor have I found discussions of this. In other words what makes the whole graph tilt in one direction or the other and how to control or turnoff this tilt.
I read a bit of the initial paper on streamgraphs by Byron but couldn't figure it out and thought I'd ask here.
Could someone please point me towards documentation on this or otherwise provide insight?
The NVD3 code for the stacked area chart accepts four possibilities for the chart style: stack, stream, stream-center, and expand. The default stream graph is the "stream" style, and this is the version that gets off-centre if you have any zero values in your data.
If you set the style explicitly to "stream-center", the chart behaves as expected. However, the radio buttons that switch between display styles switch back to the problematic algorithm, so they will need to be disabled.
chart.style('stream-center')
.showControls(false);
It's possible that the existence of this other display algorithm means that the NVD3 folks are working on it. The github issue page might be a good place to look for updates or responses from them:
https://github.com/novus/nvd3/issues/416

FLEX: Make LineChart DATATIP constrain to vertical axis

When making a line chart, Lets say its for business sales for different depts and horizontally is days and vertically is dollars. When you hover over a line it tells a dataTip tells you the sales for that dept. on that day. I want it to show all the depts at the same time, so say you hover over day 3, I want the dataTips for all depts on day 3 to display so you can compare the values for all the sales on the same day. I set the mouseSensitivity for the dataTips to display all the lines at once but I end up getting day 2 for one dept and day 3 for another which is not wanted. This is actually posted as a bug and explained better here: http://bugs.adobe.com/jira/browse/FLEXDMV-1853
I am wondering if anyone can come up with a work-around for this?
Thanks!
I ran into a similar problem to this recently and came up with a solution that also applies to your problem. I had a step LineChart and wanted to display a data tip when the user hovered anywhere on the line instead of just at defined data points.
You can read about the solution I wrote for that problem here: Flex: Customizing data tip location and behavior in a LineChart
You'll have to modify my solution slightly to fit your problem:
On line 47 you can remove the Math.abs(last.y - mouseLoc.y) < 50 check. This constrains the data tips to lines that are within 50 pixels vertically of the mouse.
I'm assuming that you're using the default segment line chart which just draws lines directly between data points. You'll need to modify the code that calculates the line value at a given x-coordinate to work with that chart type. I already find the closest data point to the left of the mouse with lines 33-41 and store it in last. Just get the next data point (which will be the one closest to the right of the mouse) and use something like this to get the value at the mouse:
var slope:Number = (nextPoint.y - last.y) / (nextPoint.x - last.x);
var lineYAtMouse:Number = (slope * (last.x - mouseLoc.x)) + last.y;
var lineValue:Array = line.localToData(new Point(mouseLoc.x, lineYAtMouse));
Then replace lines 69 through 72 with:
hitPoint.x = mouseLoc.x;
hitPoint.y = lineYAtMouse;
hitPoint.xValue = lineValue[0];
hitPoint.yValue = lineValue[1];
I haven't tested these modifications so there could be a bug or 2 but the general idea is there. I hope maybe this is still useful to someone. This question is getting pretty old. :)
Not an answer, but a poor alternative:
You could create your own DataTip renderer that [ahem] mapped the location of every point and drew the tip for each one there.
Basically, you would be duplicating a lot of the code inside the charting classes.
I have the same problem but working on column charts. Was thinking that I could enable the vertical gridLines using backgroundElements and then add a chart event listener for mouse over (which fires when mouse passes over a vertical gridline). Using the localX value, i could compare it to the closest datapoint, maybe.
Brian

Resources