I've made an improvement to drawInGraphLabels

« 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 Anthony Kuma on 4th August 2017
Howdy folk,
I had a slight problem where ingraph labels were somewhat inconsistent in their presentation based on the data I provided to RGraph.Line.
I take individual data arrays that have default(lowest) values of 0. I then use a reverse loop, setting the zeros to '' until I reach a value greater than 0. I then combine all the individual arrays into an array of arrays for rgraph.line.
The lines are present without any problems, but the ingraph label are inconsistent. If I leave the default (lowest) value as zeros, there is NO problem with ingraph labels.
After many 'alerts' trying to figure out what is going on, I realised within 'RGRAPH.COMMON.CORE.JS' the 'Y' coordinates were showing '' (null).
I then tested for a null Y coordinate and set it as 'ca.height-obj.gutterBottom', which now works as expected.
Here is the code I changed, not sure if you want to make it permanent:

* Draws in-graph labels.
* @param object obj The graph object
RG.drawInGraphLabels =
RG.DrawInGraphLabels = function (obj)
     var ca = obj.canvas;
     var co = obj.context;
     var prop = obj.properties;
     var labels = prop['chart.labels.ingraph'];
     var labels_processed = [];
     // Defaults
     var fgcolor = 'black';
     var bgcolor = 'white';
     var direction = 1;
     if (!labels) {
         * Preprocess the labels array. Numbers are expanded
         for (var i=0,len=labels.length; i<len; i+=1) {
             if (typeof labels[i] === 'number') {
                 for (var j=0; j<labels[i]; ++j) {
             } else if (typeof labels[i] === 'string' || typeof labels[i] =
             'object') {
             } else {
         * Turn off any shadow
         if (labels_processed && labels_processed.length > 0) {
             for (var i=0,len=labels_processed.length; i<len; i+=1) {
                 if (labels_processed[i]) {
                     var coords = obj.coords[i];
                     if (coords && coords.length > 0) {
                         var x = (obj.type == 'bar' ? coords[0] + (coords[2] / 2) : coords[0]);
                         var y = (obj.type == 'bar' ? coords[1] + (coords[3] / 2) : coords[1]);
                         var length = typeof labels_processed[i][4] === 'number' ? labels_processed[i][4] : 25;

Posted by Richard on 5th August 2017
Hi there,

Thanks, I'll take a look at it and include it if possible

Posted by Richard on 12th August 2017
Hi there Anthony,

Do you have a basic example chart that shows this?


Posted by Richard on 13th August 2017
Hi there,

OK I've implemented vertical alignment switching for Line chart ingraph labels. So when I release 4.63 have a look at this example:


(Its not there now)

Posted by Enter your name... on 14th August 2017
Thanks dude,

I wasn't too sure if others massaged their raw data like me, or if they were affected.

I appreciate being able to access your code, it allowed me to bludgeon it into submission.

I did notice if I used '-1' I was able to see the arrows pointing to the data position, but not the label.

Do you still want me to provide a chart example?
Posted by Richard on 14th August 2017
Hi there,

> it allowed me to bludgeon it into submission

The code wasn't that bad was it!? :-)

> Do you still want me to provide a chart example?

No it's OK. But you might want to test the next release - be it beta or stable - to see how it works for you.

Posted by Anthony Kuma on 15th August 2017
In the words of Bill and Ted, the code is 'most excellent'. Maybe a better thing to say is ,'it allowed me to scratch an itch'. Having access to the javascript helped pinpoint the exact place of was having trouble with.
If anything, congratulations on some awesome code that has saved me heaps of production time to do other things.

Add a reply

« Back to message list