Say I have a simple time series graph with data for February 25th, 2013, starting from 1am and ending at 11pm. If I graph this data, I will have nice, even ticks on my x-axis 3 hours apart: 3am, 6am, 9am, etc. This is exactly what I want. However, at the beginning of the axis it shows 'Mon 25'. I'd like to hide this, and only show the hours.
I have read through d3's time documentation but cannot find an answer. Is there an easy way to do this, keeping my dates as Javascript objects? (I'm sure I could convert to strings, but I'd like to avoid this.)
You can use the tickFormat() function to pass in a date formatter. The documentation isn't terribly clear, but links to this example that illustrates how to do it. In your case, you would have only a single entry in what is customTimeFormat in that example.
Related
I run daily a job. Today, that job takes 1:45:09 hrs. I have a lot of such durations for that job from the past weeks and I want to be able to show that graphically using a simple column chart. On the Y axis I want duration ticks from 0:00:00 - 5:00:00 or so that I can easily compare the runtimes from the past weeks and see if the job is gradually taking longer and longer.
I have read and implemented a lot of answers from StackOverflow and other internet resources but none of them fit my purpose. When using unix timestamps (since 1970, etc) I get columns that are all of the same hight and Y-axis ticks in years instead of hours from 1970 to now.
Another option was to just calculate the minutes or seconds. Then the difference become appearant, but instead of time elements in the Y axis and tooltips I get integers.
Can someone show me how to achieve my goal in a fiddle? The question looks common enough to me for any monitoring software.
-- EDIT --
Here is a Photoshop sample of what I am trying to achieve:
On the Y-axis: a time scale. In the tooltip: date, objectname and time taken.
-- END EDIT --
BTW, I have no chart type preference. The usual column charts just seem to fit the purpose.
Thanks for any help!
I build a chart with 2 layers in Workshop, the only difference is the date bucket. As far as segmentation is the same, I would like each layer being displayed with the same color.
In the chart above, you'll see 2 series: one to display the monthly evolution of a property, the second one to display the yearly average. Each series is segmented by the same object (listed in the table above, coming from an hidden filter). This is achieves by defining 2 layers, with exactly the same definition, except the X-axis: the date is bucked either monthly or yearly. The property is calculated on a monthly basis, so the monthly average bucket displays the input value, and the second chart dynamically calculates the yearly average.
The main issue is that the 2 blue lines are not related to the same object.
I also would like, as far as possible, to have only one legend, instead of one per layer. Currently, my workaround is to display in one case the code, in the second one the description.
Maybe I missed something, but I did not find any way to define precisely the chart colors: am I wrong?
Thus, I was wondering if there was any way to sort input data. The filter is based on the object's primary key, is is possible to sort the queryset accordingly ? Maybe the segmentation would be displayed in the same order and the colors match this order.
Or is there any other way to proceed?
The answer to the title's question is quite easy: actually, the segmentation is not exactly the same. In the first layer, the segmentation is based on a code, the second one on the object's name. Thus, the order is slightly different.
Then solution is: use exactly the same segmentation.
I still wonder how to manage the display: view the legend for only one layer, choose lines' colors... But it looks like it's another subject and I'll probably open a new topic.
I am working with time series data that omit data for the weekend. When graphing these time series in D3 v4 the graph interpolates over the weekend. See the following URL for an illustration (including code, data, and graph output):
No records for weekend
Instead, I want a gap at the weekend; graph stopping on Friday and resuming on Monday.
I could fix the problem by creating dummy records for the weekend, with values 'NA', and using the D3 defined method, as shown in the following:
Data has NA records
However, generating dummy records feels to me like excessively heavy lifting. Is there a simple, natural way to get D3 to leave a gap when time series records are missing?
Is there a simple, natural way to get D3 to leave a gap when time series records are missing?
Unfortunately no, that's the normal behaviour of a time scale. According to Mike Bostock, D3 creator,
A d3 time scale should be used when you want to display time as a continuous, quantitative variable, such as when you want to take into account the fact that days can range from 23-25 hours due to daylight savings changes, and years can vary from 365-366 days due to leap years.
So, the time scale was created having in mind a continuous time.
Your current approach in the line generator...
.defined(function(d) { return !isNaN(d.value); })
... doesn't work because all the dates in your CSV have values, and d3 will connect the dots.
That having been said, if you want to keep the gap, just use dummy records (as null or any non numeric value) for the weekends and line.defined, as in your second link.
i have an array of date=>values, like this
"2010-10-12 14:58:36" =>13.4
"2010-10-17 14:58:36" =>12
"2010-10-22 14:58:36" =>17.6
"2010-10-27 14:58:36" =>22
"2010-11-01 14:58:36" =>10
[...]
I use this date-value combination to paint an graph in javascript.
Now i like to mark those dates, who are "very special".
My problem (and Question) is, which aspect should consider to find those specific dates?
As an human, i prefer the date "2010-10-17 14:58:36", because "something" should be happens on this date, because the value on the next dates rises for 5.6 points, which is the biggest step up followed by one mor big step up. On the other hand, also the date "2010-10-27 14:58:36" is an "highlight", because this is
the top of all values and
after this date, there comes the biggest step down.
So as an human, i would be choose both dates.
My problem is: how could an algorithm look like?
I tried averages values for n dates before and after the current values, which results in an accumulation of those specifics dates at the beginning and at the end of the graph
So i tried to find the biggest percentage step up (depending on the date before), but I'm not sure, if i really find the specific dates, I'm looking for?!
How would you tackle the problem?
Thank you.
Looks like financial stocking issue :-) You are looking for Time series analysis - this is a statistical issue. I'd recommend to use R programming language to play with it (you can do complex statistical things very fast). There are tens of special packages, for sure financial one's too. Once you know what you want, you may implement the solution in any other language.
Just try to google time series analysis r.
EDIT: note that R is very powerful - I'd bet there is a tool how to use R packages from other languages.
If you have information over a timeline you could use Inerpolation.
A Polynomial interpolation will give you an approximated polynomial that goes through the points.
What's nice about this is you can then use Mathematical analysis which is easy on polynomials to find interesting points (large gradients, min-max points etc...)
Also you get an approximation of how the function behaves, so you could "future" points and see what may happen in the near future.
Of course looking into the future isn't so accurate, but forms of interpolation are used in analytic to see trends and behaviors.
And of course, it's easy to plot a polynomial, which is always nice.
This is really a question of Statistics http://en.wikipedia.org/wiki/Statistics and the context of your data and what you're looking to highlight, for example, the fact that between 12/10 and 17/10 the data moved negative 1.4 units may be more useful in some scenarios than a larger positive step change.
You need sample data, on which build up a function which can calculate an expected value for any given date; for instance averaging the values of the day before, the same week day of the previous week, of the previous month and so on. After that decide a threshold: interesting date are those for which real value is outside expected value +- threshold
I'm trying to think an interface for a time-keeping system that will let users see "at a glance" how much time still needs to be completed.
This is complicated by the fact that there are no fixed hours - employees must work at least 6 hours on any given week day, and at the end of each month should have worked 7.5 hours for each week day that month. 7.5 hours either way can be carried over to next month. Employees can also take up to 1 morning and 1 afternoon per month 'flex' time. Time needs should be recorded by 10.15 the following day, but this rule is bent during busy times, and end of week and particularly end of month boundaries become more important.
So what's the most readable format to display the currently entered time and highlight approaching deadlines for uncompleted entries, while still giving a feeling for how far ahead/behind track the employee is (i.e. if you have a week to go that month and you're 8 hours ahead you could schedule a little extra duvet time).
My first take was a bar chart for each day with a red line at 6. But this doesn't give you any idea of how far ahead or behind you are for each day or month or whether you are close to missing a deadline...
(Please excuse the horrible mockup)
Maybe I'm trying to convey too much info in one place?
--
Here's a mockup of time recorded v.s. time required as suggested by Dickon Reed
--
EDIT: this side works great for stuff like this. i'm going to kick some of these ideas around in the morning and hopefully get something posted back here.
Your first chart could be improved by showing the remaining time as shown below. The remaining time until the next weekly/montly deadline is divided evenly over the remaining days before the deadline. So the UI will answer to the question: "How many hours per day will I need to work to meet my deadline?" If the user wants to take one morning/afternoon off (or did I understand you incorrectly?), you should have a checkbox for that day, after checking which the estimates will be adjusted accordingly.
You should also show the exact time on top of every vertical bar, so that the user doesn't need to estimate it in his head (I was lazy and added them to only a couple of bars in the mockup). Also highlight the current day, for example in the below picture this was done by circling "Thursday" and using a bold font for the time that the user has been working today. You could also use some visual effect for today's vertical bar.
improved bar chart http://img11.imageshack.us/img11/6755/20090216203339em2.png
For your second chart you should also draw in the weekly or monthly deadlines, as horizontal bars. In some cases the second chart might be better, but in this case I would settle with the first chart (with my improvements), because it might better correspond to the users' mental model, and that way you can also visualize the daily minimum 6h some way.
how about a "test tube/thermometer" image, like they have for charities... it fills up as you add time, trying to reach a goal (the red line).
Fill each day with a different color, and label accordingly... if the user works overtime M-T, they may have reached the line before Friday, etc.
similar to:
alt text http://goyamarketing.com/blog/wp-content/uploads/2008/11/goal_thermometer.gif
The char bar looks nice visually, but what you really need to know is how far behind/ahead you are in your hours totally.
If i understood correctly, you are interested only in your current saldo and your current deadline, so you could display that information in 2 seperate fields (e.g. below the chart). Of course, you could also mark the deadline with some horizontal line in the graph.
How about a pie chart where the total size represents the minimum goal and add pie slices for each day with actual days that met the minimum one color, days with extra time another and then fill the remaining days as gray slices with the number of hours the employee would have to work divided evenly among them?
A line plot with "working days elapsed" on the X axis and "fraction of monthly required work done" on the Y axis? With only a few data points, it should be clear by visually extrapolating whether you'll hit the top early or late. The plot would look like an irregular staircase.
ps. "The Visual Display of Quantative Information" by Edward Tufte is a great book for ideas on this kind of topic.
To take Dickon Reed's idea one step further, why not do each point as a +/- hours ahead or behind, with your baseline always 0. That way you have more detail. I'm not sure if I got my point across, but it's hard to do without an example, and I'm short on time.