Trying to put 2 Bar charts with CSV input on one screen

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 Eric on 9th November 2016
Hi,

I try to show 2 graphs next to each other in the same page, where also 2 seperate csv-files need to be imported. I don't seem to be able to do it right, because the graphs are shown on top of each other in stead of under or side by side.

Can someone tell me what I do wrong or something.

Hereby I also include the code, so please don't be scared..

<!DOCTYPE html >
<html>
<head>
     <script src="../libraries/RGraph.common.core.js" ></script>
     <script src="../libraries/RGraph.bar.js" ></script>
     <script src="../libraries/RGraph.common.csv.js" ></script>
</head>
<body>

  <canvas id="cvs1" width="400" height="350">[No canvas support]</canvas><br/>
  <canvas id="cvs2" width="400" height="350">[No canvas support]</canvas>
 
     <script>
         window.onload = function ()
         {
             RGraph.CSV('./727.csv', function (csv1)
             {
                 /**
                 * Fetch the first row of the CSV file, starting at the second column
                 */
                 var data1 = csv1.getCol(1);
                
                 /**
                 * Fetch the first column which become the labels
                 */
                 var labels1 = csv1.getCol(0)
    
                 new RGraph.Bar({
                     id: 'cvs1',
                     data: data1,
                     options: {
       labels: labels1,
       title: 'Supporttickets',
       titleHalign: 'center',
       titleColor: '#000',
       gutterBottom: 100,
       textAngle: 25,
       textAccessible: false,
       strokestyle: 'rgba(0,0,0,0)',
       labelsOffsety: 20
                     }
                 }).grow({frames: 30});
             }
    );
   
   
             RGraph.CSV('./727-cmb1stelijns.csv', function (csv2)
             {
                 /**
                 * Fetch the first row of the CSV file, starting at the second column
                 */
                 var data = csv2.getCol(1);
                
                 /**
                 * Fetch the first column which become the labels
                 */
                 var labels = csv2.getCol(0)

                 new RGraph.Bar({
                     id: 'cvs2',
                     data: data,
                     options: {
       labels: labels,
       title: 'Supporttickets (1ste lijns)',
       titleHalign: 'center',
       titleColor: '#000',
       gutterBottom: 100,
       textAngle: 25,
       textAccessible: false,
       strokestyle: 'rgba(0,0,0,0)',
       labelsOffsety: 20
                     }
                 }).grow({frames: 30});
             }
    );

         };
     </script>
</body>
</html>
Posted by Richard on 9th November 2016
Hi there,

Your main problem is not using the "new" keyword when creating the RGraph.CSV object, so both objects are then storing their properties on the window (IIRC) object. Here's an example of it working:

www.rgraph.net/fiddle/view.html/two-bar-charts-shown-side-by-side



Richard
Posted by Eric on 10th November 2016
Hi Richard,

Thanks for your reply, that made it clear!!
What an amazing product, just awesome!!
I shared your website via facebook, thanks a lot

Kind regards,
Eric

Add a reply




« Back to message list