javascript - How to set Date Value for x Axis using gRaphael Line Graph - Stack Overflow

admin管理员组

文章数量:1356904

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

Share Improve this question Follow asked Jul 28, 2010 at 9:36 SW4SW4 71.3k2020 gold badges136136 silver badges139139 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

本文标签： javascriptHow to set Date Value for x Axis using gRaphael Line GraphStack Overflow