Not able to draw a proper Linear graph where X is date timestamp

Question

Graph looks okay when I draw it with graphView http://prntscr.com/hjg501 (tested with plot.ly: http://prntscr.com/hjgiim)

And then graph looks bad when using hellochart/mpchart:

Hellochart: http://prntscr.com/hjg8fa

MPChart: http://prntscr.com/hjghbb

My dataset on both graphs is this (X, Y):

1512488280000 1.200000048 1512488310000 1.200000048 1512488346000 1.200000048 1512488370000 3.599999905 1512488400000 1.200000048 1512488430000 1.200000048 1512488460000 1.200000048 1512488490000 1.200000048 1512488524000 1.200000048 1512488550000 6 1512488580000 1.200000048 1512488612000 1.200000048 1512488646000 1.200000048 1512488674000 3.599999905 1512488702000 1.200000048 1512488730000 1.200000048 1512488760000 6 1512488790000 1.200000048 1512488820000 1.200000048 1512488850000 1.200000048 1512488880000 2.400000095 1512488910000 1.200000048 1512488940000 1.200000048 1512488970000 1.200000048 1512489000000 1.200000048 1512489030000 1.200000048 1512489060000 12 1512489090000 1.200000048 1512489126000 13.19999981 1512489150000 7.199999809

I see that in hellochart and mpchart graphs look the same, while in graphview it shows properly, so I must be doing something wrong then...

Is there a way to make it work?

Answer 1

Problem solved. Turns out that most of libraries don't normalize values and rely on doubles/floats. Only library which currently accepts long ints is GraphView, but it's very limited and basically deprecated. So it's up to us to normalize values before populating the dataSet.

All I needed to do is normalize X values before adding to the plot dataset. I decided to rely on differences rather then on some common divisor.

So for example you have these points:

x1 1512488280000   y1 1.200000048

x2 1512488310000   y2 1.200000048

x3 1512488346000   y3 1.200000048

x4 1512488370000   y4 3.599999905

Normalized dataset calculation:

If you calculate x1x2Diff (difference between x1 and x2) you will get 30000 for x2Point in our new dataset, and x1Point set it as 0 (because what we are interested is keeping same differences between points).

x2x3Diff is 36000 (and you will need to keep track of previous x value or just simply add up previous point, so x3Point= x2x3Diff+x2Point=66000 (in our new dataset).

Finally x3x4Diff is 24000 so x4Point=x3x4Diff+x3Point=90000.

Finally, this is our new normalized dataset(which will draw proper graphs in such libraries as hellocharts and mpcharts):

 0     1.200000048

30000 1.200000048

66000 1.200000048

90000 3.599999905

Now you can also check if you did it correctly by calculating x1x4Diff in the original dataset, and the gap is 90000.

Also note, that you can make a variable which will keep track of latest value, because this example is to show how it works (that's why I broke it down step by step).