Labels appear off chart and changing gutter values squashes chart

Share RGraph:   Share or Like RGraph on Facebook!

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Scott Dilley on 4th April 2013
Hi

I am using the Bar chart on a project and was asked to add in some Axis labels which I did using chart.title.xaxis & yaxis but the labels appear off the chart image. I added some side and bottom guttering which helped slightly for the bottom one, but for the left side label if I add in some guttering then all the bars appear squashed up with no labels beneath them.

Is this a known issue or is there something I need to add to the chart to get the Axis labels appearing correctly?

rgds
Scott.
Posted by RGraph support on 5th April 2013
Hi there,

It's not an issue - is you increase the size of the gutter the area for the bars gets smaller. You can increase the size of the canvas to give yourself more space, use a smaller font size, use text at an angle or use alternate lines like this:

www.rgraph.net/demos/bar-animated-pie-chart.html


Richard
Posted by Scott Dilley on 7th April 2013
Thanks for the reply.

I have uploaded a version of what I am using for you to have a look at

heinekenstarserve.com.au/test.html

Code is below

I am wanting the graph to resize as the user resizes their window so I have put it inside a function that gets triggered onload or onresize with the width of the graph being the width of the containing div.

When I add a gutter to the left side notice how the bars all cramp up togther and the bottom labels fall off the graph.

Are you able to advise on what I am doing wrong and how I can get the axis labels appearing better?

----------------

<script>
     $('#report1').attr('width',$('#ContentBar .inner').width());
     window.onload = function (){
      DrawReport();
     }
     $(window).resize(function() {
      $('#report1').attr('width',$('#ContentBar .inner').width());
      DrawReport();
     });
     function DrawReport() {
      var data = [35,0,25,15,0,30,5,30,5,0,0,10];
      var bar = new RGraph.Bar('report1', data);
      bar.Set('labels', ['The Oak','Venue 2','Venue 3','Venue 4','Venue 5','Venue 6','Venue 7','Venue 8','Venue 9','Venue 10','Venue 11','Venue 12']);
      bar.Set('labels.above', true);
      bar.Set('title','Venue Points');
      bar.Set('title.yaxis','Points');
      bar.Set('title.yaxis.pos','0');
      bar.Set('title.xaxis','Position');
      bar.Set('title.xaxis.pos','0');
      bar.Set('gutter.left','30');
      bar.Set('gutter.right','0');
      bar.Set('gutter.bottom','65');
      bar.Set('colors', ['#13670a']);
      bar.Draw();
     }
     </script>
Posted by RGraph support on 8th April 2013
Hi there,

You should probably add a reset call at the start of your function so that old charts don't reappear:

RGraph.Reset(document.getElementById('report1'));

Plus you culd try changing this:

$(window).resize

To this:

window.onresize = function() { ... }

And as for the labels - you could start alternate labels with \r\n so that they appear on separate lines like this:

www.rgraph.net/demos/line-us-prison-population.html





Richard

Add a reply




« Back to message list