text: //title:Demo code for Chart.js
  
  $(function () {
      /* ChartJS
       * -------
       * Data and config for chartjs
       */
      'use strict';
      var data = {
          labels: ["2013", "2014", "2015", "2016", "2017", "2018"],
          datasets: [{
              label: '# Sales',
              data: [1, 19, 7, 11, 4, 6],
              backgroundColor: [
          'rgba(54, 162, 235, 1)'
        ],
              borderColor: [
          'rgba(54, 162, 235, 1)'
        ],
              borderWidth: 1,
              fill: false
      }]
      };
      var bardata = {
          labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
          datasets: [{
              label: '# Sales',
              data: [1, 19, 7, 11, 4, 6, 11, 6],
              backgroundColor: [
          'rgba(54, 162, 235, 0.5)',
          'rgba(54, 162, 235, 0.5)',
          'rgba(255, 206, 86, 0.5)',
          'rgba(75, 192, 192, 0.5)',
          'rgba(153, 102, 255, 0.5)',
          'rgba(255, 159, 64, 0.5)',
          'rgba(47, 191, 160, 0.5)',
          'rgba(236, 72, 99, 0.5)'
        ],
              borderColor: [
          'rgba(54, 162, 235, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
          'rgb(47, 191, 160)',
          'rgb(236, 72, 99)'
        ],
              borderWidth: 1,
              fill: false
      }]
      };
      var multiLineData = {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
                  label: 'Dataset 1',
                  data: [12, 17, 4, 6, 3, 2],
                  borderColor: [
            '#587ce4'
          ],
                  borderWidth: 2,
                  fill: false
        },
              {
                  label: 'Dataset 2',
                  data: [5, 23, 7, 12, 42, 23],
                  borderColor: [
            '#ede190'
          ],
                  borderWidth: 2,
                  fill: false
        },
              {
                  label: 'Dataset 3',
                  data: [15, 10, 21, 32, 12, 33],
                  borderColor: [
            '#f44252'
          ],
                  borderWidth: 2,
                  fill: false
        }
      ]
      };
      var options = {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
        }]
          },
          legend: {
              display: false
          },
          elements: {
              point: {
                  radius: 2
              }
          }
  
      };
      var doughnutPieData = {
          datasets: [{
              data: [30, 40, 30],
              backgroundColor: [
          'rgba(75, 192, 192, 0.5)',
          'rgba(54, 162, 235, 0.5)',
          'rgba(153, 102, 255, 0.5)',
          'rgba(255, 206, 86, 0.5)',
          'rgba(75, 192, 192, 0.5)',
          'rgba(255, 159, 64, 0.5)'
        ],
              borderColor: [
          'rgba(75, 192, 192, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(255, 159, 64, 1)'
        ],
      }],
  
          // These labels appear in the legend and in the tooltips when hovering different arcs
          labels: [
        'Activated',
        'Pending',
        'Deactivated',
      ]
      };
      var doughnutPieOptions = {
          responsive: true,
          animation: {
              animateScale: true,
              animateRotate: true
          }
      };
      var areaData = {
          labels: ["2013", "2014", "2015", "2016", "2017", "2018"],
          datasets: [{
                  label: '# Sales',
                  data: [1, 19, 7, 11, 4, 3],
                  backgroundColor: [
          'rgba(54, 162, 235, 0.5)'
        ],
                  borderColor: [
          'rgba(54, 162, 235, 1)'
        ],
                  borderWidth: 1,
                  fill: true, // 3: no fill
      }, {
                  label: '# Expenses',
                  data: [12, 17, 4, 9, 3, 9],
                  backgroundColor: [
          'rgba(153, 102, 255, 0.5)'
        ],
                  borderColor: [
          'rgba(153, 102, 255, 1)'
        ],
                  borderWidth: 1,
                  fill: true, // 3: no fill
      }
                ]
      };
  
      var areaOptions = {
          plugins: {
              filler: {
                  propagate: true
              }
          }
      }
  
      var multiAreaData = {
          labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          datasets: [{
                  label: 'Facebook',
                  data: [8, 11, 13, 15, 12, 13, 16, 15, 13, 19, 11, 14],
                  borderColor: ['rgba(255, 99, 132, 0.5)'],
                  backgroundColor: ['rgba(255, 99, 132, 0.5)'],
                  borderWidth: 1,
                  fill: true
        },
              {
                  label: 'Twitter',
                  data: [7, 17, 12, 16, 14, 18, 16, 12, 15, 11, 13, 9],
                  borderColor: ['rgba(54, 162, 235, 0.5)'],
                  backgroundColor: ['rgba(54, 162, 235, 0.5)'],
                  borderWidth: 1,
                  fill: true
        },
              {
                  label: 'Linkedin',
                  data: [6, 14, 16, 20, 12, 18, 15, 12, 17, 19, 15, 11],
                  borderColor: ['rgba(255, 206, 86, 0.5)'],
                  backgroundColor: ['rgba(255, 206, 86, 0.5)'],
                  borderWidth: 1,
                  fill: true
        }
      ]
      };
  
      var multiAreaOptions = {
          plugins: {
              filler: {
                  propagate: true
              }
          },
          elements: {
              point: {
                  radius: 0
              }
          },
          scales: {
              xAxes: [{
                  gridLines: {
                      display: false
                  }
        }],
              yAxes: [{
                  gridLines: {
                      display: false
                  }
        }]
          }
      }
  
      var scatterChartData = {
          datasets: [{
                  label: 'First Dataset',
                  data: [{
                          x: -10,
                          y: 0
            },
                      {
                          x: 0,
                          y: 3
            },
                      {
                          x: -25,
                          y: 5
            },
                      {
                          x: 40,
                          y: 5
            }
          ],
                  backgroundColor: [
            'rgba(255, 99, 132, 0.5)'
          ],
                  borderColor: [
            'rgba(255,99,132,1)'
          ],
                  borderWidth: 1
        },
              {
                  label: 'Second Dataset',
                  data: [{
                          x: 10,
                          y: 5
            },
                      {
                          x: 20,
                          y: -30
            },
                      {
                          x: -25,
                          y: 15
            },
                      {
                          x: -10,
                          y: 5
            }
          ],
                  backgroundColor: [
            'rgba(54, 162, 235, 0.5)',
          ],
                  borderColor: [
            'rgba(54, 162, 235, 1)',
          ],
                  borderWidth: 1
        }
      ]
      }
  
      var scatterChartOptions = {
          scales: {
              xAxes: [{
                  type: 'linear',
                  position: 'bottom'
        }]
          }
      }
      // Get context with jQuery - using jQuery's .get() method.
      if ($("#barChart").length) {
          var barChartCanvas = $("#barChart").get(0).getContext("2d");
          // This will get the first returned node in the jQuery collection.
          var barChart = new Chart(barChartCanvas, {
              type: 'bar',
              data: bardata,
              options: options
          });
      }
  
      if ($("#linechart").length) {
          var lineChartCanvas = $("#linechart").get(0).getContext("2d");
          var lineChart = new Chart(lineChartCanvas, {
              type: 'line',
              data: data,
              options: options
          });
      }
  
      if ($("#linechart-multi").length) {
          var multiLineCanvas = $("#linechart-multi").get(0).getContext("2d");
          var lineChart = new Chart(multiLineCanvas, {
              type: 'line',
              data: multiLineData,
              options: options
          });
      }
  
      if ($("#areachart-multi").length) {
          var multiAreaCanvas = $("#areachart-multi").get(0).getContext("2d");
          var multiAreaChart = new Chart(multiAreaCanvas, {
              type: 'line',
              data: multiAreaData,
              options: multiAreaOptions
          });
      }
  
      if ($("#doughnutchart").length) {
          var doughnutChartCanvas = $("#doughnutchart").get(0).getContext("2d");
          var doughnutChart = new Chart(doughnutChartCanvas, {
              type: 'doughnut',
              data: doughnutPieData,
              options: doughnutPieOptions
          });
      }
  
      if ($("#piechart").length) {
          var pieChartCanvas = $("#piechart").get(0).getContext("2d");
          var pieChart = new Chart(pieChartCanvas, {
              type: 'pie',
              data: doughnutPieData,
              options: doughnutPieOptions
          });
      }
  
      if ($("#areaChart").length) {
          var areaChartCanvas = $("#areaChart").get(0).getContext("2d");
          var areaChart = new Chart(areaChartCanvas, {
              type: 'line',
              data: areaData,
              options: areaOptions
          });
      }
  
      if ($("#scatterchart").length) {
          var scatterChartCanvas = $("#scatterchart").get(0).getContext("2d");
          var scatterChart = new Chart(scatterChartCanvas, {
              type: 'scatter',
              data: scatterChartData,
              options: scatterChartOptions
          });
      }
  
      if ($("#browserTrafficChart").length) {
          var doughnutChartCanvas = $("#browserTrafficChart").get(0).getContext("2d");
          var doughnutChart = new Chart(doughnutChartCanvas, {
              type: 'doughnut',
              data: browserTrafficData,
              options: doughnutPieOptions
          });
      }
  });
  