$(function () {
  /* ChartJS */

  'use strict';
  if ($("#mixed-chart").length) {
    var chartData = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        type: 'line',
        label: 'Revenue',
        data: ["23", "33", "32", "65", "21", "45", "35"],
        backgroundColor: ChartColor[2],
        borderColor: ChartColor[2],
        borderWidth: 3,
        fill: false,
      }, {
        type: 'bar',
        label: 'Standard',
        data: ["53", "28", "19", "29", "30", "51", "55"],
        backgroundColor: ChartColor[0],
        borderColor: ChartColor[0],
        borderWidth: 2
      }, {
        type: 'bar',
        label: 'Extended',
        data: ["34", "16", "46", "54", "42", "31", "49"],
        backgroundColor: ChartColor[1],
        borderColor: ChartColor[1]
      }]
    };
    var MixedChartCanvas = document.getElementById('mixed-chart').getContext('2d');
    lineChart = new Chart(MixedChartCanvas, {
      type: 'bar',
      data: chartData,
      options: {
        responsive: true,
        title: {
          display: true,
          text: 'Revenue and number of lincences sold',
          fontColor: chartFontcolor
        },
        scales: {
          xAxes: [{
            display: true,
            ticks: {
              fontColor: chartFontcolor,
              stepSize: 50,
              min: 0,
              max: 150,
              autoSkip: true,
              autoSkipPadding: 15,
              maxRotation: 0,
              maxTicksLimit: 10
            },
            gridLines: {
              display: false,
              drawBorder: false,
              color: chartGridLineColor,
              zeroLineColor: chartGridLineColor
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Number of Sales',
              fontSize: 12,
              lineHeight: 2,
              fontColor: chartFontcolor
            },
            ticks: {
              fontColor: chartFontcolor,
              display: true,
              autoSkip: false,
              maxRotation: 0,
              stepSize: 20,
              min: 0,
              max: 100
            },
            gridLines: {
              drawBorder: false,
              color: chartGridLineColor,
              zeroLineColor: chartGridLineColor
            }
          }]
        },
        legend: {
          display: false
        },
        legendCallback: function (chart) {
          var text = [];
          text.push('<div class="chartjs-legend d-flex justify-content-center mt-4"><ul>');
          for (var i = 0; i < chart.data.datasets.length; i++) {
            console.log(chart.data.datasets[i]); // see what's inside the obj.
            text.push('<li>');
            text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + '</span>');
            text.push(chart.data.datasets[i].label);
            text.push('</li>');
          }
          text.push('</ul></div>');
          return text.join("");
        }
      }
    });
    document.getElementById('mixed-chart-legend').innerHTML = lineChart.generateLegend();
  }
  if ($("#lineChart").length) {
    var lineData = {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
      datasets: [{
        data: [0, 205, 75, 150, 100, 150, 50, 100, 80],
        backgroundColor: ChartColor[0],
        borderColor: ChartColor[0],
        borderWidth: 3,
        fill: 'false',
        label: "Sales"
      }]
    };
    var lineOptions = {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        filler: {
          propagate: false
        }
      },
      scales: {
        xAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Month',
            fontSize: 12,
            lineHeight: 2,
            fontColor: chartFontcolor
          },
          ticks: {
            fontColor: chartFontcolor,
            stepSize: 50,
            min: 0,
            max: 150,
            autoSkip: true,
            autoSkipPadding: 15,
            maxRotation: 0,
            maxTicksLimit: 10
          },
          gridLines: {
            display: false,
            drawBorder: false,
            color: 'transparent',
            zeroLineColor: '#eeeeee'
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Number of sales',
            fontSize: 12,
            lineHeight: 2,
            fontColor: chartFontcolor
          },
          ticks: {
            fontColor: chartFontcolor,
            display: true,
            autoSkip: false,
            maxRotation: 0,
            stepSize: 100,
            min: 0,
            max: 300
          },
          gridLines: {
            drawBorder: false,
            color: chartGridLineColor,
            zeroLineColor: chartGridLineColor
          }
        }]
      },
      legend: {
        display: false
      },
      legendCallback: function (chart) {
        var text = [];
        text.push('<div class="chartjs-legend"><ul>');
        for (var i = 0; i < chart.data.datasets.length; i++) {
          console.log(chart.data.datasets[i]); // see what's inside the obj.
          text.push('<li>');
          text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + '</span>');
          text.push(chart.data.datasets[i].label);
          text.push('</li>');
        }
        text.push('</ul></div>');
        return text.join("");
      },
      elements: {
        line: {
          tension: 0
        },
        point: {
          radius: 0
        }
      }
    }
    var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
    var lineChart = new Chart(lineChartCanvas, {
      type: 'line',
      data: lineData,
      options: lineOptions
    });
    document.getElementById('line-traffic-legend').innerHTML = lineChart.generateLegend();
  }
  if ($("#areaChart").length) {
    var gradientStrokeFill_1 = lineChartCanvas.createLinearGradient(1, 2, 1, 280);
    gradientStrokeFill_1.addColorStop(0, "rgba(20, 88, 232, 0.37)");
    gradientStrokeFill_1.addColorStop(1, "rgba(255,255,255,0.4)")
    var lineData = {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
      datasets: [{
        data: [0, 205, 75, 150, 100, 150, 50, 100, 80],
        backgroundColor: gradientStrokeFill_1,
        borderColor: ChartColor[0],
        borderWidth: 3,
        fill: true,
        label: "Marketing"
      }]
    };
    var lineOptions = {
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        filler: {
          propagate: false
        }
      },
      scales: {
        xAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Month',
            fontColor: chartFontcolor,
            fontSize: 12,
            lineHeight: 2
          },
          ticks: {
            autoSkip: true,
            autoSkipPadding: 35,
            maxRotation: 0,
            maxTicksLimit: 10,
            fontColor: chartFontcolor
          },
          gridLines: {
            display: false,
            drawBorder: false,
            color: chartGridLineColor,
            zeroLineColor: chartGridLineColor
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Number of user',
            fontSize: 12,
            fontColor: chartFontcolor,
            lineHeight: 2
          },
          ticks: {
            display: true,
            autoSkip: false,
            maxRotation: 0,
            stepSize: 100,
            min: 0,
            max: 300,
            fontColor: chartFontcolor
          },
          gridLines: {
            drawBorder: false,
            color: chartGridLineColor,
            zeroLineColor: chartGridLineColor
          }
        }]
      },
      legend: {
        display: false
      },
      legendCallback: function (chart) {
        var text = [];
        text.push('<div class="chartjs-legend"><ul>');
        for (var i = 0; i < chart.data.datasets.length; i++) {
          console.log(chart.data.datasets[i]); // see what's inside the obj.
          text.push('<li>');
          text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + '</span>');
          text.push(chart.data.datasets[i].label);
          text.push('</li>');
        }
        text.push('</ul></div>');
        return text.join("");
      },
      elements: {
        line: {
          tension: 0
        },
        point: {
          radius: 0
        }
      }
    }
    var lineChartCanvas = $("#areaChart").get(0).getContext("2d");
    var lineChart = new Chart(lineChartCanvas, {
      type: 'line',
      data: lineData,
      options: lineOptions
    });
    document.getElementById('area-traffic-legend').innerHTML = lineChart.generateLegend();
  }
  if ($("#barChart").length) {
    var barChartCanvas = $("#barChart").get(0).getContext("2d");
    var barChart = new Chart(barChartCanvas, {
      type: 'bar',
      data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        datasets: [{
          label: 'Profit',
          data: [15, 28, 14, 22, 38, 30, 40, 70, 85, 50, 23, 20],
          backgroundColor: ChartColor[0],
          borderColor: ChartColor[0],
          borderWidth: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: true,
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
          }
        },
        scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Sales by year',
              fontColor: chartFontcolor,
              fontSize: 12,
              lineHeight: 2
            },
            ticks: {
              fontColor: chartFontcolor,
              stepSize: 50,
              min: 0,
              max: 150,
              autoSkip: true,
              autoSkipPadding: 15,
              maxRotation: 0,
              maxTicksLimit: 10
            },
            gridLines: {
              display: false,
              drawBorder: false,
              color: chartGridLineColor,
              zeroLineColor: chartGridLineColor
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'revenue by sales',
              fontColor: chartFontcolor,
              fontSize: 12,
              lineHeight: 2
            },
            ticks: {
              display: true,
              autoSkip: false,
              maxRotation: 0,
              fontColor: chartFontcolor,
              stepSize: 50,
              min: 0,
              max: 150
            },
            gridLines: {
              drawBorder: false,
              color: chartGridLineColor,
              zeroLineColor: chartGridLineColor
            }
          }]
        },
        legend: {
          display: false
        },
        legendCallback: function (chart) {
          var text = [];
          text.push('<div class="chartjs-legend"><ul>');
          for (var i = 0; i < chart.data.datasets.length; i++) {
            console.log(chart.data.datasets[i]); // see what's inside the obj.
            text.push('<li>');
            text.push('<span style="background-color:' + chart.data.datasets[i].backgroundColor + '">' + '</span>');
            text.push(chart.data.datasets[i].label);
            text.push('</li>');
          }
          text.push('</ul></div>');
          return text.join("");
        },
        elements: {
          point: {
            radius: 0
          }
        }
      }
    });
    document.getElementById('bar-traffic-legend').innerHTML = barChart.generateLegend();
  }
  if ($("#stackedbarChart").length) {
    var stackedbarChartCanvas = $("#stackedbarChart").get(0).getContext("2d");
    var stackedbarChart = new Chart(stackedbarChartCanvas, {
      type: 'bar',
      data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
        datasets: [{
            label: "Desktop",
            backgroundColor: ChartColor[0],
            borderColor: ChartColor[0],
            borderWidth: 1,
            data: [55, 45, 44, 54, 38, 40, 50]
          },
          {
            label: "Mobile",
            backgroundColor: ChartColor[1],
            borderColor: ChartColor[1],
            borderWidth: 1,
            data: [34, 20, 54, 34, 65, 40, 35]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: true,
        legend: false,
        categoryPercentage: 0.5,
        stacked: true,
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
          }
        },
        scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'User by time',
              fontColor: chartFontcolor,
              fontSize: 12,
              lineHeight: 2
            },
            ticks: {
              fontColor: chartFontcolor,
              stepSize: 50,
              min: 0,
              max: 150,
              autoSkip: true,
              autoSkipPadding: 15,
              maxRotation: 0,
              maxTicksLimit: 10
            },
            gridLines: {
              display: false,
              drawBorder: false,
              color: chartGridLineColor,
              zeroLineColor: chartGridLineColor
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Number of users',
              fontColor: chartFontcolor,
              fontSize: 12,
              lineHeight: 2
            },
            ticks: {
              fontColor: chartFontcolor,
              stepSize: 50,
              min: 0,
              max: 150,
              autoSkip: true,
              autoSkipPadding: 15,
              maxRotation: 0,
              maxTicksLimit: 10
            },
            gridLines: {
              drawBorder: false,
              color: chartGridLineColor,
              zeroLineColor: chartGridLineColor
            }
          }]
        },
        legend: {
          display: false
        },
        legendCallback: function (chart) {
          var text = [];
          text.push('<div class="chartjs-legend"><ul>');
          for (var i = 0; i < chart.data.datasets.length; i++) {
            console.log(chart.data.datasets[i]); // see what's inside the obj.
            text.push('<li>');
            text.push('<span style="background-color:' + chart.data.datasets[i].backgroundColor + '">' + '</span>');
            text.push(chart.data.datasets[i].label);
            text.push('</li>');
          }
          text.push('</ul></div>');
          return text.join("");
        },
        elements: {
          point: {
            radius: 0
          }
        }
      }
    });
    document.getElementById('stacked-bar-traffic-legend').innerHTML = stackedbarChart.generateLegend();
  }
  if ($("#radarChart").length) {
    var marksCanvas = document.getElementById("radarChart");
    var marksData = {
      labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
      datasets: [{
        label: "Student A",
        backgroundColor: ChartColor[0],
        borderColor: ChartColor[0],
        borderWidth: 0,
        fill: true,
        radius: 6,
        pointRadius: 5,
        pointBorderWidth: 0,
        pointBackgroundColor: ChartColor[4],
        pointHoverRadius: 10,
        data: [54, 45, 60, 70, 54, 75]
      }, {
        label: "Student B",
        backgroundColor: ChartColor[1],
        borderColor: ChartColor[1],
        borderWidth: 0,
        fill: true,
        radius: 6,
        pointRadius: 5,
        pointBorderWidth: 0,
        pointBackgroundColor: ChartColor[1],
        pointHoverRadius: 10,
        data: [65, 75, 70, 80, 60, 80]
      }]
    };

    var chartOptions = {
      scale: {
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 100,
          stepSize: 20,
          display: false,
          fontColor: chartFontcolor
        },
        pointLabels: {
          fontSize: 14,
          fontColor: chartFontcolor,
          color: chartGridLineColor
        }
      },
      legend: false,
      legendCallback: function (chart) {
        var text = [];
        text.push('<div class="chartjs-legend"><ul>');
        for (var i = 0; i < chart.data.datasets.length; i++) {
          console.log(chart.data.datasets[i]); // see what's inside the obj.
          text.push('<li>');
          text.push('<span style="background-color:' + chart.data.datasets[i].backgroundColor + '">' + '</span>');
          text.push(chart.data.datasets[i].label);
          text.push('</li>');
        }
        text.push('</ul></div>');
        return text.join("");
      },
    };

    var radarChart = new Chart(marksCanvas, {
      type: 'radar',
      data: marksData,
      options: chartOptions
    });
    document.getElementById('radar-chart-legend').innerHTML = radarChart.generateLegend();
  }
  if ($("#doughnutChart").length) {
    var doughnutChartCanvas = $("#doughnutChart").get(0).getContext("2d");
    var doughnutPieData = {
      datasets: [{
        data: [20, 80, 83],
        backgroundColor: [
          ChartColor[0],
          ChartColor[1],
          ChartColor[2]
        ],
        borderColor: [
          ChartColor[0],
          ChartColor[1],
          ChartColor[2]
        ],
      }],

      // These labels appear in the legend and in the tooltips when hovering different arcs
      labels: [
        'Sales',
        'Profit',
        'Return',
      ]
    };
    var doughnutPieOptions = {
      cutoutPercentage: 75,
      animationEasing: "easeOutBounce",
      animateRotate: true,
      animateScale: false,
      responsive: true,
      maintainAspectRatio: true,
      showScale: true,
      legend: false,
      legendCallback: function (chart) {
        var text = [];
        text.push('<div class="chartjs-legend"><ul>');
        for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
          text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
          text.push('</span>');
          if (chart.data.labels[i]) {
            text.push(chart.data.labels[i]);
          }
          text.push('</li>');
        }
        text.push('</div></ul>');
        return text.join("");
      },
      layout: {
        padding: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        }
      }
    };
    var doughnutChart = new Chart(doughnutChartCanvas, {
      type: 'doughnut',
      data: doughnutPieData,
      options: doughnutPieOptions
    });
    document.getElementById('doughnut-chart-legend').innerHTML = doughnutChart.generateLegend();
  }
  if ($("#pieChart").length) {
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
    var pieChart = new Chart(pieChartCanvas, {
      type: 'pie',
      data: {
        datasets: [{
          data: [30, 40, 30],
          backgroundColor: [
            ChartColor[0],
            ChartColor[1],
            ChartColor[2]
          ],
          borderColor: [
            ChartColor[0],
            ChartColor[1],
            ChartColor[2]
          ],
        }],
        labels: [
          'Sales',
          'Profit',
          'Return',
        ]
      },
      options: {
        responsive: true,
        animation: {
          animateScale: true,
          animateRotate: true
        },
        legend: {
          display: false
        },
        legendCallback: function (chart) {
          var text = [];
          text.push('<div class="chartjs-legend"><ul>');
          for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
            text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
            text.push('</span>');
            if (chart.data.labels[i]) {
              text.push(chart.data.labels[i]);
            }
            text.push('</li>');
          }
          text.push('</div></ul>');
          return text.join("");
        }
      }
    });
    document.getElementById('pie-chart-legend').innerHTML = pieChart.generateLegend();
  }
  if ($('#scatterChart').length) {
    var options = {
      type: 'bubble',
      data: {
        datasets: [{
            label: 'John',
            data: [{
              x: 3,
              y: 10,
              r: 5
            }],
            backgroundColor: ChartColor[0],
            borderColor: ChartColor[0],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[0]
          },
          {
            label: 'Paul',
            data: [{
              x: 2,
              y: 2,
              r: 10
            }],
            backgroundColor: ChartColor[1],
            borderColor: ChartColor[1],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[1]
          }, {
            label: 'Paul',
            data: [{
              x: 12,
              y: 32,
              r: 13
            }],
            backgroundColor: ChartColor[2],
            borderColor: ChartColor[2],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[2]
          },
          {
            label: 'Paul',
            data: [{
              x: 29,
              y: 52,
              r: 5
            }],
            backgroundColor: ChartColor[0],
            borderColor: ChartColor[0],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[0]
          },
          {
            label: 'Paul',
            data: [{
              x: 49,
              y: 62,
              r: 5
            }],
            backgroundColor: ChartColor[1],
            borderColor: ChartColor[1],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[1]
          },
          {
            label: 'Paul',
            data: [{
              x: 22,
              y: 22,
              r: 5
            }],
            backgroundColor: ChartColor[2],
            borderColor: ChartColor[2],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[2]
          },
          {
            label: 'Paul',
            data: [{
              x: 23,
              y: 25,
              r: 5
            }],
            backgroundColor: ChartColor[1],
            borderColor: ChartColor[1],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[1]
          },
          {
            label: 'Paul',
            data: [{
              x: 12,
              y: 10,
              r: 5
            }],
            backgroundColor: ChartColor[1],
            borderColor: ChartColor[1],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[1]
          },
          {
            label: 'Paul',
            data: [{
              x: 34,
              y: 23,
              r: 5
            }],
            backgroundColor: ChartColor[1],
            borderColor: ChartColor[1],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[1]
          },
          {
            label: 'Paul',
            data: [{
              x: 30,
              y: 20,
              r: 10
            }],
            backgroundColor: ChartColor[1],
            borderColor: ChartColor[1],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[1]
          },
          {
            label: 'Paul',
            data: [{
              x: 12,
              y: 17,
              r: 5
            }],
            backgroundColor: ChartColor[1],
            borderColor: ChartColor[1],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[1]
          },
          {
            label: 'Paul',
            data: [{
              x: 32,
              y: 37,
              r: 5
            }],
            backgroundColor: ChartColor[0],
            borderColor: ChartColor[0],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[0]
          },
          {
            label: 'Paul',
            data: [{
              x: 52,
              y: 57,
              r: 5
            }],
            backgroundColor: ChartColor[0],
            borderColor: ChartColor[0],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[0]
          },
          {
            label: 'Paul',
            data: [{
              x: 77,
              y: 40,
              r: 5
            }],
            backgroundColor: ChartColor[0],
            borderColor: ChartColor[0],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[0]
          }, {
            label: 'Paul',
            data: [{
              x: 67,
              y: 40,
              r: 5
            }],
            backgroundColor: ChartColor[0],
            borderColor: ChartColor[0],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[0]
          }, {
            label: 'Paul',
            data: [{
              x: 47,
              y: 20,
              r: 10
            }],
            backgroundColor: ChartColor[0],
            borderColor: ChartColor[0],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[0]
          }, {
            label: 'Paul',
            data: [{
              x: 77,
              y: 10,
              r: 5
            }],
            backgroundColor: ChartColor[0],
            borderColor: ChartColor[0],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[0]
          }, {
            label: 'Paul',
            data: [{
              x: 57,
              y: 10,
              r: 10
            }],
            backgroundColor: ChartColor[0],
            borderColor: ChartColor[0],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[0]
          }, {
            label: 'Paul',
            data: [{
              x: 57,
              y: 40,
              r: 5
            }],
            backgroundColor: ChartColor[3],
            borderColor: ChartColor[3],
            borderWidth: 0,
            hoverBackgroundColor: ChartColor[3]
          }
        ]
      },
      options: {
        legend: false,
        scales: {
          xAxes: [{
            gridLines: {
              display: false,
              color: chartGridLineColor,
              zeroLineColor: chartGridLineColor
            },
            ticks: {
              autoSkip: true,
              autoSkipPadding: 45,
              maxRotation: 0,
              maxTicksLimit: 10,
              fontColor: chartFontcolor
            }
          }],
          yAxes: [{
            gridLines: {
              color: chartGridLineColor,
              zeroLineColor: chartGridLineColor,
              display: true
            },
            ticks: {
              beginAtZero: true,
              stepSize: 25,
              max: 100,
              fontColor: chartFontcolor
            }
          }]
        },
        legend: {
          display: false
        },
        legendCallback: function (chart) {
          var text = [];
          text.push('<div class="chartjs-legend"><ul>');
          for (var i = 0; i < chart.data.datasets.length; i++) {
            console.log(chart.data.datasets[i]); // see what's inside the obj.
            text.push('<li>');
            text.push('<span style="background-color:' + chart.data.datasets[i].backgroundColor + '">' + '</span>');
            text.push(chart.data.datasets[i].label);
            text.push('</li>');
          }
          text.push('</ul></div>');
          return text.join("");
        },
      }
    }

    var ctx = document.getElementById('scatterChart').getContext('2d');
    new Chart(ctx, options);
    document.getElementById('scatter-chart-legend').innerHTML = barChart.generateLegend();
  }
});