CODEWITHSUNDEEP
javascriptraphaelgraphael
user2327751
user2327751

Reputation: 247

How to have different values on x axis, and different labels at graphael?

I want to use dates at graphael charts, as below.

var lines = r.linechart(30, 30, 600, 440, [
    [01 / 01 / 2014 12: 00: 00, 02 / 01 / 2014 12: 00: 00, 03 / 01 / 2014 12: 00: 00, 04 / 01 / 2014 12: 00: 00, 05 / 01 / 2014 12: 00: 00]
], [
    [100, 150, 130, 85, 100]
], {
    axisxstep: 20,
    nostroke: false,
    axis: "0 0 1 1",
    symbol: "circle",
    smooth: true
}).hoverColumn(function () {
    this.tags = r.set();

    for (var i = 0, ii = this.y.length; i < ii; i++) {
        this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{
            fill: "#fff"
        }, {
            fill: this.symbols[i].attr("fill")
        }]));
    }
}, function () {
    this.tags && this.tags.remove();
});

However, graphael, seems that cannot recognize dates. If I set those values instead of dates to 1,2,3 ... , how I can show the dates labels at the x axis afterwards?

Thanks again

Upvotes: 1

Views: 91

Answers (1)

bboogwin
bboogwin

Reputation: 337

Try to use dates in milliseconds. To render dates at the x axis in any format you need you can do as described here: https://bocoup.com/weblog/alternate-x-axis-intervals-in-g-raphael-js-linechart

Upvotes: 1

Related Questions