Canvas not working on Chrome or IE


« 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 Justin Wagner on 30th October 2013
When we first starting using the RGraph libraries they worked perfect on Chrome, now (only a few months later) they don't draw at all on Chrome or IE, however they do work on Firefox.

Here is what I'm trying to do, anyone have any ideas?


     <canvas id="cvs" style="background-color: rgb(233, 233, 233); margin-top: 0px; opacity: 0; cursor: default;" width="1020" height="450"></canvas>
<script>

         var regression_id = new Array('554','559','561');
         var bar = new RGraph.Bar('cvs', [[0,0,4],[0,0,4],[0,0,4]])
             .Set('background.color', '#ffffff')
             .Set('grouping', 'stacked')
             .Set('labels.above', false)
             .Set('ymax', 6)
             .Set('linewidth', 2)
             .Set('strokestyle', 'black')
             .Set('colors', ['Gradient(#FFEA00:white)','Gradient(#F70202:white)','Gradient(#02F723:white)'])
             .Set('shadow', true)
             .Set('ylabels.count', 2)
         .Set('background.grid.autofit.numhlines', 4)
             .Set('shadow.offsetx', 1)
             .Set('shadow.offsety', 1)
             .Set('shadow.blue', 5)
             .Set('hmargin', 7)
             .Set('gutter.left', 30)
             .Set('gutter.right', 30)
             .Set('gutter.top', 60)
             //.Set('variant', '3d')
             .Set('background.grid.vlines', false)
             .Set('background.grid.border', false)
             .Set('axis.color', '#e9e9e9')
             .Set('noyaxis', true)
             .Set('key', ['Unknown','Failed','Passed'])
             .Set('key.position', 'gutter');
         bar.Set('key.position.x', 775)
             .Set('key.position.y', 25)
             .Set('key.colors', ['FFEA00','#F70202','#02F723'])
        
             .ondraw = function (obj)
             {
                 for (var i=0; i<obj.coords.length; ++i) {
                     obj.context.fillStyle = 'black';
                     if (obj.data_arr[i].toString() != '0' ) {
                         RGraph.Text(obj.context, 'Arial', 10, obj.coords[i][0] + (obj.coords[i][2] / 2), obj.coords[i][1] + (obj.coords[i][3] / 2),obj.data_arr[i].toString(),'center', 'center', null,null,null,true);
                     }
                 }
                 RGraph.Text(obj.context, 'Verdana', 12, 510, 25,'Simulation History','center', 'center', null,null,null,true);
             }

         //RGraph.Effects.Bar.Wave(bar, {'duration': 150});
         RGraph.Effects.Fade.In(bar);
         //RGraph.Effects.Bar.Grow(bar, {'duration': 150});
         //bar.Draw();

         bar.canvas.onmouseout = function (e)
         {
             // Hide the tooltip
             RGraph.HideTooltip();
            
             // Redraw the canvas so that any highlighting is gone
             RGraph.Redraw();
         }
</script>
Posted by RGraph Support on 30th October 2013
Hi there,


Your code seems to work fine> Note that specifying the height and width should be done with the HTML attributes - not CSS. Though I doubt that that would stop things working.

www.rgraph.net/fiddle/view/a-bar-chart-using-green-gradients


Richard, RGraph Support
Please remember to link to the RGraph website

Help support RGraph - single site license only £99
    www.rgraph.net/license#single-site
Posted by Justin Wagner on 30th October 2013
Have you fixed something in your libraries since 7/18/13 that could have fixed this? We are using the libraries from that date.
Posted by Justin Wagner on 30th October 2013
I'll answer my own question. Apparently something was fixed since 7/18/13 to deal with whatever changed in Chrome.

I've updated and it's working now.

Thanks for verifying this for me.

Add a reply

 




« Back to message list
RGraph on social media