change min and max y-axis values in a raphael linechart

StackOverflow https://stackoverflow.com/questions/20600158

  •  02-09-2022
  •  | 
  •  

Question

Consider the following code (sorry I was not able to put it on jsfiddle):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="raphael.js"></script>
<script src="g.raphael.js"></script>
<script src="g.bar.js"></script>
<script src="g.line-min.js"></script>
<body>
<div style="width:500px;height:150px" id="div"></div>
<script>
            var r = Raphael("div",400,150),
                    fin = function () {
                        this.flag = r.popup(this.x, this.y, this.value || "0").insertBefore(this).attr([{fill: "#bbbbbb"}]); 
                    },
                    fout = function () {
                        this.flag.animate({opacity: 0}, 300, function () {this.remove();});
                    },
                    txtattr = { font: "12px sans-serif" };
            var rr=r.linechart(0, 0, 400, 125, [0,1,2,3,4],[250,200,350,100,300], {axis: '0 0 1 0',axisxstep:4,symbol:'circle',width:1}).hoverColumn(fin, fout);
            rr.axis[0].attr([{fill: "#bbbbbb"}]);
</script>
</body>

I want to start y-axis at 0 and finish above the data series max value so that the tooltip is displayed rightly. How can I set y-axis min and max values overriding default behaviour.

Was it helpful?

Solution

gRaphael provides no way to do this. In fact, it doesn't seem like there any active development or maintenance on Raphael or gRaphael.

So the only way to do this, is to hack g.line.js. The values you're after is on line 109-114:

xdim = chartinst.snapEnds(Math.min.apply(Math, allx), Math.max.apply(Math, allx), valuesx[0].length - 1),
minx = xdim.from,
maxx = xdim.to,
ydim = chartinst.snapEnds(Math.min.apply(Math, ally), Math.max.apply(Math, ally), valuesy[0].length - 1),
miny = ydim.from,
maxy = ydim.to,

The value xdim and ydim defines the range of your chart in relation to your plotted values. The object returned by .snapEnds() takes this form: { from: INT, to: INT, power: INT }. I have no idea what the power part does, but it isn't used in g.line.js, so you can safely ignore it. What you want is to edit the from and to properties. Let's expose those to your options:

xdim = opts.xdim || chartinst.snapEnds(Math.min.apply(Math, allx), Math.max.apply(Math, allx), valuesx[0].length - 1),
minx = xdim.from,
maxx = xdim.to,
ydim = opts.ydim || chartinst.snapEnds(Math.min.apply(Math, ally), Math.max.apply(Math, ally), valuesy[0].length - 1),
miny = ydim.from,
maxy = ydim.to,

You can now change the values from your Paper.linechart() options object:

paper.linechart(0, 0, w, h, x, y, {
    xdim: { from: 0, to: 100 },
    ydim: { from: 0, to: 100 }
});

I hope this works for you!

While you're at it, you might want to fix this bug allowing opts.gutter to equal zero in g.line.js as well. Or you might use this fix to allow your linecharts to have a gap in them.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top