Second chart not being created when there's multiple canvas tags on the page


« 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 Frank on 11th June 2016
Good afternoon,

I am attempting to display multiple graphs on one page using multiple canvas elements. I have given each canvas a unique id and targeted it correctly in the javascript code. Also one graph is a pie graph and the other is a bar graph. I have ensured to include all js libraries for both chart types as they will work separately or the second one on the page will show up and the first is hidden when trying them together. Here is some code.

Chart 1 - Pie (The php elements work fine as the chart shows up when the second one is commented out)
             <div class="chart">
                <?php
                 $lessonsAssignedNotStarted = ($report['assignedLessons'] - ($report['startedLessons'] != null ? $report['startedLessons'] : 0 ));
                 $lessonsStarted = ($report['startedLessons'] != null ? $report['startedLessons'] : 0 );
                 $lessonsCompleted = ($report['completedLessons'] != null ? $report['completedLessons'] : 0 );
                 ?>
                 <canvas id="cvs-systemUse" width="550" height="250"> [No canvas support] </canvas>
                 <script>
                     window.onload = function ()
                     {
                         var data = [<?php echo $lessonsAssignedNotStarted .",". $lessonsStarted .",". $lessonsCompleted; ?>];
                         var labels = ['Lessons Assigned','Lessons Started','Lessons Completed'];

                         for (var i=0; i<data.length; ++i) {
                             labels[i] = labels[i] + ', ' + data[i];
                         }

                         var pie = new RGraph.Pie({
                             id: 'cvs-systemUse',
                             data: data,
                             options: {
                                 labels: labels,
                                 tooltips: labels,
                                 colors: ['#EC0033','#A0D300','#FFCD00','#00B869','#999999','#FF7300','#004CB0'],
                                 strokestyle: 'white',
                                 linewidth: 0,
                                 shadowOffsetx: 2,
                                 shadowOffsety: 2,
                                 shadowBlur: 3,
                                 exploded: 0,
                                 textAccessible: true
                             }
                         }).draw();
                     };
                 </script>


Chart 2 - Bar

                 <canvas id="cvs-testScoresOverall" width="550" height="250"> [No canvas support] </canvas>
                 <script>
                     window.onload = function ()
                     {
                         var bar = new RGraph.Bar({
                             id: 'cvs-testScoresOverall',
                             data: [[45,60],[65,30],[40,80],[62,48]],
                             options: {
                                 labels: ['Luis', 'Kevin', 'John', 'Gregory'],
                                 tooltips: ['Luis','Luis','Kevin','Kevin','John','John','Gregory','Gregory'],
                                 textAccessible: true,
                                 ymax: 100,
                                 strokestyle: 'white',
                                 linewidth: 2,
                                 shadowOffsetx: 0,
                                 shadowOffsety: 0,
                                 shadowBlur: 10,
                                 hmarginGrouped: 2,
                                 unitsPre: '$',
                                 title: 'An example Bar chart',
                                 gutterBottom: 25,
                                 gutterLeft: 40,
                                 gutterRight: 15,
                                 gutterTop: 27,
                                 colors: ['Gradient(white:rgba(255, 176, 176, 0.5))','Gradient(white:rgba(153, 208, 249,0.5))'],
                                 backgroundGridAutofitNumhlines: 5,
                                 backgroundGridAutofitNumvlines: 4
                             }
                         }).fadeIn({'duration': 250});
                     };
                 </script>
Posted by Richard on 11th June 2016
Hi there,

I've read your message a few times - but I'm still struggling to see what your question is. Whatever the issue is, check your JavaScript console to see what, if any, error is being logged.




Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website! (get information by clicking on the chain icon at the top right of the page)
Posted by Frank on 11th June 2016
Hey Richard,

So I want two graphs using separate canvas elements on the page. When I do one, it works fine. If I ADD the second one to the page with the existing graph it only shows/renders the second graph on the page in the second canvas element.

Here is a link to a video showing the issue I am having.
youtu.be/rdJXaGCTsuk
Posted by Frank on 11th June 2016
Richard,

That seems so obvious now! Thanks so much for clearing up my blunder. I am used to using document.ready with jQuery and had assumed that I could set window on load twice similar to document.ready. It is working now, thanks!
Posted by Richard on 12th June 2016
Hi there,

You can use jQuery if you want instead of the window.onload event. RGraph used to depend on jQuery in fact but I removed it because it really wasn't necessary.


$(document).ready(function ()
{
     // Create first chart
});


$(document).ready(function ()
{
     // Create second chart
});





Richard

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website! (get information by clicking on the chain icon at the top right of the page)

Add a reply

 




« Back to message list
RGraph on social media