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!

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!

• javascript
• raphael

2 Answers 2

At first you have to give the chart some values that it will not plain 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.

$.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});
});