Tricky solution for vertical direction scale on the X axis

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 Zsolt on 28th July 2017
Hi Richard,

I didn't find any proper solution for vertical direction scale so I made one.
Check it, and if you like it, you can publish it.
(You can modify it also if you want to)

Regards,
Zsolt

The code:
<!DOCTYPE html>
<html>
     <head>
         <title>RGraph Test</title>
         <script src="/js/jquery/jquery-3.1.1.min.js"></script>
         <script src="/js/jquery/jquery-ui-1.12.1.custom.min.js"></script>
         <script src="/js/rgraph/RGraph.common.core.js"></script>
         <script src="/js/rgraph/RGraph.common.dynamic.js"></script>
         <script src="/js/rgraph/RGraph.common.annotate.js"></script>
         <script src="/js/rgraph/RGraph.common.context.js"></script>
         <script src="/js/rgraph/RGraph.common.key.js"></script>
         <script src="/js/rgraph/RGraph.common.resizing.js"></script>
         <script src="/js/rgraph/RGraph.common.tooltips.js"></script>
         <script src="/js/rgraph/RGraph.common.effects.js"></script>
         <script src="/js/rgraph/RGraph.common.zoom.js"></script>
         <script src="/js/rgraph/RGraph.drawing.rect.js"></script>
         <script src="/js/rgraph/RGraph.hbar.js"></script>
         <script src="/js/rgraph/RGraph.drawing.xaxis.js"></script>
        
         <script>
         var inp =
             {
                 data : [16949, 2994, 3214, 5604, 1937],
                 colours : ['#3366cc','#dc3912','#ff9900','#109618','#990099'],
                 labels : ['label1', 'label2', 'label3', 'label4', 'label5']
             };

             $(window).on('load', function(){
                 showChart(inp);
             });
            
             function showChart(inp)
             {
                 var data = inp.data;
                 var colours = inp.colours;
                 var labels = inp.labels;
    
                 var canvasObj = $('#cvs');
                 var canvas = document.getElementById('cvs');
    
                 var scaleHeight = false;
                 var scaleArray = [];

                 canvasObj.ready(function()
                 {
                     RGraph.reset(canvas);
    
                     var bar = new RGraph.HBar({
                         id: 'cvs',
                         data: data,
                         options: {
                             variant: 'bar',
                             gutterLeft: 100,
                             gutterRight: 50,
                             gutterBottom: 100,
                             gutterTop: 50,
                             vmargin: 10,
                             backgroundGrid: false,
                             axisColor: '#ffffff',
                             noxaxis: true,
                             shadow: false,
                             colors: colours,
                             colorsSequential: true,
                             backgroundColor: 'rgb(35, 31, 32)',
                             labelsAbove: true,
                             labels: labels,
                             labelsAboveSpecific: data,
                             labelsAboveSize: 12,
                             labelsAboveBackground: 'rgb(35, 31, 32)',
                             xlabels: false,
                             clearto: 'white',
                             textColor: '#ffffff',
                             textSize: 10,
                             textAccessible: true,
                             numyticks: 0
                         }
                     })
                     .on('beforedraw', function (obj)
                     {
                          RGraph.clear(obj.canvas, 'rgb(35, 31, 32)');
                     })
                     .draw();
                    
                     var xaxis = new RGraph.Drawing.XAxis({
                         id: 'cvs',
                         y: canvas.height - bar.get('chart.gutter.bottom'),
                         options: {
                             min: 0,
                             max: bar.max,
                             textAccessible: true,
                             textSize: 10,
                             textColor: '#ffffff',
                             gutterLeft: bar.get('chart.gutter.left'),
                             gutterRight: bar.get('chart.gutter.right'),
                             colors:['#ffffff'],
                             numxticks: 10,
                             scaleFormatter: function(obj, number)
                             {
                                 return 's_c_a_l_e' + number; // the ids of the spans (container of values) get this unique string also
                             }
                         }
                     }).draw();

                     // rotate scale values and fix the x position
                     $.each($('span[id*="s_c_a_l_e"]', canvasObj.parent()), function()
                     {
                         scaleArray.push($(this));

                         var w1 = $(this).width();
                         $(this).text($(this).text().substr(9));
                         var w2 = $(this).width();
                         $(this).css({'left': ($(this).position().left + (w1 - w2) / 2) + 'px', 'top': ($(this).position().top + 10) + 'px'});
                         $(this).addClass('horizontal-bar-chart-vertical-scale');
                         if (scaleHeight === false || scaleHeight < $(this).height())
                         {
                             scaleHeight = $(this).height();
                         }
                     });
                    
                     // fix the y postion based on the longest value
                     $.each(scaleArray, function()
                     {
                         $(this).css({'top': (parseInt($(this).css('top'), 10) - ((scaleHeight - $(this).height()) / 2) + 5) + 'px'});
                     });
                 });
             }
         </script>
        
         <link rel="stylesheet" type="text/css" href="/styles/jquery/jquery-ui-1.12.1.custom.min.css"></link>

         <style>
             .content {
                 width: 600px;
                 height: 600px;
                 background: rgb(35, 31, 32);
             }

             .horizontal-bar-chart-vertical-scale {
                 transform: rotate(90deg);
                 -webkit-transform: rotate(90deg);
                 -moz-transform: rotate(90deg);
                 -o-transform: rotate(90deg);
                 letter-spacing: 1px; /* less blurry when using small fonts */
             }
         </style>
     </head>
     <body>
         <div class="content">
             <canvas id="cvs" width="600" height="600">[No canvas support]</canvas>
         </div>
     </body>
</html>


Posted by Richard on 28th July 2017
Hi there,

Thanks, but it'll be easier if I add textAngle to the HBar. I'll do that for 4.63


Richard
Posted by Zsolt on 28th July 2017
Hi,

Yep, that's would be much better :)
If You have time and you think so, can you add a class to every text type labels and scales (different by types, ie rgraph-axis-label rgraph-above-label etc),
so the users could add their own css.

A question: are the new versions backward compatible, or if I update can it cause any issues?

Thanks for your work.

Regards,
Zsolt
Posted by Richard on 28th July 2017
Hi there,

> A question: are the new versions backward compatible, or if I update can it cause any issues?

New versions should be as BC as possible. I maintain an information page about this here:

www.rgraph.net/canvas/docs/backwards-compatibility.html

So yes - you should be able to upgrade without too many problems. Remember to update all libraries when you do choose to upgrade though - ie don't use a common library from one version and a chart library from another.

Richard

Add a reply




« Back to message list