search

Blacklotus45 / Chart.js

Simple HTML5 Charts using the <canvas> tag
http://www.chartjs.org/
MIT License
1 stars 0 forks source link

Time Scale autoskip issue #4

Open Blacklotus45 opened 7 years ago

Blacklotus45 commented 7 years ago

Expected Behavior

Ideally what I'd like to achieve is something like this D3.js chart, where the time scale, if it spans multiple months and autoskips dates, adds the months or even years underneath the dates at the corresponding location. This looks a lot less cluttered than repeating the month and/or year with every date. image

Current Behavior

A multiline date is not supported in Chart.js

Possible Solution

I tried to replicate this behavior instead on the same line via the afterTickToLabelConversionfunction. There I would only return the actual day for a tick, unless it's a new month, where the month gets prepended: image One challenge there is that with a longer date range and autoskipping active, the first of the month is not necessarily going to be plotted. It might be that the 3rd or 5th of the month is the actual date that shows up. In order to know when the first drawn date of a month is, I need to know the skipRatio. Unfortunately, the scaleInstance that gets passed into it, does not contain that. So I calculated it based on the original formula.

However, I noticed that the more the date range was increased, the calculated skipRatiodid not actually match the dots drawn. It seems to be related to the Math.floor part, where the actual skipRatiocould result in something like 6.9 which Math.floor rounds down to 6 while the dots where spaced 7 apart. Changing this to Math.round instead in both the source and in my afterTickToLabelConversion function seemed to solve the issue. So my codepen contains the modified Chart.js on top, example code at the bottom.

Steps to Reproduce (for bugs)

  1. Go to http://codepen.io/anon/pen/vyRjPj?editors=0010#0
  2. Change Start Date back month by month and see the time scale properly update
  3. Once you hit January, time scale is skipping months

(Side note: while stepping through the months, you will notice that December sometimes goes missing and that seems to be related to this already existing bug.)

Context

Now, I thought I solved this issue by changing Math.floor to Math.round, but once I navigate back almost a year to January, the proper labeling stops working and I'm not exactly sure why that is. Any suggestions if this could be solved differently would be appreciated. Thanks!

Environment

cagdasgerede commented 7 years ago

Orijinal repodaki issueya link koyar misiniz?

SengulolanCem commented 7 years ago

https://github.com/chartjs/Chart.js/issues/3686

cagdasgerede commented 7 years ago

ok