HBar chart with constant width bars

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 eriksudarshan on 27th June 2016
How can i maintain single bar constant width if i selected 3 bars it should be same width or if i selected more than 20 it should be same width can you please help with an exp.
Posted by Richard on 27th June 2016
Hi there,

You'd need to vary the width of your canvas. If you have 3 bars of 100px wide, no hmargin and a gutter of 25px each side you'd need a canvas of 350px width in total.

But if you want to keep the bars 100px wide and show 6 bars instead, you'd need to increase the width of your canvas to 650px.

There's no setting in RGraph to do this for you but as I just showed you it's easy to work out - and then you can set the width of the canvas like this:




myObj.canvas.width = 650;
RGraph.redraw();








Richard
Posted by eriksudarshan on 27th June 2016
Hi thank you for the quick reply,

here i am using the Rgraph Hbar my data is varied according to the user priority so am also increase the canvas according to the data like below given example.But here i am added the hole canvas div so it's getting scrolling the 1st canvas is showing tooltips,But the second one i mean the added canvas it's scroll down tooltips are showing the bottom of the page how can i solve these problem.
Posted by Richard on 27th June 2016
Hi there,

I can't tell what you're asking - so try posting the address to the page.

Richard
Posted by eriksudarshan on 27th June 2016
jsfiddle.net/g9v0ossz/1/



This is my code,For the Hbar chart i added the canvas it's added successfully but tooltips are not showing properly.it's showing bottom in the page,and is there any alternate solution for this problem is also fine please go trough the code and give me suitable example for this problem.
Posted by Richard on 27th June 2016
Hi there,

Well since you've defined your tooltips as a function, does your tooltips array look like this:

var myTooltips = [
     'Tooltip 1',
     'Tooltip 2',
     'Tooltip 3',
     'Tooltip 4',
     'Tooltip 5',
     'Tooltip 6'
];

Instead you could define your tooltips like this (in your chart configuration):

...
tooltips: myTooltips,
...


And have you included the tooltips and dynamic libraries in you page?

<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.dynamic.js"></script>








Richard
Posted by eriksudarshan on 27th June 2016
I am tried with an static data also if i added scrolling to the canvas tooltips are showing bottom of the page.I added same canvas div shown the code.
Posted by Richard on 27th June 2016
Hi there,

You'll have to post the address to the page so that I can see it.

Richard
Posted by eriksudarshan on 27th June 2016
I am tried with an static data also if i added scrolling to the canvas tooltips are showing bottom of the page.I added same canvas div shown the code.


Simple i added same div it's like appending but tooltips are working for only one i.e first one reaming appending one tooltips are showing bottom of the page.
Posted by eriksudarshan on 27th June 2016
jsfiddle.net/g9v0ossz/1/
find the link
Posted by Richard on 27th June 2016
Hi there,

Put a *working* example of the problem on your website and send me the address to it.

Richard
Posted by eriksudarshan on 27th June 2016
hi,

how can i draw 1500 hbars with the following div.


<canvas id="cvs" width="750" height="350">[No canvas support]</canvas>

So i added condition if the data is more than 50,I get the same element.So tooltips are not showing properly to the second div.It's showing bottom in the page.
Posted by eriksudarshan on 27th June 2016
How can we fix the position of a tooltip on hbar chart ? When we scroll the window, the tooltip also moves with that! I want to keep it fixed at the top of the bar... how can I do that ?



Please Give me Example code
Posted by Richard on 27th June 2016
Hi there,

You can't. Think about how hgh you canvas is - 350 pixels with 50px of gutters leaving 300px of chart area. So for 1500 bars that would be 0.2px per bar. Not enough by far.





Richard
Posted by eriksudarshan on 27th June 2016
How can we fix the position of a tooltip on hbar chart ? When we scroll the window, the tooltip also moves with that! I want to keep it fixed at the top of the bar... how can I do that ?



Please Give me Example code
Posted by Richard on 27th June 2016
Hi there,

You can use some CSS to do that:

.RGraph_tooltip {
     position: fixed;
}


And if you have multiple charts with tooltips on the page you can change the name of the CSS class by doing this in your charts configuration:

...
tooltipsCssClass: 'hbar_chart_tooltips_css',
...



PS You only need to post a single message at a time - I just delete the others.





Richard
Posted by jhonpink on 27th June 2016
I used this fixed position it's not working

please give me some working example code.
Posted by Richard on 27th June 2016
Hi there,

Then you'll have to post an address to an example of the chart.

Richard

Add a reply




« Back to message list