When you click the mouse with dynamic.js included it's causing an "this.canvas is null" type error


« 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 Stuart Andrews on 29th March 2017
Hi Richard,

When I include the "dynamic" javascript file, am getting the following TypeError when you click the mouse on the graph:

"this.canvas is null"

Which then expands into:

RGraph.Drawing.Rect
<anonymous>
RG.FireCustomEvent
RG.Redraw
RG.InstallCanvasMousedownListener/obj.canvas.rgraph_mousedown_event_listener

imgur.com/XrBTzV2

Any thoughts?
Posted by Richard on 29th March 2017
Hi there,

Well the closest line to that is:

this.canvas = document.getElementById(this.id);

which would suggest that you have the canvas ID wrong.



Richard
Posted by Stuart Andrews on 30th March 2017
Hi Richard,

That's the thing. I haven't actually done anything different in my graph. It displays fine _until_ a mouseclick.

But there's no code (that I've written) to interact with a mouseclick. Only adding .dynamic.js to the includes.

Will have another look-see. Thanks.
Posted by Stuart Andrews on 30th March 2017
So for example, the following code is a pie graph that when you left-right (any) mouseclick on it, it disappears with the error.

--

//<![CDATA[
$(document).ready(function() {
var graph_ZH890 = new RGraph.Pie({
id: "canvas_2AJ5T",
data: [5,5,11],
options: {
colors: ["#0207EEDE","#B3271722","#855CD6AA"],
title: "Listings Won",
gutterBottom: 140,
gutterTop: 50,
gutterLeft: 50,
gutterRight: 10,
ylabels: false,
noaxes: true,
textAngle: 70,
labels: ["January","February","March"],
labelsSticksList: true,
tooltips: ["January","February","March"],
labelsAbove: true,
}
}).draw();
});
//]]>

--
Posted by Richard on 30th March 2017
Hi there,

I took some unnecessary configuration out, made sure the correct libraries are included and it appears to work fine:

www.rgraph.net/fiddle/view.html/new-pie-chart-isdsue





Richard
Posted by Stu Andrews on 19th April 2017
Hi Richard,

Have been able to narrow down the issue.

Am sure you'll know the _why_ (I don't!), but in the following code, the .Rect() declaration is causing the graph to disappear when mouse-clicked on it.

If it is taken out you can click away and it's fine and dandy.

--


   //<![CDATA[
   $(document).ready(function() {
     var graph_E5ZNV_Outer = new RGraph.Bar({
       id: "canvas_S0XDK",
       data: [[14],[7],[4],[7],[0]],
       options: {
         colors: ["#DDDDDD"],
         backgroundGrid: false,
         backgroundGridVlines: false,
         backgroundGridBorder: false,
         shadow: false,
         ymax: 14,
         ylabels: false,
         noaxes: true,
         gutterBottom: 140,
         gutterTop: 50,
         gutterLeft: 50,
         gutterRight: 10,
       }
     });
     var graph_E5ZNV_Inner = new RGraph.Bar({
       id: "canvas_S0XDK",
       data: [[2],[1],[1],[2],[0]],
       options: {
         colors: ["#E80CD8"],
         backgroundGrid: false,
         backgroundGridVlines: false,
         backgroundGridBorder: false,
         shadowOffsetx: 1,
         shadowOffsety: 1,
         shadowBlur: 10,
         ymax: 14,
         ylabels: false,
         noaxes: true,
         gutterBottom: 140,
         gutterTop: 50,
         gutterLeft: 50,
         gutterRight: 10,
         labelsAbove: true,
         grouping: "stacked",
         textAccessible: false,
         hmargin: 20,
         labelsAboveDecimals: 0,
         textAngle: 70,
         labels: ["DHU, CCO, SCA","ILU, KFO","JMA","MKA","SHH"],
         title: "Listings Won",
         titleY: 10,
       }
     });
     graph_E5ZNV_Inner.on("draw", function(obj) {
       var vTextYPos = 40;
       for (var i=0; i < obj.coords.length; i++) {
         obj.context.fillStyle="black";
         var dataOuter = graph_E5ZNV_Outer.data;
         var vOuterVal = dataOuter[i];
         var vTextVal = obj.data_arr[i].toFixed(0);
         if (vOuterVal > 0) { vTextVal += "/" + vOuterVal; };
         var text1_E5ZNV_Inner = RGraph.Text2(obj.context, {
           x: obj.coords[i][0] + (obj.coords[i][2]/2),
           y: vTextYPos,
           text: vTextVal,
           size: 10,
           valign: "center",
           halign: "center",
           bounding: true,
           boundingFill: "white",
           marker: false,
           angle: 0
         });
         var rect1_E5ZNV_Inner = new RGraph.Drawing.Rect({
           id: "canvas_S0XDK",
           x: text1_E5ZNV_Inner.x,
           y: text1_E5ZNV_Inner.y,
           width: text1_E5ZNV_Inner.width,
           height: text1_E5ZNV_Inner.height,
           options: {
             fillstyle: "rgba(0,0,0,0)",
             highlightFill: "rgba(0,0,0,0)",
             highlightStroke: "rgba(0,0,0,0)"
           }
         }).draw();
       }
     });
     var graph_E5ZNV_Main = new RGraph.CombinedChart(graph_E5ZNV_Outer,graph_E5ZNV_Inner);
     graph_E5ZNV_Main.draw();
   });
   //]]>

--

Am happy that I can take out the rectangle code (not sure why I put it in, isn't doing anything productive anyway) and solve the issue!

Wanted to get back to this thread, just in case someone else stumbles over a similar situation.

Thanks!
Posted by Richard on 19th April 2017
Hi there,

Thanks for coming back to me - you don't appear to be using dynamic features - so are you including the RGraph.common.dynamic.js file? If so, and you're indeed not using dynamic features, then not including the dynamic file may help too.





Richard
Posted by Stu Andrews on 19th April 2017
Yup, I do include the dynamic.js file.

There's a graph that sits next to this combined one (I was testing _without_ it, because the issue manifested just with this), it's a pie graph that uses one or more of the dynamic features (can't remember off the top of my head, am not working at the moment).

So I do need dynamic.js.

But from memory, a while back when testing, if I took out the dynamic.js include, and the bits in the other graph using it, then yeah, the issue went away.

Cheers!

Add a reply

 




« Back to message list
RGraph on social media