The Line charts textAngle property is not working

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« 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 RK on 4th August 2016
I am trying to use the textAngle property for a line chart. I have added the following libraries in the code.


RGraph.common.core.js
RGraph.common.key.js
RGraph.common.dynamic.js
RGraph.common.tooltips.js
RGraph.drawing.text.js
RGraph.drawing.xaxis.js
RGraph.line.js

I am using version 4.55.

code is copied below-

var line = new RGraph.Line({
                     id: 'cvs',
                     data: data,
                     options: {
                         title: 'Test Report',
                         labels: labels,
                        
                         textAngle: 45,

                         key: ['Value1', 'Value2', 'Value3', 'Value4'],
                         keyPositionGraphBoxed: true,
                         keyPositionX: 670,
                         keyPositionY: 100,
                         textSize: 9,
                       
                         gutterLeft:75,
                         gutterRight: 150,
                         titleXaxis : 'Months',
                         titleYaxis : 'Totals',
                         titleYaxisPos: 0.15,
                         titleXaxisPos: -1.25,
                         textAccessible: true
                     }
                 }).draw();
Posted by Richard on 4th August 2016
Hi,

To use angled text you'll need to set the textAccessible property to false - currently angled text is only supported with native canvas text:

...
textAccessible: false,
...


Richard
Posted by Berjawi on 8th December 2016
hello,
You can use textAccessible for DOM and then rotate label using CSS instead of textAngle.

Here's my solution:

<!DOCTYPE html >
<html>
<head>
</head>
<body>
     <script src="../js/RGraph.common.core.js" ></script>
     <script src="../js/RGraph.line.js" ></script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
     <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

     <script>
      var activityName = ["Formulaire d'\u00e9valuation - Initiation","Pr\u00e9requis 1\u00e8re partie - L'\u00e9pargne salariale, vrai relais de croissance","Pr\u00e9requis 2\u00e8me partie - L'\u00e9pargne salariale : comment cela fonctionne ?","Pr\u00e9requis 3\u00e8me partie - Les questions cl\u00e9 pour la mise en place de plans d'\u00e9pargne salariale"];
      var value = [75,90,85,80];
      var mychart = new RGraph.Line({
         id: 'cvs',
         data: [value],
         options: {
             textAccessible: true,
      ymin: 0,
      ymax: 100,
             ylabelsCount: 10,
             backgroundGridAutofitNumhlines: 10,
             colors: ['rgba(151,201,1,1)','rgba(174,181,229,1)', 'rgba(255,93,93,1)'],
             hmargin: 15,
             backgroundGridVlines: false,
             backgroundGridBorder: false,
             gutterBottom: 70,
             tickmarks: 'filledsquare',
             labels: ["Activit\u00e9 1","Activit\u00e9 2","Activit\u00e9 3","Activit\u00e9 4"],
         }
     }).draw();
     
      $(document).ready(function()
     {
      //Show real activityName onmouseover labels
       $( document ).tooltip();
      //find labels that has 'Acitivit_' in its id
       $('span').each(function() {
        var id = $(this).attr('id');
        if (id && id.includes('Activit_'))
        {
          var index = id.split('Activit_');
          index = index[1].split('_') ;
          index = index[0];
          //find the real title
          $(this).attr('title', activityName[index -1]);
          //css cursor
          $(this).css('cursor', 'pointer');
          //css rotate span
          $(this).css('-webkit-transform', 'rotate(-60deg)');
          $(this).css('-moz-transform', 'rotate(-60deg)');
          $(this).css('transform', 'rotate(-60deg)');
          $(this).css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)');
          $(this).css('margin-top','25px');
          $(this).css('margin-left','-20px');
        }
       });
      });
     </script>
</body>
</html>

Berjawi
Posted by Richard on 8th December 2016
Hi,

Thanks. I knew about CSS transforms, but just hadn't got around to addinf it in. I'll look into it for the next release though.



Richard
Posted by Richard on 31st December 2016
Hi there,

Ok I've added this, here's the changelog entry:



Added angled accessible text to the canvas libraries. This should be
considered BETA quality code at the moment, but it seems to be OK.
You may need to use the labelsOffsety when using this option -
particularly if you have multi-line text.

It will be a part of the next stable release.




Richard

Add a reply




« Back to message list