Bug fix submission

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 James Parsons on 14th July 2014
Hi Richard,

I am beginning the process of tracking down and fixing several bugs in RGraph that I've encountered. Below is a description of the bugs with a screenshot. Below the descriptions is a fix that I am submitting for Bug #1. I have only tested the fix with my code. I am using the current (June 2014) stable version of RGraph 3.


A screenshot demonstrating the bugs is here: www.jparsons.net/rgraph-bugs.png

The RGraph bugs I'm experiencing are as follows:

1) When using chart.background.grid.autofit, vertical grid lines are not aligning properly with X-axis labels.

2) When using chart.background.grid.autofit, vertical tick marks are not aligning properly with X-axis labels. (Not shown in screenshot.)

3) When using boxplots (scatter), horizontal bars are not aligning properly with Y-axis labels and horizontal grid lines.

4) Occasionally with boxplots, the top and bottom values of the box get swapped. This results in a gain appearing as a loss, and vice versa. These boxplots can be identified visually by the "wick" of the "candle" appearing in the foreground rather than the background. (I have not yet confirmed with certainty that this is an error in RGraph code rather than my code, but it appears to be highly probable.)


Bug fix #1:

Before: www.jparsons.net/rgraph-bugs.png
After: www.jparsons.net/rgraph-bugfix-1.png

Version: RGraph3 2014-06-26 stable

File: RGraph.common.core.js

Line number: 1300

+ if (prop['chart.background.grid.autofit.align']) {
+ var width = (ca.width - gutterRight);
+ var labels = prop['chart.labels'];
+ var numvlines = prop['chart.labels'].length;
+ var max = prop['chart.xmax'];
+ for (i=0; i<numvlines; i++) {
+ var pos = gutterLeft + (labels[i][1]) / max * (width - gutterLeft);
+ co.moveTo(ma.round(pos), gutterTop);
+ co.lineTo(ma.round(pos), ca.height - gutterBottom);
+ }
+ }
+ else if (prop['chart.background.grid.vlines']) {
- if (prop['chart.background.grid.vlines']) {
                      // Draw the vertical lines
                      var width = (ca.width - gutterRight)
                      var vsize = prop['chart.background.grid.vsize'];
Posted by Richard on 15th July 2014
Hi,

Thanks - I'll take a look at adding the changes in. Do you have the src code that generated the chart?





Richard
Posted by James Parsons on 15th July 2014
Hi Richard,

I have bug #3 fixed. Looking at the code, it's actually not a bug in the sense that it's an unintended consequence of the code. But I enhanced the existing implementation. I will submit the change in a few hours, after I write up a description. The change is entirely in RGraph.common.core.js.

Bug #4 turned out to be my fault. Immediately before sending data to RGraph, I was reading it from JSON code. Numbers parsed from the JSON code were being passed to RGraph as strings, rather than numbers. When numbers went from 99 to 100, they were being sorted alphabetically rather than numerically.

Bug #2 is a low-priority fix for me. I am currently avoiding the bug by setting the number of X-axis tick marks to zero. That said, I would like to help fix a problem when I know it exists.


The code that generates the chart is a full web application. The JavaScript source code is currently located at stockcharts.jparsons.net/scripts/javascript/StockChart.js

The JSON-encoded data being passed into RGraph can be seen in the HTML source code at stockcharts.jparsons.net/index.php
Posted by James Parsons on 16th July 2014
Hi Richard,

Here is another bug fix I am submitting.


Bug description: When using autofit, horizontal bars are not aligning properly with horizontal grid lines. When using autofit.align, horizontal bars are not aligning properly with y-axis labels.

Description of fix: When autofit is false, the previous functionality is retained. When autofit is true, the horizontal bars will align properly with horizontal grid lines. When both autofit and autofit.align are true, the horizontal bars will align properly with both horizontal grid lines and y-axis labels. This change was only tested with my own code.

Before: www.jparsons.net/rgraph-bugfix-1.png
After: www.jparsons.net/rgraph-bugfix-3.png

Version: RGraph3 2014-06-26 stable
File: RGraph.common.core.js
Line: 1215


Previous code:

     co.fillStyle = prop['chart.background.barcolor1'];
     co.strokeStyle = co.fillStyle;
     height = (ca.height - gutterBottom);

     for (var i=gutterTop; i<height ; i+=80) {
         co.fillRect(gutterLeft, i, ca.width - gutterLeft - gutterRight, ma.min(40, ca.height - gutterBottom - i) );
     }

     co.fillStyle = prop['chart.background.barcolor2'];
     co.strokeStyle = co.fillStyle;
     height = (ca.height - gutterBottom);

     for (var i= (40 + gutterTop); i<height; i+=80) {
         co.fillRect(gutterLeft, i, ca.width - gutterLeft - gutterRight, i + 40 > (ca.height - gutterBottom) ? ca.height - (gutterBottom + i) : 40);
     }



New code:

     // Set the default horizontal size for the background bars
     var hsize = 80;
     var halfHsize = 40;

     // This section ensures that horizontal background bars
     // align with the background grid when autofit is enabled.
     if (prop['chart.background.grid.autofit']) {
         // If only autofit is true, set background bars to fit the numhlines
         var numHLines = prop['chart.background.grid.autofit.numhlines'];
        
         if (prop['chart.background.grid.autofit.align']) {
             // If both autofit and autofit.align are true, set background bars to fit the ylabels
             numHLines = prop['chart.ylabels.count'];
         }
        
         // Avoid division by zero
         if (numHLines > 0) {
             // Calculate the autofit height of the background bars
             hsize = ((ca.height - gutterTop - gutterBottom) / numHLines);
             halfHsize = hsize / 2.0;
         }
     }

     // Draw the first bar
     co.fillStyle = prop['chart.background.barcolor1'];
     co.strokeStyle = co.fillStyle;
     height = (ca.height - gutterBottom);

     for (var i=gutterTop; i<height ; i+=hsize) {
         co.fillRect(gutterLeft, i, ca.width - gutterLeft - gutterRight, ma.min(halfHsize, ca.height - gutterBottom - i) );
     }

     // Draw the second bar
     co.fillStyle = prop['chart.background.barcolor2'];
     co.strokeStyle = co.fillStyle;
     height = (ca.height - gutterBottom);

     for (var i= (halfHsize + gutterTop); i<height; i+=hsize) {
         co.fillRect(gutterLeft, i, ca.width - gutterLeft - gutterRight,
             i + halfHsize > (ca.height - gutterBottom) ? ca.height - (gutterBottom + i) : halfHsize);
     }
Posted by Richard on 31st July 2014
Hi,

I've made a few changes to the grid code and you'll be able to try in the next beta. Keep in mind though that autofit doesn't do everything - you will still have to use other properties in conjunction with autofit. Here's some example code:


var scatter = new RGraph.Scatter({
     id: 'cvs2',
     data: [[10,10],[20,20],[30,30],[40,40],[50,50]],
     options: {
         xmax: 50,
         background: {
             barcolor1: '#cfc',
             barcolor2: '#fcc',
             grid: {
                 autofit: {
                     self: true,
                     align: true
                 }
             }
         },
         labels: [['May',0],['Jun',10], ['Jul',20], ['Aug',30], ['Sep',40]],
         ylabels: {
             count: 7
         },
         ymax: 70,
         numyticks: 7
     }
}).draw()





Richard
Posted by James Parsons on 3rd August 2014
Thank you. I'll try it out when the next beta becomes available.

Add a reply




« Back to message list