Multiple charts on multiple canvases

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 Ron on 30th May 2013
I have a asp.net web forms app with a portal or dashboard page containing multiple widgets. Each widget is contained in a user control. Each user control has it's own canvas. RGraph is working ok with the first gauge control, but once I had the second gauge control it seems that one control overwrites the other.

Can you use multiple controls with multiple canvases on one page?

Which controls can be used, each with its own canvas, without tripping on each other?

Thanks,

Ron
Posted by RGraph support on 30th May 2013
Hi there,

Sounds like you might be giving the canvas tags the same IDs. Each canvas tag must have its own unique id - like this:

<canvas id="cvs1" width="600" height="200">[No canvas support]</canvas>
<canvas id="cvs2" width="600" height="200">[No canvas support]</canvas>



Richard, RGraph Support
Posted by Kade on 14th March 2016
I have set different id for my Canvas's and my last graph is the only one that is showing up.
<div class="charts">
  <canvas id="cvs1" width="800" height="500">[No Canvas Support]</canvas>
</div>

<div class="charts">
  <canvas id="cvs" width="800" height="500">[No Canvas Support]</canvas>
</div>

<script>
         window.onload = function ()
   {
    /**
    * This fetchs the CSV file and shows the Bar chart
    */
    var csv1 = new RGraph.CSV('/data/data.csv', function (csv)
    {
     // Get the first column which becomes the labels
     var labels1 = csv1.getCol(1);
    
     // Get the number of rows in the CSV
     var numrows1 = csv1.numrows;

     // Get the number of cols in the CSV
     var numcols1 = csv1.numcols;

     // Get the second column which becomes the data
     var data1 = csv1.getCol(0);
    
    
     // Create the chart
     var bar1 = new RGraph.Bar({
      id: 'cvs1',
      data: data1,
      options: {
       labels: labels1,
       labelsColor: 'red',
       xlabelsOffset: 10,
       textColor: 'green',
       title: 'title',
       titleVpos: 0.25,
       colors: ['blue'],
       gutterLeft: 50,
       gutterRight: 5,
       gutterBottom: 150,
       gutterTop: 50,
       textAngle: 50,
       hmargin: 25,
       numxticks: 0,
       numyticks: 0,
       axisLinewidth: 3,
       shadow: false,
       ylabels: false,
       labelsAbove: true,
       labelsAboveSize: 12,
      }
     }).draw()
    })
   }
  </script>

I am rather new to Web Development so it could be something very simple that I am overlooking
Posted by Richard on 14th March 2016
Hi,

You're only creating one chart, using the 'cvs1' canvas. If you want another chart you need to create and configure it eg:




// Create the chart
var bar = new RGraph.Bar({
     id: 'cvs',
     data: [4,2,8,1,2,8,5,2],
     options: {
     }
}).draw();




Richard
Posted by Kade on 14th March 2016
sorry here are both the scripts for the charts

<script>
         window.onload = function ()
   {
    /**
    * This fetchs the CSV file and shows the Bar chart
    */
    var csv1 = new RGraph.CSV('/data/allDate.csv', function (csv)
    {
     // Get the first column which becomes the labels
     var labels1 = csv1.getCol(1);
    
     // Get the number of rows in the CSV
     var numrows1 = csv1.numrows;

     // Get the number of cols in the CSV
     var numcols1 = csv1.numcols;

     // Get the second column which becomes the data
     var data1 = csv1.getCol(0);
    
    
     // Create the chart
     var bar1 = new RGraph.Bar({
      id: 'cvs1',
      data: data1,
      options: {
       labels: labels1,
       labelsColor: 'red',
       xlabelsOffset: 10,
       textColor: 'green',
       title: 'title1',
       titleVpos: 0.25,
       colors: ['blue'],
       gutterLeft: 50,
       gutterRight: 5,
       gutterBottom: 150,
       gutterTop: 50,
       textAngle: 50,
       hmargin: 25,
       numxticks: 0,
       numyticks: 0,
       axisLinewidth: 3,
       shadow: false,
       ylabels: false,
       labelsAbove: true,
       labelsAboveSize: 12,
      }
     }).draw()
    })
   }
  </script>
 
  <script>
   window.onload = function ()
   {
    /**
    * This fetchs the CSV file and shows the Bar chart
    */
    var csv = new RGraph.CSV('/data/dataApp.csv', function (csv){
     // Get the first column which becomes the labels
     var labels = csv.getCol(1);
    
     // Get the number of rows in the CSV
     var numrows = csv.numrows;

     // Get the number of cols in the CSV
     var numcols = csv.numcols;

     // Get the second column which becomes the data
     var data = csv.getCol(0);
    
    
     // Create the chart
     var bar = new RGraph.Bar({
      id: 'cvs',
      data: data,
      options: {
       labels: labels,
       labelsColor: 'red',
       xlabelsOffset: 10,
       title: 'title',
       colors: ['green'],
       gutterLeft: 50,
       gutterRight: 5,
       gutterBottom: 150,
       gutterTop: 50,
       textAngle: 45,
       hmargin: 25,
      }
     }).draw()
    })
   }
     </script>
Posted by Richard on 14th March 2016
Hi,

You have two "window.onload = " blocks and the second is replacing the first. So just have one which creates both charts:

window.onload = function ()
{
     /**
     * This fetchs the CSV file and shows the Bar chart
     */
     var csv1 = new RGraph.CSV('/data/allDate.csv', function (csv)
     {
      // Get the first column which becomes the labels
      var labels1 = csv1.getCol(1);
     
      // Get the number of rows in the CSV
      var numrows1 = csv1.numrows;

      // Get the number of cols in the CSV
      var numcols1 = csv1.numcols;

      // Get the second column which becomes the data
      var data1 = csv1.getCol(0);
     
     
      // Create the chart
      var bar1 = new RGraph.Bar({
           id: 'cvs1',
           data: data1,
           options: {
           }
      }).draw()
    })





    // Create the second chart





    var csv = new RGraph.CSV('/data/dataApp.csv', function (csv){
        // Get the first column which becomes the labels
      var labels = csv.getCol(1);
     
      // Get the number of rows in the CSV
      var numrows = csv.numrows;

      // Get the number of cols in the CSV
      var numcols = csv.numcols;

      // Get the second column which becomes the data
      var data = csv.getCol(0);
     
     
      // Create the chart
      var bar = new RGraph.Bar({
           id: 'cvs',
           data: data,
           options: {
           }
      }).draw()
    })
}







Richard
Posted by Kade on 14th March 2016
Worked wonderfully. Thank you so much
Posted by Adeel on 5th October 2017
How to combine these two charts? in the same page lets say 3rd graph combination of both lines.
Posted by Richard on 5th October 2017
Hi there,

You can add the lines to the same chart, like this:

www.rgraph.net/demos/line-black.html

Richard

Add a reply




« Back to message list