New chart type - LineXY & DateAxis

[baks]

New chart type proposition - LineXY and also DateAxis.

I tried to refactor code a little bit. Also created one ticks provider :)

Line XY

function LineXY(query, data, options, responsiveOptions, axisX, axisY, dataTransform)

Example to use logarithmic scale:

var logTransform = function(point)
{
    return {
        x: Math.log10(point.x),
        y: point.y
    }
};

var chartlog = new Chartist.LineXY('#chart', chartData, options, responsiveOptions, axisX, axisY, logTransform);

Date Axis

It allows to specify that on axis we have date values.
We could specify resolution in DateTicksProvider constructor :

• Chartist.DateTicksProvider.Year
• Chartist.DateTicksProvider.Month
• Chartist.DateTicksProvider.Day
• Chartist.DateTicksProvider.Hour
• Chartist.DateTicksProvider.Minute
• Chartist.DateTicksProvider.Second
• Chartist.DateTicksProvider.Millisecond

If no resolution specified in DateTicksProvider constructor, ticks are created based on duration between start and end date.

example:

var dateAxis = new Chartist.DateAxis(Chartist.Axis.units.x,{ ticksProvider: new Chartist.DateTicksProvider(Chartist.DateTicksProvider.Hour) });
var chart = new Chartist.LineXY('#chart', chartData, options, undefined, dateAxis);

Examples

Simple LineXY
Logarithmic Scale
Resolution Based Ticks Provider
Year Ticks Provider
Month Ticks Provider
Day Ticks Provider
Hour Ticks Provider
Minute Ticks Provider
Seconds Ticks Provider
Milliseconds Ticks Provider

[gionkunz]

Hey there! I didn't forgot about this. It will just take me some time to review and test. Please bear with me.

[Scribblets]

@baks This is perfect ~ just what we needed. However, I was wondering if there was a way to specify the x-values using the Year Ticks Provider, and then specify the y-values using the Logarthimic Scale.

Currently, there are no x values being shown at all (we would like to show every 5-10 years), and the y-values range from 4.25 - 10.25, where we would like to show incrementation in 10's: 1, 10, 100, 1000, 10000, 100000, 1000000, 10000000, etc. etc.

Is this possible?

[baks]

I hope that this example is what you need :)

http://jsbin.com/cilovezepa/1/edit

[Scribblets]

@baks Still doesn't show anything for me. :(

[Scribblets]

[Scribblets]

@baks Update: So I just tested this in Firefox, and it seems to be working. I'm using Google Chrome. Is this a known issue? Is there a fix for it?

[baks]

@LRRoberts0122 You're right it doesn't work in Chrome. I try to investigate this on the weekend.

[Scribblets]

Thank you.

[baba43]

Hey @baks great work. Did you find a solution for the Chrome problem or is this request lost for now?

[baks]

@LRRoberts0122 @baba43 I fixed problem in Chrome.
Problem was due to incorrectly calculated width value for axis label.
Hope it helps.

Sorry for that it takes so long 😢

[gionkunz]

Hi Guys, can you build the latest develop branch and help me to do some testing? be9e6b6 is now containing configurable axes and XY charts are possible. You get more info in be9e6b6 while I'm working on some further testing and documentation.

@baks if you got time, your help would be much appreciated.

[gionkunz]

@baks I'll close this PR for now and then we could do some more efforts for the date axis.