Trying to show negative values in an SVG HBar 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 Jan Dirk on 23rd January 2017
Hello,

I try to create a horizontal barchart with negative values, but it looks like the chart is not displayed correctly.

E.g. I adapted the svg-hbar-basic.html demo, where the values are negated:

<html>

<head>
   <script src="RGraph.svg.common.core.js"></script>
   <script src="RGraph.svg.bar.js"></script>
</head>

<body>
   <div id="chart-container" style="width: 450px; height: 500px" />

   <script>
     // Some data that is to be shown on the HBar chart. To show a stacked or grouped chart
     // each number should be an array of further numbers instead (as below).
     var data = [-280,-45,-133,-152,-278,-221,-56];

     // An example of the data used by stacked and grouped charts
     // var data = [[1,5,6], [4,5,3], [7,8,9], [4,7,7], [9,6,5], [5,2,3], [4,8,6]]

     new RGraph.SVG.HBar({
         id: 'chart-container',
         data: data,
         options: {
             yaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
             xaxisMax: -45,
             xaxisMin: -280,
         }
     }).draw();
</script>
</body>

</html>

This does not show the bars...

Regards,

Jan Dirk
Posted by Jan Dirk on 23rd January 2017
Also,

The example below has min-value -280 and max-value 0 (actual max-value is -45), but the x-axis shows
-280 -224 -448 -671 -895 -1119

instead of
-280 -224 -168 -112 -56 0

<html>

<head>
   <script src="RGraph.svg.common.core.js"></script>
   <script src="RGraph.svg.bar.js"></script>
</head>

<body>
   <div id="chart-container" style="width: 450px; height: 500px" />

   <script>
     // Some data that is to be shown on the HBar chart. To show a stacked or grouped chart
     // each number should be an array of further numbers instead (as below).
     var data = [-280,-45,-133,-152,-278,-221,-56];

     // An example of the data used by stacked and grouped charts
     // var data = [[1,5,6], [4,5,3], [7,8,9], [4,7,7], [9,6,5], [5,2,3], [4,8,6]]

     new RGraph.SVG.HBar({
         id: 'chart-container',
         data: data,
         options: {
             yaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
             xaxisMax: 0,
             xaxisMin: -280,
             labelsAbove: true,
         }
     }).draw();
</script>
</body>

</html>


Regards,

Jan Dirk
Posted by Richard on 23rd January 2017
Hi there,

Clearly the scale handling for the SVG HBar needs attention.

In the mean time you could do it like this:

www.rgraph.net/fiddle/view.html/an-svg-hbar-chart-showing-negative-values





Richard
Posted by Jan Dirk on 24th January 2017
Hi Richard,

Thanks for the workaround. I hope though that the next version will contain the fix :^)

I also noticed that the labels on the x-axis in this case, the xaxisFormatter is not used neither. Only the most-left label is formatted according the xaxisFormatter. The rest is not.
E.g. when you divide the value by 1000 and append a 'k', then you may get labels like

-50k -40000 -30000 -20000 -10000 0

instead of

-50k -40k -30k -20k -10k 0

Regards,

Jan Dirk
Posted by Richard on 24th January 2017
Hi there,

Are you talking about the example that I just gave you? In that example the xaxisFormatter is being used to add the "-" to the numbers; except for zero.




Richard
Posted by Jan Dirk on 24th January 2017
Hi Richard,

Here's an example showing the xaxisFormatter issue:

The labels shown are:

-2400k -1920000 -3840000 -5759999 -7679999 -9599999

<html>
<head>
   <script src="RGraph.svg.common.core.js"></script>
   <script src="RGraph.svg.bar.js"></script>
</head>
<body>
   <div id="chart-container" style="width: 650px; height: 500px" />
   <script>
     var data = [-212.23082749479266, -2529.2243583229592, -40366.27517993753, -2174164.4335108483];
     new RGraph.SVG.HBar({
         id: 'chart-container',
         data: data,
         options: {
             yaxisLabels: ['First', 'Second', 'Third', 'Fourth'],
             xaxisMax: 0,
             xaxisMin: -2400000,
             labelsAbove: true,
             xaxisFormatter: function(obj, num)
              {
                  return (num / 1000) + 'k';
                  }
              }
     }).draw();
</script>
</body>
</html>
Posted by Richard on 24th January 2017
Hi there,

This should be resolved in the next release - I've made this example: www.rgraph.net/fiddle/view.html/hbar-svg-example which doesn't work, but does work on my dev site - so again this should be resolved for the next release.




Richard
Posted by Jan Dirk on 24th January 2017
Great, thank you very much Richard.

Regards,
Jan Dirk
Posted by Richard on 24th January 2017
Hi there,

Ok when I've released the next beta could you try the code from this example with it:

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

The example won't work, but you can copy the code and then use it with the beta libraries on your own PC.






Richard
Posted by Jan Dirk on 24th January 2017
I'm looking forward and thanks,

Jan Dirk

Add a reply




« Back to message list