Trying to create multiple charts on the same page

Share RGraph:   Share or Like RGraph on Facebook!

« 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 Breno Padovan on 10th April 2017
Hi everyone,
I'm creating a report in php that will display the result in multiple graphics on the same page.
I created a loop and a counter, I added the graph in that loop and the div is also inside the loop.
In the div I put the name plus the counter to always be different.
It turns out that only the first graph is generated, the others are not.

  <div style="width: 999px; height: 300px" id=<?php echo '"chart-container' . $i . '"';?>></div>

Where the variable $ i is an integer counter.
What can I be doing wrong?

Best regards,
Breno Padovan
Posted by Richard on 10th April 2017
Hi there,

Are you updating the ID that you give to the chart as well?




Richard
Posted by Breno Padovan on 11th April 2017
Hello Richard,
Many thanks for your return.
I was not really changing the graph id.
I made the correction even more so it does not generate any of the charts below.
Below is the html result with a sample chart:

<!DOCTYPE html>
<html>
<head>
<title></title>
    
    <script src="libraries/RGraph.svg.common.core.js"></script>
    <script src="libraries/RGraph.svg.line.js"></script>
  
</head>
<body>




<p>
   HOSTS:<br/><b>SRVVMWSUS01</b><br/>Processador % usage<br/>
       <script>
                             new RGraph.SVG.Line({
                                 id:'chart-container1',
                                 data: [
                                     [4,5,4,8,7,9,8,10,6,8,7,5,6,4,5,4,3,2,1,1,0],
                                     [9,8,4,6,3,5,1,2,2,4,3,6,5,4,3,1,6,3,2,5,4]
                                 ],
                                 options: {
                                     hmargin: 0,
                                     gutterLeft: 50,
                                     gutterRight: 35,
                                     gutterBottom: 50,
                                     linewidth: 3,
                                     backgroundGridVlinesCount: 7,
                                     colors: ['green','red'],
                                     filled: true,
                                     filledOpacity: 0.15,
                                     xaxisLabels: [
                                         'M','T','W','T','F','S','S',
                                         'M','T','W','T','F','S','S',
                                         'M','T','W','T','F','S','S'
                                     ],
                                     title: 'A filled Line chart',
                                     titleSize: 12
                                 }
                             }).draw();
                         </script>
                        
                         <div style="width: 999px; height: 300px" id="chart-container1"></div>
      
                              
                        
       <br/><br/>Disk space usage C: (percentage)<br/>
       <script>
                             new RGraph.SVG.Line({
                                 id:'chart-container1',
                                 data: [
                                     [4,5,4,8,7,9,8,10,6,8,7,5,6,4,5,4,3,2,1,1,0],
                                     [9,8,4,6,3,5,1,2,2,4,3,6,5,4,3,1,6,3,2,5,4]
                                 ],
                                 options: {
                                     hmargin: 0,
                                     gutterLeft: 50,
                                     gutterRight: 35,
                                     gutterBottom: 50,
                                     linewidth: 3,
                                     backgroundGridVlinesCount: 7,
                                     colors: ['green','red'],
                                     filled: true,
                                     filledOpacity: 0.15,
                                     xaxisLabels: [
                                         'M','T','W','T','F','S','S',
                                         'M','T','W','T','F','S','S',
                                         'M','T','W','T','F','S','S'
                                     ],
                                     title: 'A filled Line chart',
                                     titleSize: 12
                                 }
                             }).draw();
                         </script>
                        
                         <div style="width: 999px; height: 300px" id="chart-container2"></div>
      
                              
                        
       <br/><br/>Memory usage<br/>
       <script>
                             new RGraph.SVG.Line({
                                 id:'chart-container1',
                                 data: [
                                     [4,5,4,8,7,9,8,10,6,8,7,5,6,4,5,4,3,2,1,1,0],
                                     [9,8,4,6,3,5,1,2,2,4,3,6,5,4,3,1,6,3,2,5,4]
                                 ],
                                 options: {
                                     hmargin: 0,
                                     gutterLeft: 50,
                                     gutterRight: 35,
                                     gutterBottom: 50,
                                     linewidth: 3,
                                     backgroundGridVlinesCount: 7,
                                     colors: ['green','red'],
                                     filled: true,
                                     filledOpacity: 0.15,
                                     xaxisLabels: [
                                         'M','T','W','T','F','S','S',
                                         'M','T','W','T','F','S','S',
                                         'M','T','W','T','F','S','S'
                                     ],
                                     title: 'A filled Line chart',
                                     titleSize: 12
                                 }
                             }).draw();
                         </script>
                        
                         <div style="width: 999px; height: 300px" id="chart-container3"></div>
      
                              
                        
       <br/><br/><br/>
   </body>
  </html>


What can I be doing wrong?
Posted by Richard on 11th April 2017
Hi there,

You seem to have a little mix up with the chart IDs.







Richard
Posted by Breno Padovan on 11th April 2017
Hello Richard,

Sorry, but when I access the address that you gave, it asked me for authentication, what would be the login and password?

Best regards,
Breno Padovan
Posted by Richard on 11th April 2017
Hi there,
Try this one:

www.rgraph.net/tests/svg-breno.html







Richard
Posted by Breno Padovan on 12th April 2017
Hi Richard,
Thank you very much, now I have been able to display several graphs on a page.

Best Regards,

Breno Padovan

Add a reply




« Back to message list