The Hbar data is showing in reverse order with the latest library


« 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 Ajit Nath on 7th February 2017
Hi,

I am using RGraph.hbar.js to design a hbar ,it is working fine with previous version of RGraph.hbar.js ,while i am updating same js to latest version it shows data in reverse order.

Previously i had used (RGraph.hbar2014-07-27) js .Kindly please share any working example for this .



Regards
Ajit Nath
Posted by Richard on 7th February 2017
Hi there,

At some point in the past three years the order has obviously been reversed. You can use the arrayReverse() API function to reverse your data and labels like this:

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






Richard
Posted by Ajit Nath on 8th February 2017
Thanks Richard for your help i have one more issue with the latest version of hbar js ,tooltip and hyperlink is not coming on hbar text same is coming in other area but on mouse over on text it is not coming .Can you please help me on this .
Posted by Ajit Nath on 8th February 2017
Hi Rechard thanks for responding my query ,Here is my code i want data will display as per order defined in array .Can you please share piece of code to do same .


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

     <script>
   var myArray = [[73,36,23,12],[12,36,23,12],[12,36,23,12],[12,36,23,12],[12,36,23,12],[12,36,23,12],[12,36,23,12]];
   //myArray.reverse();
         new RGraph.HBar({
             id: 'cvs',
             data: myArray,
   
             options: {
                 grouping: 'stacked',
                 colors: [ '#33CC99', '#b77cd0', '#FFA500', '#B9DCFF', '#FF0000' ],
     scaleZerostart: true,
     labels : {
                             self : ['Install', 'Upgrade', 'Site Revisit', 'Re-Install', 'De-Install', 'Site Survey', 'Other'],
                             above : {
                                 self : true,
                                 decimals : 0,
                                 tickmarks : false
                             },
                             bold : true,
                         },
      
                 tooltips: {
                             self: ['Click for Install Confirmed', 'Click for Install On Site', 'Click for Install Completed', 'Click for Install Suspended', 'Click for Re-Install Confirmed', 'Click for Re-Install On Site', 'Click for Re-Install Completed', 'Click for Re-Install Suspended', 'Click for De-Install Confirmed', 'Click for De-Install On Site', 'Click for De-Install Completed', 'Click for De-Install Suspended', 'Click for Other Confirmed', 'Click for Other On Site', 'Click for Other Completed', 'Click for Other Suspended'],
                             event: 'onmousemove'
                         },
                 linewidth : 2,
                 hmargin : 25,
                 gutter : {
                             left : 75
                 },
     background : {
                             grid : false,
                             color : '#C0C0C0'
                 },
     axis : {
                             color : 'black'
                 },
                 events : {
      click : myClick,
      mousemove : function(e, hBarShape) {
       e.target.style.cursor = 'pointer';
      }
     },
                 xlabels : true,
                 noxtickmarks : false
     //eventsClick: myClick,
                 //eventsMousemove: myMousemove
             }
         }).on('draw', function (obj){
                     obj.context.strokeRect(obj.gutterLeft, obj.gutterTop, obj.canvas.width - obj.gutterLeft - obj.gutterRight, obj.canvas.height - obj.gutterTop - obj.gutterBottom);
                     if(obj.coords.length.toString()==0){
                     RGraph.Text2(obj.context, {
                         font:'Tahoma',
                         'size':10,
                         'x':275,
                         'y':110,
                         'text':"No Record at This Time. Refresh Page for update.",
                         'valign':'center',
                         'halign':'center',
                         'bounding': true,
                         'bounding.fill':'white',
                         'marker': false,
                         'angle': 0
                        });
                     } else {
      
                     for (var i=0; i<=obj.coords.length; i++) {
                         obj.context.fillStyle = 'white';
                         if(obj.data_arr[i]==null){
                             // Do Nothing
                         }
                         else{
                                RGraph.Text2(obj.context, {
                                                    font:'Tahoma',
                                                    'size':10,
                                                    'x':obj.coords[i][0] + (obj.coords[i][2] / 2),
                'y':obj.coords[i][1] + (obj.coords[i][3] / 2),
                'text':obj.data_arr[i].toString(),
                                                    'valign':'center',
                                                    'halign':'center'
                                                   });
                         }
                     }
                   }
                 }).draw();
    
    
  function myMousemove (e, shape)
     {
         return true;
     }

     function myClick (e, hBarShape)
     {
         var index = hBarShape.index;
         //console.log('Index' + index);
   alert('Index' + index);
     }
    </script>
Posted by Richard on 8th February 2017
Hi there,

You can reverse the various arrays like this:





         var data = [[73,36,23,12],[12,36,23,12],[12,36,23,12],[12,36,23,12],[12,36,23,12],[12,36,23,12],[9,36,23,12]];
        
         // Reverse the order of the main array
         data.reverse();
        
         // Go through each sub-array and reverse it
         for (i in data) {
             if (data[i] && typeof data[i].reverse === 'function') {
                 data[i].reverse();
             }
         }
        
         colors = [ '#33CC99', '#b77cd0', '#FFA500', '#B9DCFF', '#FF0000' ].reverse();
         labels = ['Install', 'Upgrade', 'Site Revisit', 'Re-Install', 'De-Install', 'Site Survey', 'Other'].reverse();
         tooltips = ['Click for Install Confirmed', 'Click for Install On Site', 'Click for Install Completed', 'Click for Install Suspended', 'Click for Re-Install Confirmed', 'Click for Re-Install On Site', 'Click for Re-Install Completed', 'Click for Re-Install Suspended', 'Click for De-Install Confirmed', 'Click for De-Install On Site', 'Click for De-Install Completed', 'Click for De-Install Suspended', 'Click for Other Confirmed', 'Click for Other On Site', 'Click for Other Completed', 'Click for Other Suspended'].reverse();







Richard
Posted by Richard on 8th February 2017
Hi there,

> Thanks Richard for your help i have one more issue with the latest version of hbar js
> ,tooltip and hyperlink is not coming on hbar text same is coming in other area but on
> mouse over on text it is not coming .Can you please help me on this .

You can use links in tooltips like this:




tooltips: ['<b>Chrome 18</b>','<b>Chrome 19</b><br /><a href="www.google.com\" target="_blank">Learn more...</a>']






Richard

Add a reply

 




« Back to message list
RGraph on social media