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.
Related
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.
I have a collection of projects, each of which have a completion date. I am trying to display it on a horizontal bar graph such that the label is on the y-axis and the completion date is on the x-axis, as in this image:
Target axis. I am currently using Chart.js
The problem I am encountering is that Chart.js seems to be incapable of interpreting my data as dates - instead it evaluates it (for example, 2017-02-10 is interpreted as 2005). Based on the documentation at chartjs.org/docs/#scales-time-scale, I have tried to use Moment.js to parse my date strings into moments, but it can't render it.
My best guess is that, since it's a horizontal bar graph, my x-axis values are being treated like y-axis values, and the documentation states that the time scale is only supported on the x-axis.
Is there some workaround that would allow me to use dates as the data, so that it looks like this image, but with the axes from the first image? If not, is there another library I could use that does support this? I haven't found any examples of people using time scales on a horizontal graph, so I don't know if other libraries like CanvasJS can do it either.
Goal data, but wrong x-axis
Thanks.
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!
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
I would like to show data from different date intervals in hour granularity in the same xAxis. I would like to show the two charts over each other, not near each other.
I can do it with 2 xAxis. See example: http://fiddle.jshell.net/X3jPh/770/
Is it possible to hide the second xAxis, because as you see in the example both has the same hour intervals.
See the answer here: http://dev.highslide.com/forum/viewtopic.php?f=9&t=9917&p=45544
In your example, it would make more sense to normalize that data first (i.e. adjust the values so that they happen on the same day), then display the data normally.
I do not think it is possible to plot the data in the way you intend. In order to show two different series with different start intervals with the same xAxis, you'll have to resort to some sort of trickery (since the chart is technically displaying two different dates, even if they are the same time).