text: $(function(){
    'use strict';
  
    var ctx1 = document.getElementById('chartBar1').getContext('2d');
    var myChart1 = new Chart(ctx1, {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: '# of Votes',
          data: [12, 39, 20, 10, 25, 18],
          backgroundColor: '#17A2B8'
        }]
      },
      options: {
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 10,
              max: 80
            }
          }],
          xAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 11
            }
          }]
        }
      }
    });
  
    var ctx2 = document.getElementById('chartBar2').getContext('2d');
    var myChart2 = new Chart(ctx2, {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: '# of Votes',
          data: [12, 39, 20, 10, 25, 18],
          backgroundColor: [
            '#384250',
            '#17A2B8',
            '#2D3A50',
            '#FB9337',
            '#7CBDDF'
          ]
        }]
      },
      options: {
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 10,
              max: 80
            }
          }],
          xAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 11
            }
          }]
        }
      }
    });
  
    var ctb3 = document.getElementById('chartBar3').getContext('2d');
    new Chart(ctb3, {
      type: 'horizontalBar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: '# of Votes',
          data: [12, 39, 20, 10, 25, 18],
          backgroundColor: '#17A2B8'
        }]
      },
      options: {
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 10,
            }
          }],
          xAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 11,
              max: 80
            }
          }]
        }
      }
    });
  
    var ctb4 = document.getElementById('chartBar4').getContext('2d');
    new Chart(ctb4, {
      type: 'horizontalBar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: '# of Votes',
          data: [12, 39, 20, 10, 25, 18],
          backgroundColor: [
            '#384250',
            '#17A2B8',
            '#2D3A50',
            '#FB9337',
            '#7CBDDF'
          ]
        }]
      },
      options: {
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 10
            }
          }],
          xAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 11,
              max: 80
            }
          }]
        }
      }
    });
  
    /* LINE CHART */
    var ctx3 = document.getElementById('chartLine1');
    var myChart3 = new Chart(ctx3, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          label: '# of Votes',
          data: [12, 39, 20, 10, 25, 18],
          borderColor: '#FB9337',
          borderWidth: 1,
          fill: false
        }]
      },
      options: {
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 10,
              max: 80
            }
          }],
          xAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 11
            }
          }]
        }
      }
    });
  
    var ctx4 = document.getElementById('chartLine2');
    var myChart4 = new Chart(ctx4, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          data: [12, 39, 20, 10, 20, 18],
          borderColor: '#324463',
          borderWidth: 1,
          fill: false
        },{
          data: [30, 50, 28, 23, 25, 28],
          borderColor: '#5B93D3',
          borderWidth: 1,
          fill: false
        }]
      },
      options: {
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 10,
              max: 80
            }
          }],
          xAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 11
            }
          }]
        }
      }
    });
  
  
    /** AREA CHART **/
    var ctx5 = document.getElementById('chartArea1');
    var myChart5 = new Chart(ctx5, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          data: [12, 39, 20, 10, 25, 18],
          backgroundColor: '#7CBDDF', //rgba(240, 113, 36, 0.4)
          fill: true,
          borderWidth: 0,
          borderColor: '#fff'
        }]
      },
      options: {
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 10,
              max: 80
            }
          }],
          xAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 11
            }
          }]
        }
      }
    });
  
    var ctx6 = document.getElementById('chartArea2');
    new Chart(ctx6, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          data: [10, 24, 20, 25, 35, 50],
          backgroundColor: '#FB9337',
          borderWidth: 1,
          fill: true
        },{
          data: [20, 30, 28, 33, 45, 65],
          backgroundColor: '#218bc2',
          borderWidth: 1,
          fill: true
        }]
      },
      options: {
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 10,
              max: 80
            }
          }],
          xAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 11
            }
          }]
        }
      }
    });
  
    /** STACKED BAR CHART **/
    var ctx7 = document.getElementById('chartStacked1');
    new Chart(ctx7, {
      type: 'bar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          data: [10, 24, 20, 25, 35, 50],
          backgroundColor: '#384250',
          borderWidth: 1,
          fill: true
        },{
          data: [10, 24, 20, 25, 35, 50],
          backgroundColor: '#FB9337',
          borderWidth: 1,
          fill: true
        },{
          data: [20, 30, 28, 33, 45, 65],
          backgroundColor: '#7CBDDF',
          borderWidth: 1,
          fill: true
        }]
      },
      options: {
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          yAxes: [{
            stacked: true
          }],
          xAxes: [{
            stacked: true
          }]
        }
      }
    });
  
    var ctx8 = document.getElementById('chartStacked2');
    new Chart(ctx8, {
      type: 'horizontalBar',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
          data: [10, 24, 20, 25, 35, 50],
          backgroundColor: '#384250',
          borderWidth: 1,
          fill: true
        },{
          data: [10, 24, 20, 25, 35, 50],
          backgroundColor: '#FB9337',
          borderWidth: 1,
          fill: true
        },{
          data: [20, 30, 28, 33, 45, 65],
          backgroundColor: '#7CBDDF',
          borderWidth: 1,
          fill: true
        }]
      },
      options: {
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          yAxes: [{
            stacked: true
          }],
          xAxes: [{
            stacked: true
          }]
        }
      }
    });
  
  
    /** PIE CHART **/
    var randomScalingFactor = function() {
      return Math.round(Math.random() * 100);
    };
  
    var datapie = {
      datasets: [{
        data: [
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
          randomScalingFactor(),
        ],
        backgroundColor: [
          '#677489',
          '#218bc2',
          '#7CBDDF',
          '#FB9337',
          '#324463'
        ]
      }]
    };
  
    var optionpie = {
      responsive: true,
      legend: {
        display: false,
      },
      animation: {
        animateScale: true,
        animateRotate: true
      }
    };
  
    // For a doughnut chart
    var ctx6 = document.getElementById('chartPie');
    var myPieChart6 = new Chart(ctx6, {
      type: 'doughnut',
      data: datapie,
      options: optionpie
    });
  
    // For a pie chart
    var ctx7 = document.getElementById('chartDonut');
    var myPieChart7 = new Chart(ctx7, {
      type: 'pie',
      data: datapie,
      options: optionpie
    });
  
  });
  