Page MenuHomePhabricator

Pageviews Analysis: above 75 day range, dates are unreadable
Closed, ResolvedPublic

Description

On the stats page, if you look at a date range longer than about 75 days, the dates at the bottom of the chart get squished together and impossible to read.

Maybe for larger date ranges, it could list dates at intervals -- 5 days, or 7?

Event Timeline

DannyH created this task.Mar 8 2016, 12:39 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 8 2016, 12:39 AM

One solution is to simply plot less data, say every week, just as you suggest. This means we will only reveal data for every 7 days – not just show a label for every 7 days. Far less than ideal, however, as the user may be left out on critical bits of information like the spike in views you see in your screenshot.

The better solution is to plot all data, but show the labels at an interval (which I think is what you were going after). Unfortunately Chart.js doesn't seem to offer such functionality on the x-axis. There are some patches out there that could be of help, but I'm starting to think maybe we should look into a different library altogether.

Highcharts might be a good alternative. It also offers other very nice features when dealing with wider date ranges – such as a pinch-to-zoom and click-and-drag to focus in on a certain part of a daterange. They do appear to have a free license for non-profit organizations, which I think we'd qualify as, despite not having a direct affiliation with WMF.

Actually... we can just modify the labels that are passed into the Chart, and leave blank strings to simulate gaps. Let me try to get a demo up on https://tools.wmflabs.org/pageviews-test It may not look the best but I think it will work.

Alright, give it a try: https://tools.wmflabs.org/pageviews-test/#start=2015-12-08&end=2016-03-06&project=en.wikipedia.org&platform=all-access&agent=user&pages=Cat|Dog

This is using the leighquince/Chart.js fork of the library, allowing us to have control over the labels. The downside is the labels are still angled vertically, when there is actually room such that they should be angled as if it were a smaller date range, if that makes sense. It also doesn't support label intervals for the Radar chart type, but I don't think that type is very popular.

The filter I applied starts to space labels out with a 60-day daterange, gradually giving it more spacing for greater ranges. I started with 60 because the issue with squished labels is amplified on mobile, so giving it a little more leeway will better suit those users. You can still hover (or tap) and get individual date labels.

Let me know what you think. I think this will do for now, but we might still want to look into Highcharts given the other features.

Highcharts might be a good alternative. It also offers other very nice features when dealing with wider date ranges – such as a pinch-to-zoom and click-and-drag to focus in on a certain part of a daterange. They do appear to have a free license for non-profit organizations, which I think we'd qualify as, despite not having a direct affiliation with WMF.

Although Highsoft´s Software have open source codes, our software is not licensed as an open source software and are unfortunately not compatible with any open source software license like Apache 2 or any GPL.

You agree not to use Wikimedia Labs for any of the following (“Prohibited Uses”):
'''Proprietary software''': Do not use or install any software unless the software is licensed under an Open Source license.

MusikAnimal added a comment.EditedMar 8 2016, 6:44 PM

@Ricordisamoa Ah you are correct. Despite the fact that Pageviews Analysis is released under an open source license and is non-profit, we can't include software that isn't open source – which is the case with Highcharts.

Guess we'll stick with Charts.js for now!

Yeah, that looks great! I see what you mean about the vertical dates, but obviously this is much easier to read than the previous version. I see you also added the 10 and 20 days, that's awesome.

I've deployed this change. Not sure if you want to keep the task open for further investigation, up to you!

kaldari closed this task as Resolved.Mar 9 2016, 10:36 PM
kaldari claimed this task.

Looks great to me!