search

hansmaad / chartist-plugin-zoom

Zoom Plugin for Chartist.js
Do What The F*ck You Want To Public License
17 stars 15 forks source link

Doesn't work with non-digits as axis value #6

Closed xvonabur closed 7 years ago

xvonabur commented 8 years ago

Hello!

First of all, thanks for the plugin! Unfortunately I can't use it, because it doesn't support non-digits as axis value. For example, I would like to use zoom on the following chart:

screen shot 2016-07-19 at 18 40 17

But every time I try to zoom I see an "Uncaught TypeError: Cannot read property 'max' of undefined" error in browser console. My test example is almost a copy of example from this repo, with slightly modified data variable:

var data = { labels: ['oct-15', 'nov-15', 'dec-15'], series: [[{y: 10, x: 'oct-15'}, {y: 20, x: 'nov-15'}, {y: 15, x: 'dec-15'}], [{y: 30, x: 'oct-15'}, {y: 60, x: 'nov-15'}, {y: 45, x: 'dec-15'}] ]};

Is it supposed to work with this kind of situation? Am I missing something?

hansmaad commented 8 years ago

To be honest, I never worked with non numerical data. The plug-in is only tested with numbers and AutoScaleAxis. I have to figure out, how this is handled in chartist to write a projection function for this. @gionkunz Is this a Stepaxis? Is there a way to adjust high/low?

bargar commented 8 years ago

@xvonabur ran into this as well with time values on the x axis, in my case one value for every month.

My workaround was to make the values numeric by representing the monthly values as milliseconds (a la new Date().getTime()). I then formatted the labels as human-friendly month values using a labelInterpolationFnc for the x axis.

Finally (and this is unfortunate), the above means that you will have duplicate labels depending on the ticks produced by AutoScaleAxis. For example, in my chart with monthly datapoints it will show labels representing the same month more than once once you zoom in.

I got around this by writing a custom label interpolate function that de-dupes the labels, but this results in odd spacing near the chart's edges and between the labels and besides is starting to be rather a lot of effort...