(Highchart) 24 Hours chart: Link last point with first - javascript

I have to program a machine with multiple values throughout the day, and besides, I need to graph a line with these values for intermediate values. To this should link the last point on the graph with the first.
At the moment I created an extra point at the start and end to repeat the last and the first value respectively but in the next day and the previous.
But the problem comes when I change these values and I want to render the graphic (it is an AngularJS application with draggable points plugin in future versions), for example when set the first point to 23:00. I should modify several points, including the extra, but it's very hard, because some of these points are calculated (circles), in fact, only have 3 points in this chart (squares)...
Is there any way to avoid these additional points (at the begining and the end) and use only those with real or calculated values? Have Highcharts some property to create a 24h "cyclic linear chart" or something similar?
Thanks a lot!

Related

D3 timeScale remove month boundary tick

I'm trying to build a box plot representing stats of a lot of data(x-time, y-time) The idea is to use d3.extent() to get the domain and then feed it to timeScale to get ticks in nicely chosen intervals. Then I calculate stats for data points between the ticks. Example below:
The approach works well most of the time. Except for the 1st day of the month which creates an additional tick in an uneven spacing ( see above "Wed 31, June" ). I'm currently calculating bar widths and positions manually assuming that the ticks are spaced evenly so the whole chart gets broken.
The data can span any range of time from a week to couple years, so dynamic ticks are required.
Any ideas how to remove the additional tick or make all the ticks spread evenly?
EDIT. Not sure if removing the tick is going to do the trick... probably even spacing is more important here. I looked up other people's questions about similar problems but I'm still confused how to solve my problem.
I've just started using D3 so forgive me if the question is trivial. I'll be happy if you just point me in the right direction.

Creating gaps in Highcharts

I have a master-detail chart that displays several series of values against timestamps in line, spline and column formats, depending on the user's choice.
My issue is that when a range of timestamps (say a whole week) and their corresponding values are missing, the spline, line and master do what is expected and plot a smooth line between the gap. However this is misleading and I would rather it show a break in the line once a given range of timestamps are missed. I have tried connectNulls: false but as both the timestamps and values are missing this does not work.
Is there any way to achieve this? Preferably without looping through the data and adding the missing timestamps and null values, as the intervals are not always regular.

Custom series connecting line

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.

Dynamic Highcharts with maximum xaxis points

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

Jquery Flot - make data more granular as user zooms

So I am trying to devise a way to create a nifty chart in which the user can zoom. I want to try to create an effect that as the user zooms, the data will become more granular. For example, say we are looking at a count on a date/time.
when you're at default zoom, which is say 3 months, you will see 1 data point every 24 hours. I am trying to get it as you zoom in, and see a smaller chunk for that data to get more granular. Like if you're looking at a day, each hour will get its own data point.
Do you all think it's possible to achieve an effect like this using Jquery Flot? I have all of the data broken down into hours at the beginning, it's just a matter of calculating how much of it should be shown.
I already have the zoom functionality working, but just need to figure out how to make the data change as well.
Thanks!
Flot won't do this automatically; you would have to register a callback on zoom that iterates over the original array to pick out, i.e. every nth sample, then redraws the plot using the results.

Categories

Resources