set up Bar's width Rgraph.Bar's chart?


« 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 Carol.Fievet on 31st May 2013
Hi everybody!!
I was wondering if there's any way to set up bars anchor (bars's width) in a Rgraph.Bar object. I have been looking for that property in the library but I cant find it.

Thanks and have a nice Friday.

Carol Fievet
carol.fievet@gmail.com
Posted by RGraph support on 1st June 2013
Hi there,

To get thinner bars you can increase the chart.hmargin value. Though if you make it too large the width will be negative and increasing the hmargin will start increasing the width again. There's a HOWTO about this here:

www.rgraph.net/docs/howto-thin-bars.html


Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Carol.Fievet on 3rd June 2013
Thank for your quick answer Richard , but setting that property I can't realize any change on the graph, maybe coz Im using more bars (charts) than allowed for that. Im not sure of this. Actually Im drawing by months of years (12 months --> 12 bars) and I will need to do it as well for days of month (from 1st to 31th --> 31 bars). Do you know if I have to set up another property like 'numberOfCharts', or something like that to help the graph distributing available space?

Thanks for your time and help.
Have a nice Monday.
Carol
carol.fievet@gmail.com
Posted by RGraph support on 3rd June 2013
Hi there,

I can't tell what it is that you're try to achieve - an illustration might help.


Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Carol.Fievet on 4th June 2013
This is what I'm trying to draw:

24.media.tumblr.com/849d11369838fbaef54cedb43d550b0f/tumblr_mnvfhtVADa1suq6g3o1_1280.png

But bars are so thin, and I can't see neither the legend like I show you here:
25.media.tumblr.com/1e8fe06442c50f9dbed070f11b11439d/tumblr_mnvfrvClZ21suq6g3o1_1280.png

This is the exeption:
25.media.tumblr.com/f22689cb930f527b09ec70e84f890295/tumblr_mnvfxzoQTk1suq6g3o1_1280.png

Thanks again for your time and help
Posted by Carol.Fievet on 4th June 2013
This is what I'm trying to draw:

24.media.tumblr.com/849d11369838fbaef54cedb43d550b0f/tumblr_mnvfhtVADa1suq6g3o1_1280.png

But bars are so thin, and I can't see neither the legend like I show you here:
25.media.tumblr.com/1e8fe06442c50f9dbed070f11b11439d/tumblr_mnvfrvClZ21suq6g3o1_1280.png

This is the exeption:
25.media.tumblr.com/f22689cb930f527b09ec70e84f890295/tumblr_mnvfxzoQTk1suq6g3o1_1280.png

Thanks again for your time and help
Posted by RGraph support on 4th June 2013
Hi there,

You haven't included the key code by the looks of it. And the bars are thin because your hmargin is set to 25.



Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Carol.Fievet on 6th June 2013
Hi again Richard,
I could fix the trouble with the anchor of the bars, I had bad setted the property you told me :-) . But I'm still expecting troubles with the key. I have tried with some values preseted by me in the code instead of passing it like Array when I call the function that draws the graph and it doesn't work, and I don't know why:

bar.Set('key', ['Pedro', 'Juan','José', 'Antonio', 'Mercedes', 'Rodrigo']);

Before I had it like this:

bar.Set('key', divisiones); //where divisiones is an Array like above that I pass when I call the function.

This is my code:
function pintarGrafico(turnos, ejeX, divisiones, titulo)
     {
         var bar = new RGraph.Bar('cvs', turnos);
         bar.Set('grouping', 'stacked');
         bar.Set('labels', ejeX);
         bar.Set('chart.title',titulo);
         bar.Set('chart.title.vpos',0);
         bar.Set('chart.title.hpos',0);
         //bar.Set('chart.key',divisiones);
         bar.Set('labels.above', true);
         bar.Set('chart.hmargin', 0);
         bar.Set('labels.above.decimals', 2);
         bar.Set('linewidth', 2);
         bar.Set('strokestyle', 'white');
         bar.Set('colors', ['Gradient(#4572A7:#66f)','Gradient(#AA4643:white)','Gradient(#89A54E:white)','Gradient(#6ddfc8:white)','Gradient(#f48b04:white)','Gradient(#ecf404:white)']);
         bar.Set('shadow', true);
         bar.Set('shadow.offsetx', 1);
         bar.Set('shadow.offsety', 1);
         bar.Set('shadow.blue', 5);
         bar.Set('hmargin', 5); //márgenes
         bar.Set('gutter.left', 45);
         bar.Set('background.grid.vlines', false);
         bar.Set('background.grid.border', false);
         bar.Set('axis.color', '#ccc');
         bar.Set('noyaxis', true);
         //bar.Set('key', divisiones);
         bar.Set('key', ['Pedro', 'Juan','José', '1', '2', '3']);
         bar.Set('key.position', 'gutter');
         bar.Set('key.position.x', bar.canvas.width - 300);
         bar.Set('key.position.y', 20);
         bar.Set('key.colors', ['blue','#c00','#0c0','#1a3','#4d3','#a24']);

         bar.ondraw = function (obj)
         {
             for (var i=0; i<obj.coords.length; ++i) {
                 obj.context.fillStyle = 'white';
                 RGraph.Text(obj.context, 'Verdana', 10, obj.coords[i][0] + (obj.coords[i][2] / 2), obj.coords[i][1] + (obj.coords[i][3] / 2),obj.data_arr[i].toString(),'center', 'center', null,null,null,true);
             }
         }

         bar.Draw();
     }

Any idea??
Thank you very much for your time and help.
Have a nice day!! :-)
Carol
Posted by RGraph support on 6th June 2013
Hi there,

Well - what's the error message? If it's simply not appearin have you included the key library?




Richard, RGraph support
Posted by Carol.Fievet on 12th June 2013
That could be!! I have forgotten to add the key library.

I will add and try again and I'll tell you.

Thanks for your time and help : )
Posted by Carol.Fievet on 13th June 2013
Hi Richard,
Sorry for disturbing you again, but I have a couple of quick questions and I was wondering if you may help me with that.

24.media.tumblr.com/da130415256937e6c2a9e6c5c4b6825c/tumblr_moc3zsbYd81suq6g3o1_1280.png

I need to set up the text above the bar, I don't want to show decimals there.
I'd like to change the color of the text inside the bar, what's the name of this element??

Thanks for your time and help again.
Posted by RGraph support on 13th June 2013
Hi there,

You can specify the decimals with the option chart.labels.above.decimals - and for the text color I'll assume that you're doing something like this:

dev.rgraph.net/demos/bar-stacked.html

In which case you just need to change white to whatever color that you prefer.

And for your zero values - try using null instead. Though I can't quite remember if null support is in the stable version yet - it might be just the beta.




Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Carol.Fievet on 17th June 2013
Hi again Richard!!

Im trying to paint a title on my graph using de library RGraph.drawing.text.js and in a different canvas layer, but I don't know if Im importing the right library for that because it throws me an exception like this:

My code for that:
function pintarTituloGrafico(texto)
     {
             var text = new RGraph.Drawing.Text('titulo',texto)
             .Set('valign', 'bottom')
             .Set('halign', 'center')
             .Set('size', 14)
             .Set('tooltips', ['Example of text'])
             .Set('tooltips.event', 'mousemove')
             .Set('highlight.stroke', 'rgba(0,0,0,0)')
             .Draw();
     }

And this is the exception I get:
24.media.tumblr.com/1e7e18b86e81a9022278f1adb40d1cd8/tumblr_mojffsMun01suq6g3o1_1280.png

Any idea why it's happening??
Posted by RGraph support on 17th June 2013
Hi there,

You appear to be missing the X/Y coordinates at which the text is drawn:


var text = new RGraph.Drawing.Text('cvs', x, y, 'Some text')





Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Carol.Fievet on 5th July 2013
Hi again Richard!!
I could to set up and draw the entire graph thanks your help, but now I have other little question. How can I set the next properties like: font-size, enabled/disabled, color...? I don't know the name of that element. I have been reading on how to section but I couldn't guess which was. Can you give me a hand?

25.media.tumblr.com/3407e10fbf92d6be209e23eb53fdc82d/tumblr_mphf6uXgkx1suq6g3o1_1280.png

Thanks again for your time and help.
Posted by RGraph support on 5th July 2013
Hi there,

Well - it looks a lot like you're doing something like this:

www.rgraph.net/demos/bar-stacked.html

In this case the RGraph.Text() API function is being used to draw the text - so if you're using that function too it's the third argument to the function - which in this case is 10. If you're using the RGraph.Text2() thenyou can set the 'size' property.


Richard, RGraph support

Add a reply

 




« Back to message list
RGraph on social media