I am plotting graphs for a monitoring system that shows modem signal levels over time.
As the values remain constant over longer periods of time, this system only logs changes.
In short this means: As long as you do not encounter a new data-point, the previous value is active.
In my graph I would like to use connecting lines for a better visualisation.
Unfortunately the way Highcharts renders this is by simply connecting the points.
This is wrong as it insinuates the value changed over time.
The only correct way is to show instant changes (90ยบ lines).
For example: see the red line I (partially) drew in my image. The blue line is what is rendered with the default line type.
Is there any way I can accomplish this?
Have you tried to use step parameter.
Related
I'm working on replacing a dynamic chart implemented in highcharts. The current implementation is a line-area chart that expands over time with incoming streaming data, so the replacement needs to be dynamically alterable, and preferrably animated.
Currently I'm looking at D3 for the replacement. There are a few examples I've found which show that there may be something similar which is possible, such as the charts for streaming data found here, but in this example the line is redrawn at every iteration. It's not terribly inefficient as the visualization is limited to a fixed window of data, but in my case a high volume of data needs to be displayed from start to finish as the data streams in. Redrawing the chart at every addition will likely result in rapid performance loss.
In D3, is there a method of adding a single segment to an existing plot that does not require a redraw?
I ended up abandoning D3 as it required too much development to make it as presentable as an interactive chart that was ready out-of-the-box, but I did figure out how to do what I was thinking.
Instead of re-adding a new line with additional points at every iteration, I ended up using a path component which allows additional points to be added progressively. The path does have to be re-rendered and generates a short svg path string, so I'm not exactly sure which method is more efficient, but a short path string reduces complexity of the resulting html in the case that one were to add multiple lines to the plot, one for each segment.
If an addition to the path involves only the generation of a new string using concatenation of the original then I imagine this could be much more efficient than iterating through an array of series data that grows at every update.
The result was fast enough to keep up with streaming data without any visible slowing of the UI, but it was just unfortunate that I needed something a little more developed.
Because of the high rendering performance I am using uPlot to visualize historical sensor data.
Is there a way to add horizontal reference lines like recommended min/max values for a data series?
With other libraries that's often straight forward, like the ReferenceLine tag in recharts, but I haven't found anything yet with uPlot. Any hints?
Example: The orange dotted lines are the lower and upper acceptable bounds at 7.0 and 7.4. This image is rendered with recharts, but I want to migrate to uplot.
(There's a layer in front of the chart with the actual, min and max value which is totally independent of the chart.)
I found an acceptable aproach based on two examples in the uPlot repository:
https://leeoniya.github.io/uPlot/demos/trendlines.html
https://leeoniya.github.io/uPlot/demos/draw-hooks.html
The main idea is to handle one of the draw-hooks (draw, drawAxes, drawClear) and to directly drawing on the canvas.
I render a chart/line graph with Chart.js where a ping of a server throughout the last month is displayed (a cloud function is ran every hour and the data gets send to a time series database). But accidents happen, and the server is sometimes unreachable. For those times I save the ping as -1. Also sometimes the data is just missing. I need to display those two cases differently. Like, is there any way, to for example color a part of the graph red when the server was offline and with grey when the data is missing? Preferably using Chart.js, but you can suggest any other JavaScript library.
Thank you so much.
With the new version 3 of chartjs which is releasing soon you can set the backgroundColor of the points like this:
backgroundColor: (context) => {return context.dataPoint?.y > 5 ? "green" : "red"}
And then you will have to put the right logic and values there. If you want the line also in different colors you will need to write a custom plugin for that since it is not supported by the default lib
Working example of points: https://jsfiddle.net/Leelenaleee/8bkz96cd/7/
I try to create dynamic highcharts. I use series.addPoint. It works fine but my chart adds points and doesn't move like here - jsfiddle. It can be with 100 points on the screen.
How can I make only 10 points on the screen and hide old points?
http://api.highcharts.com/highcharts#Series
Series.addPoint()'s third argument is a boolean that enables shifting. If your series is not shifting, try setting the third parameter to true.
As for the second part, are you sure you want to "hide" old data? Generally old data should be shifted off the end in a real time graph (which I assume is what you're going for). If you have too many points, you can make your x-axis smaller via Axis.setExtremes(). http://api.highcharts.com/highcharts#Axis
My apologies as I am new to this, but I have done a lot of searching and I can't seem to find an open source example of what I am looking for.
I want to visualize the flow of people through a system in the style of a flow chart.
However, I would like to be able to have the boxes of the flow chart, representing each stage, change size (including appearing and disappearing) depending on the number of people at that stage, at a certain time.
I have seen animated Sankey diagrams using d3 where the path size changes over time, but I am trying to mirror a static flow diagram we publish and this looks too different.
Does anyone know if this is possible and if so could anyone point me in the direction of a suitable example?
Technically it's quite possible. You have to collect the date through your system and transform those data compatible with Shankey so that Shankey can understand it. You have to refresh the data to Sankey after a certain period of time to reflect the latest update. I have a feeling that you also need to optimize this process for the performance shake.