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.

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

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

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer

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

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

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>

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

Worked wonderfully. Thank you so much

Hi,


Richard