I'm showing multiple Bar charts on my page and only the first one shows up

« 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 Ed on 24th June 2014
I think there is a typo in my bar javascript, I do a loop to generate multiple graphs (4) and only the first one in the order that is generated will display. My guess is I am not properly closing them.

There is an excerpt of the code for two graphs, webp02 will display, webp03 doesn't

         var totalGCtime_webp02 = new RGraph.Bar('events_webp02', [[
                 totalGCtime_webp02.Set('gutter.left', 45)
                 totalGCtime_webp02.Set('colors.sequential', true)
                 totalGCtime_webp02.Set('colors', '#0f0', '#00f', '#ff0', '#0ff')
                 totalGCtime_webp02.Set('title', 'Events - webp02 + Pause Time (seconds)')
                 totalGCtime_webp02.Set('tooltips.event', 'mousemove')
                 totalGCtime_webp02.Set('tooltips', ['0','0','0','0','0','0','0','0','0','0','0','0','0','1','0','0','0','0','0','0','0','0','0','0'])
                 totalGCtime_webp02.Set('labels.above', true)
                 totalGCtime_webp02.Set('labels.above.decimals', 1)
                 totalGCtime_webp02.Set('linewidth', 2)
                 totalGCtime_webp02.Set('scale.decimals', 1)
                 totalGCtime_webp02.Set('hmargin', 15)
                 totalGCtime_webp02.Set('ymax', 300)
         var totalGCtime_webp03 = new RGraph.Bar('events_webp03', [[
                 totalGCtime_webp03.Set('gutter.left', 45)
                 totalGCtime_webp03.Set('colors.sequential', true)
                 totalGCtime_webp03.Set('colors', '#0f0', '#00f', '#ff0', '#0ff')
                 totalGCtime_webp03.Set('title', 'Events - webp03 + Pause Time (seconds)')
                 totalGCtime_webp03.Set('tooltips.event', 'mousemove')
                 totalGCtime_webp03.Set('tooltips', ['0','0','0','0','0','0','0','0','0','0','0','0','0','1','0','0','0','0','0','0','0','0','0','0'])
                 totalGCtime_webp03.Set('labels.above', true)
                 totalGCtime_webp03.Set('labels.above.decimals', 1)
                 totalGCtime_webp03.Set('linewidth', 2)
                 totalGCtime_webp03.Set('scale.decimals', 1)
                 totalGCtime_webp03.Set('hmargin', 15)
                 totalGCtime_webp03.Set('ymax', 300)
Posted by Richard on 25th June 2014
Check your JavaScript console for an error message. This line is definitely wrong (missing square brackets around the colors):

totalGCtime_webp03.Set('colors', '#0f0', '#00f', '#ff0', '#0ff')

Posted by Ed on 26th June 2014
That was it, thanks Richard!
Posted by Ed on 26th June 2014
I spoke too soon, I condensed the amount of data for each graph and I am still seeing only the first one in the list (appp02).

         var data_appp02=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,.180,.180,0];
         var totalGCtime_appp02 = new RGraph.Bar('gc_event_appp02', data_appp02)
         var data_webp01=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
         var totalGCtime_webp01 = new RGraph.Bar('gc_event_webp01', data_webp01)
         var data_webp02=[0,0,0,0,0,0,0,0,0,0,.225,0,0,0,0,0,0,0,0,0,0,0,0,0];
         var totalGCtime_webp02 = new RGraph.Bar('gc_event_webp02', data_webp02)
         var data_appp01=[0,0,.236,0,0,.204,0,.168,0,0,0,0,0,.216,0,0,0,0,0,.232,0,0,0,0];
         var totalGCtime_appp01 = new RGraph.Bar('gc_event_appp01', data_appp01)

The console output:
Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. requestNotifier.js:63
SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:4
Error: example.net:8880/lib/jquery.min.js is being assigned a //# sourceMappingURL, but already has one
TypeError: this.canvas is null RGraph.bar.js:28

I have all my RGraphs in one function, there are three other RGraph that work, scatter / Bar + Line :

window.onload = function ()

I removed the above RGraph.Bar vars and the 'this.canvas is null' above doesn't display. So, I know it is with these graphs vars
Posted by Richard on 27th June 2014
This line:

TypeError: this.canvas is null RGraph.bar.js:28

Says that it can't find the canvas tag - you've given the wrong canvas ID. For example in this tag:

<canvas id="blah" width="600" height="200"></canvas>

The ID is 'blah'.

Posted by Ed on 27th June 2014
I knew it was a BEBKAC issue, thanks again.

Add a reply

« Back to message list