Does the Horizontal Bar chart support having an offset Y axis?


« 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 Matthew on 27th October 2017
Hi I'm Your product commercial-licence customer. I meet problem with rgraph. I will explain as clear as possible.

i.stack.imgur.com/blrsT.png
If I don't use range I recceive something more similirat to true. how it looks without range xmin and xmax

i.stack.imgur.com/GsthV.png
I want to get something like this but in hbar (where axis is placed asimetrical - relative to given range)


www.rgraph.net/demos/bar-offset-x-axis.html
That explain how axis shold be placed



code (without including script ect..)

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

<script>
$(document).ready(function() {
   var bar2 = new RGraph.HBar({
     id: 'cvs2',
     data: [
       [442594, -1960, 440634],
       [324666, -8681, 315985],
       [561606, -33350, 528255],
       [558626, -19069, 539557],
       [252991, -8953, 244037],
       [53220, -2430, 50789],
       [3122, -8367, -5245],
       [29740, -17024, 12715],
       [0, -17365, -17365],
       [10947, -11772, -825],
       [29535, -48110, -18574]
     ],
     options: {
       linewidth: 0,
       vmargin: 3,
       shadow: false,
       textAccessible: true,
       scaleZerostart: true,
       xmin: -60000,
       xmax: 1000000,
       key: {
         self: ['leb1', 'leb2', 'leb3'],
         interactive: true
       },
       labels: {
         self: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'],
         above: {
           size: 9,
           self: false,
           color: 'gray'
         }
       },
       'text.color': '#fff',
       'axis.color': '#fff',
       labelsBold: true,
       background: {
         grid: {
           color: 'rgba(150,150,150,0.7)',
           autofit: {
             numvlines: 12
           }
         }
       },
       gutter: {
         left: 165,
         right: 50,
         bottom: 120
       },
       backgroundGridVlines: false,
       backgroundGridBorder: false,
       colors: ['#94f776', '#fe783e', '#99f'],
     }

   }).draw();
}); //end jQuery
</script>
Posted by Richard on 27th October 2017
Hi there,

> I'm Your product commercial-licence customer.

Thank you - but RGraph as a business didn't work out so instead of letting it die a cold, lonely death I made it Open Source and it's now MIT licensed.

Regarding your issue, I think what you're referring to is an offset axis for the HBar. The canvas HBar chart doesn't support this but the SVG HBar chart does. Here's two demos that demonstrate it (as you can see design is most definitely not my strong suit!).

www.rgraph.net/demos/svg-hbar-dark.html
www.rgraph.net/demos/svg-hbar-min-regular.html

Richard
Posted by Matthew on 27th October 2017
Richard but what about this ?

www.rgraph.net/demos/bar-offset-x-axis.html
Posted by Richard on 27th October 2017
Hi there,

That's the canvas Bar chart - which supports having an offset X axis. The canvas HBar chart on the other hand doesn't support having an offset axis though.

Richard
Posted by Matthew on 27th October 2017
I didn't mention that I used before simple Bar, and received the same problem.
Posted by Richard on 27th October 2017
Hi there,

What? Your images and code samples use the HBar...

Richard
Posted by Matthew on 27th October 2017
Yes. But befor I use Bar method, and I had the same problem. (of course then I have ymin, and ymax)
Posted by Richard on 27th October 2017
Hi there,

Ok here is your code after I made a few modifications to it:

www.rgraph.net/fiddle/view.html/hbar-example

Is the problem that the bars don't start at 0? If so, that's because the HBar doesn't support having an offset axis. It only supports having the X axis on the left, the right or in the center.

If you need the axis in an offset position you'll need to use the SVG HBar chart.

Richard
Posted by Matthew on 30th October 2017
Yes that looks exactly the same. Only solution is svg ?
Posted by Richard on 30th October 2017
Hi there,

Yes. Here's your chart in SVG after a few tweaks using your code:

www.rgraph.net/fiddle/view.html/hbar-example

Richard
Posted by Matthew on 30th October 2017
Ok. Thanks. And last question. How make it responsive ?
Posted by Richard on 30th October 2017
Hi there,

Well the SVG charts have had a tweak applied to them which is not released yet but as of the next version you'll be able to use script (ie the window.onresize event) to change things.

This example will work when the next version is released:

www.rgraph.net/fiddle/view.html/new-rgraph-example-testing-responsive-svg

Richard
Posted by Matthew on 30th October 2017
But why I just can't redraw this again ?
Posted by Richard on 30th October 2017
Hi there,

The width and height are calculated in the constructor currently. That's now been moved to the .draw() function so that they're calculated on every redraw.

Richard
Posted by Matthew on 30th October 2017
How can I acces to constructor ?
Posted by Matthew on 30th October 2017
And what about these error logs ?

RGraph.svg.common.core.js:183 Error: <text> attribute y: Expected length, "NaN".
RG.SVG.create @ RGraph.svg.common.core.js:183
RG.SVG.text @ RGraph.svg.common.core.js:2037
RG.SVG.drawTitle @ RGraph.svg.common.core.js:2858
RG.SVG.drawBackground @ RGraph.svg.common.core.js:1150
draw @ RGraph.svg.hbar.js:429
(anonymous) @ index.php?co=centrala&akcja=wyszukiwarka_wiecej&kontrahent=143752&platnik=14400:2185
dispatch @ jquery-1.8.2.min.js:2
h @ jquery-1.8.2.min.js:2
8RGraph.svg.common.core.js:183 Error: <text> attribute x: Expected length, "undefined".


I use jquery event hendler for resize.
Posted by Richard on 30th October 2017
Hi there,

The constructor runs when you first create the object.

And I've never used the jQuery resize handler. Maybe you're resizing the SVG tag too small and RGraph doesn't like it.

Richard

Add a reply




« Back to message list