Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set Date Value for x Axis using gRaphael Line Graph

I've recently started to use gRaphael for my graphing needs and am pretty impressed so far. However, I have run into some difficulty when producing line graphs, specifically that when I attempt to set the values for the X axis to dates, the graph fails to render. My code to generate the graph is:

    <script type='text/javascript' charset='utf-8'>


            var r = Raphael('holder');


            var lines = r.g.linechart(20, 20, 600, 300, [[1, 2, 3, 4, 5, 6, 7]], [['4.16','6.35','1.77','3.1','9.79','10.03','-0.3']], {nostroke: false, axis: '0 0 1 1', symbol: 'o', smooth: false}).hoverColumn(function () {
                this.tags = r.set();
                for (var i = 0, ii = this.y.length; i < ii; i++) {
                    this.tags.push(r.g.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();
            });
            lines.symbols.attr({r: 3});



    </script>
    <div id='holder'></div>

How would I be able to replace the X axis values '1, 2, 3, 4, 5, 6, 7' with say, 'Jan 2001, Feb 2001, Mar 2001...etc...etc....'?

Many thanks indeed, all help much appreciated!

like image 747
SW4 Avatar asked Jul 28 '10 09:07

SW4


2 Answers

At first you have to give the chart some values that it will not complain about. In your case you could save the UNIX timestamp etc Then you can alter the values using something like this (Using prototype etc):

lines.axis[0].text.items.each( function ( index, label ) {
      //Get the timestamp you saved
      originalText = label.attr('text');
      newText = 'CONVERT TIMESTAMP TO DATE USING originalText as input HERE';
      //label.rotate(75);
      label.attr({'text': newText});
    });

The .each can be replaced by a regular

for(var x = 0; x < lines.axis[0].text.length; x++)

loop if you like.

like image 61
Morten Avatar answered Nov 15 '22 00:11

Morten


$.each(lines.axis[0].text.items , function ( index, label ) {
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        date = new Date(parseInt(label.attr("text"))),
        day = date.getDate(),
        month = months[date.getMonth()];;

    dateText = month + " " + day;
    //label.rotate(75);
    label.attr({'text': dateText});
});
like image 41
AbdullahDiaa Avatar answered Nov 14 '22 23:11

AbdullahDiaa