CODEWITHSUNDEEP
javascriptraphaelbar-chartgraphael
Zeus
Zeus

Reputation: 3357

How to add axis labels and grid to raphael bar chart

I am having issues with g.raphael bar chart. Here is my example

var paper = Raphael("holder");
var chart = paper.barchart(100, 40, 480, 300, [[15,18,26,36,55,60,80]]);
Raphael.g.axis(90, 320, 280, 0, 100, 10, 1, null, "", null, paper);
//paper.path("M100 40L100 320").attr({ stroke: '#ccc' });
	
var paper = Raphael("holder1");
var chart = paper.barchart(100, 40, 480, 300, [[15,18,26]]);
Raphael.g.axis(90, 320, 280, 0, 100, 10, 1, null, "", null, paper);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/raphael-min.js"></script>
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/g.raphael-min.js"></script>
<script src="https://raphael4gwt.googlecode.com/svn/trunk/raphael4gwt/src/org/sgx/raphael4gwt/public-graphael/graphael/g.bar.js"></script>

<html>
  <body>
<div id="holder"></div>
<br/>
<div id="holder1"></div>
    </body>
</html>

Questions:

  1. How to stop from bars becoming smaller and bigger ? first example has 6 bars and second one has 3 bars so in the second example everything is bigger so it does not match with the label on y axis.

  2. How do I add gridline to bar chart? I tried drawing it with path element but it does not align as the bars get bigger and smaller compare to values being passed.

Thanks Ved

Upvotes: 0

Views: 1264

Answers (1)

pk.
pk.

Reputation: 986

I know this is a few months old, hopefully my answers help you or someone in the future.

  1. So a couple of things are happening that are causing these issues. The bars are scaled in both x and y to fill the available height and width that the chart is given when you call paper.barchart. So one way to counteract this is to pass in dummy 0 values so that the bar widths are the same.

    For the height scaling, you need to set the "to" option of the barchart in order to get the bars to draw to the appropriate value.

    Check out this plunker I made showing your data. Here's one of the chart creation calls:

    var chart = paper1.barchart(100, 40, 480, 300, 
    [[15, 18, 26, 0, 0, 0, 0]], 
    {
      to: 100
    });

  2. What I did to solve this problem was modify the axis function to draw grid lines at the same locations as the dashes.

Hope that helps.

Upvotes: 1

Related Questions