Using Bar chart with group

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 Ruben on 30th April 2014
Hi,

I'm using this example:

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

and i'm trying to do this:

but i have a problema with ".Set('hmargin', 20)".

I would like to do margin every column.

Thanks
Posted by Richard on 30th April 2014
Hi there,

What is it you're trying to do?




Richard
Posted by Ruben on 30th April 2014
This:

www.subirimagenes.com/imagen-sinttulo2-8894913.html

The picture 1 is the result and I want the picture2.

Thanks
Posted by Ruben on 30th April 2014
This is the code (same to the example www.rgraph.net/demos/bar-in-bar.html ):


var data = {}
                 data.shipped = [[8,8],[6,8],[6,8]];
                 data.sold = [[2,1],[1,3],[6,8]];
    
             var bar1 = new RGraph.Bar('id_info_grafico_ventana', data.shipped)
                 .Set('ymax', 24)
                 .Set('gutter.left', 50)
                 .Set('colors', ['rgba(22,167,101,0.7)','rgba(22,167,101,0.7)'])
                 .Set('labels', ['1','2','3'])
                 .Set('labels.above', data.shipped)
                 .Set('title', 'Total cars produced vs sold')
                 .Set('strokestyle', 'rgba(0,0,0,0)')
                 .Draw();
    
             var bar2 = new RGraph.Bar('id_info_grafico_ventana', data.sold)
                 .Set('ymax', 24)
                 .Set('gutter.left', bar1.Get('gutter.left'))
                 .Set('colors', ['#BBB','#BBB'])
                 .Set('noaxes', true)
                 .Set('labels.above', true)
                 .Set('hmargin', 20)
                 .Set('ylabels', false)
                 .Set('background.grid', 0)
                 .Set('strokestyle', 'rgba(0,0,0,0)')
                 .Draw();
Posted by Richard on 30th April 2014
Hi there,

I don't think a grouped bar-in-bar will do what you want - so you may have to fake it. In this example the labels aren't perfectly aligned - but they're pretty close:

www.rgraph.net/fiddle/view/a-grouped-bar-in-bar-chart




Richard
Posted by Ruben on 30th April 2014
Ohh.

Thank's
Posted by Ruben on 30th April 2014
Can I put labels for every column (day1,day2) and labels for every group (.set('labels', ['Fred','','Barney','','Wilma']))?


Fred = day1,day2
Barney = day1,day2
Wilma = day1,day2
Posted by Richard on 30th April 2014
Hi there,

You can use the labels.above option, or perhaps you could use the drawing API X axis object with the color set to transparent so that you just see the text.






Richard
Posted by Ruben on 2nd May 2014
Hi,

thanks.

I put in the bar2 this ".Set('labels', ['1','2','','1','2','','1','2'])" and run it. I put ".Set('xlabels.offset',9)" in the bar1 for the text appear at the bottom, I need to know is the margin bottom from the chart because "9" is the minmium that the text appear good.
Posted by Richard on 2nd May 2014
Hi there,

I can't tell what you're asking - but there is no xlabels.offset for the Bar chart.






Richard
Posted by Richard on 4th May 2014
Hi,

Here's another grouped bar-in-bar chart that is really grouped. Instead of just using null data values it manipulates the margins:

www.rgraph.net/fiddle/view/another-grouped-bar-in-bar-chart
Posted by ruben on 6th May 2014
Hi,

thanks. I'm using the first example, but now I have a warning:

[RGRAPH] Warning: you have a negative bar width. This may be caused by the chart.hmargin being too high or the width of the canvas not being sufficient

How I can to hidden this warning and and fix the hmargin?

This is the result: www.subirimagenes.com/imagen-sinttulo1-8902801.html

Thanks
Posted by Richard on 6th May 2014
Hi

Just reduce the hmargin setting to (eg) 0, 1 or 2.
Posted by Ruben on 7th May 2014
Hi,

It's solved.

I'm doing the first example that you share me:

www.rgraph.net/fiddle/view/a-grouped-bar-in-bar-chart

And I try to add tooltips:

         .Set('tooltips.event', 'mousemove')
         .Set('tooltips', ['tooltip1','tooltip2','tooltip3'])

I see the event mousemove but I don't see the title.

This is the code:

     var bar1 = new RGraph.Bar('csv',data.shipped)
         .Set('ymax', 24)
         .Set('gutter.left', 50)
         .Set('colors', ['Gradient(#16A765:#19BC72:#1EDE86:#1EDE86)'])
         .Set('labels.above', data.shipped)
         .Set('text.color','#16A765')
         .Set('text.size','12')
         .Set('ylabels.count', 6)
         .Set('title',my_title)
         .Set('strokestyle','#138853')
         .Set('linewidth',3)
         .Set('background.grid.autofit.numvlines', 0)
         .set('shadow', true)
         .set('shadow.offsetx', -2)
         .set('shadow.offsety', -2)
         .set('shadow.blur', 15)
         .set('background.color','white')
         .Set('tooltips.event', 'mousemove')
         .Set('tooltips', ['tooltip1','tooltip2','tooltip3'])
         .grow();
      
     var bar2 = new RGraph.Bar('csv',data.sold)
         .Set('ymax', 24)
         .Set('gutter.left', bar1.Get('gutter.left'))
         .Set('colors',['rgba(150,150,150,0.6)'])
         .Set('noaxes', true)
         .Set('labels', my_labels)
         .Set('hmargin', my_hmargin)
         .Set('ylabels', false)
         .Set('background.grid', 0)
         .Set('strokestyle', 'rgba(0,0,0,0)')
         .Set('tooltips.event', 'mousemove')
         .Set('tooltips', ['tooltip1','tooltip2','tooltip3'])
         .grow();

Thanks.
Posted by Richard on 7th May 2014
Hi there,


What are you asking?



Richard
Posted by Ruben on 7th May 2014
Hi,

I'm trying to do this example tooltips:

www.rgraph.net/demos/bar-pie-combined.html

See "Bob on Monday: 50 sales" when mouseover the first column.

In my code don't appear the dialog with the text.

Thanks
Posted by Richard on 7th May 2014
Hi there,

1. Have you included the tooltips library in your page? (RGraph.common.tooltips.js)
2. Check your JavaScript console for an error message.
3. Post a link to an example page.

Richard
Posted by Ruben on 7th May 2014
Hi,

1.- Yes
2.- Any errors.
3.- Its a private page..

I think that the problem is "z-index" for the tooltips.

I have a button for show chart.

When I click the button, I create a div and canvas element inside the div.

When I close the div I see the tooltips below the div.
Posted by Richard on 7th May 2014
Hi there,

Then you can add this CSS:

.RGraph_tooltip {
     z-index: 10 ! important;
}






Richard
Posted by Ruben on 9th May 2014
Hi,

thanks. It's solved.

Last question:

How I can put a pie chart above bar?

Same this example:

www.rgraph.net/demos/bar-pie-combined.html

But I would like put a pie chart for each column, align to column

Thanks
Posted by Richard on 9th May 2014
Hi there,

Yes you can do that - loop through the coords of your Bar chart using them to create and position Pie charts above the bars.

This HOWTO shows a similar concept but with the VProgress so that the bars are "replaced" by VProgress bars:

www.rgraph.net/canvas/docs/howto-create-combined-bar-and-vprogress-bar-charts.html






Richard

Add a reply




« Back to message list