Duplicate charts with different data - Javascript Chart.js

Javascript examples for Chart.js:Chart Data

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Data

Description

Duplicate charts with different data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//w ww  . j  a va  2  s.com
var c1 = document.getElementById('c1');
var c2 = document.getElementById('c2');
    var parent = document.getElementById('p1');
    c1.width = parent.offsetWidth - 40;
    c1.height = parent.offsetHeight - 40;
    var data1 = {
        labels: [
            'Seg',
            'Ter',
            'Qua',
            'Qui',
            'Sex',
            'Sab',
            'Dom'
        ],
        datasets: [{
                fillColor: 'rgba(255,255,255,.1)',
                strokeColor: 'rgba(255,255,255,1)',
                pointColor: '#123',
                pointStrokeColor: 'rgba(255,255,255,1)',
                data: [
                    190,
                    200,
                    235,
                    390,
                    290,
                    250,
                    250
                ]
            }]
    };
    var data2 = {
        labels: [
            'A',
            'B',
            'C',
            'D',
            'E',
            'F',
            'G'
        ],
        datasets: [{
            fillColor: 'rgba(255,255,255,.1)',
            strokeColor: 'rgba(255,255,255,1)',
            pointColor: '#123',
            pointStrokeColor: 'rgba(255,255,255,1)',
            data: [
                10,
                20,
                23,
                30,
                20,
                24,
                40
            ]
        }]
    };
    var options1 = {
        scaleFontColor: 'rgba(255,255,255,1)',
        scaleLineColor: 'rgba(255,255,255,1)',
        scaleGridLineColor: 'transparent',
        bezierCurve: false,
        scaleOverride: true,
        scaleSteps: 10,
        scaleStepWidth: 100,
        scaleStartValue: 0
    };
    new Chart(c1.getContext('2d')).Line(data1, options1);
    new Chart(c2.getContext('2d')).Line(data2, options1);
    }

      </script> 
   </head> 
   <body> 
      <div class="chart" id="p1"> 
         <canvas id="c1" width="560" height="260" style="width: 560px; height: 260px;"></canvas> 
      </div> 
      <div class="chart" id="p1"> 
         <canvas id="c2" width="560" height="260" style="width: 560px; height: 260px;"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials