/* ====== Index ======

1. DUAL LINE CHART
2. DUAL LINE CHART2
3. LINE CHART
4. LINE CHART1
5. LINE CHART2
6. AREA CHART
7. AREA CHART1
8. AREA CHART2
9. AREA CHART3
10. GRADIENT LINE CHART
11. DOUGHNUT CHART
12. POLAR CHART
13. RADAR CHART
14. CURRENT USER BAR CHART
15. ANALYTICS - USER ACQUISITION
16. ANALYTICS - ACTIVITY CHART
17. HORIZONTAL BAR CHART1
18. HORIZONTAL BAR CHART2
19. DEVICE - DOUGHNUT CHART
20. BAR CHART
21. BAR CHART1
22. BAR CHART2
23. BAR CHART3
24. GRADIENT LINE CHART1
25. GRADIENT LINE CHART2
26. GRADIENT LINE CHART3
27. ACQUISITION3
28. STATISTICS

====== End ======*/

$(document).ready(function() {
  "use strict";
  
  /*======== 1. DUAL LINE CHART ========*/
  var dual = document.getElementById("dual-line");
  if (dual !== null) {
    var urChart = new Chart(dual, {
      type: "line",
      data: {
        labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
        datasets: [
          {
            label: "Old",
            pointRadius: 4,
            pointBackgroundColor: "rgba(255,255,255,1)",
            pointBorderWidth: 2,
            fill: false,
            backgroundColor: "transparent",
            borderWidth: 2,
            borderColor: "#fdc506",
            data: [0, 4, 3, 5.5, 3, 4.7, 0]
          },
          {
            label: "New",
            fill: false,
            pointRadius: 4,
            pointBackgroundColor: "rgba(255,255,255,1)",
            pointBorderWidth: 2,
            backgroundColor: "transparent",
            borderWidth: 2,
            borderColor: "#4c84ff",
            data: [0, 2, 4.3, 3.8, 5.2, 1.8, 2.2]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
          padding: {
            right: 10
          }
        },

        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false
              },
              ticks: {
                display: false, // hide main x-axis line
                beginAtZero: true
              },
              barPercentage: 1.8,
              categoryPercentage: 0.2
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false, // hide main y-axis line
                display: false
              },
              ticks: {
                display: false,
                beginAtZero: true
              }
            }
          ]
        },
        tooltips: {
          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 14,
          backgroundColor: "rgba(256,256,256,0.95)",
          displayColors: true,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2
        }
      }
    });
  }
  /*======== 1. DUAL LINE CHART2 ========*/
  var dual3 = document.getElementById("dual-line3");
  if (dual3 !== null) {
    var urdChart = new Chart(dual3, {
      type: "line",
      data: {
        labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
        datasets: [
          {
            label: "Old",
            pointRadius: 4,
            pointBackgroundColor: "#fec400",
            pointBorderWidth: 2,
            fill: false,
            backgroundColor: "transparent",
            borderWidth: 2,
            borderColor: "#fcdf80",
            data: [0, 4, 3, 5.5, 3, 4.7, 0]
          },
          {
            label: "New",
            fill: false,
            pointRadius: 4,
            pointBackgroundColor: "#fec400",
            pointBorderWidth: 2,
            backgroundColor: "transparent",
            borderWidth: 2,
            borderColor: "#ffffff",
            data: [0, 2, 4.3, 3.8, 5.2, 1.8, 2.2]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        layout: {
          padding: {
            right: 10
          }
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false
              },
              ticks: {
                display: false, // hide main x-axis line
                beginAtZero: true
              },
              barPercentage: 1.8,
              categoryPercentage: 0.2
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false, // hide main y-axis line
                display: false
              },
              ticks: {
                display: false,
                beginAtZero: true
              }
            }
          ]
        },
        tooltips: {
          enabled: true
        }
      }
    });
  }
  /*======== 3. LINE CHART ========*/
  var ctx = document.getElementById("linechart");
  if (ctx !== null) {
    var chart = new Chart(ctx, {
      // The type of chart we want to create
      type: "line",

      // The data for our dataset
      data: {
        labels: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec"
        ],
        datasets: [
          {
            label: "",
            backgroundColor: "transparent",
            borderColor: "rgb(82, 136, 255)",
            data: [
              100,
              11000,
              10000,
              14000,
              11000,
              17000,
              14500,
              18000,
              5000,
              23000,
              14000,
              19000
            ],
            lineTension: 0.3,
            pointRadius: 5,
            pointBackgroundColor: "rgba(255,255,255,1)",
            pointHoverBackgroundColor: "rgba(255,255,255,1)",
            pointBorderWidth: 2,
            pointHoverRadius: 8,
            pointHoverBorderWidth: 1
          }
        ]
      },

      // Configuration options go here
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        layout: {
          padding: {
            right: 10
          }
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                display: false
              }
            }
          ],
          yAxes: [
            {
              gridLines: {
                display: true,
                color: "#eee",
                zeroLineColor: "#eee",
              },
              ticks: {
                callback: function(value) {
                  var ranges = [
                    { divider: 1e6, suffix: "M" },
                    { divider: 1e4, suffix: "k" }
                  ];
                  function formatNumber(n) {
                    for (var i = 0; i < ranges.length; i++) {
                      if (n >= ranges[i].divider) {
                        return (
                          (n / ranges[i].divider).toString() + ranges[i].suffix
                        );
                      }
                    }
                    return n;
                  }
                  return formatNumber(value);
                }
              }
            }
          ]
        },
        tooltips: {
          callbacks: {
            title: function(tooltipItem, data) {
              return data["labels"][tooltipItem[0]["index"]];
            },
            label: function(tooltipItem, data) {
              return "$" + data["datasets"][0]["data"][tooltipItem["index"]];
            }
          },
          responsive: true,
          intersect: false,
          enabled: true,
          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 18,
          backgroundColor: "rgba(256,256,256,0.95)",
          xPadding: 20,
          yPadding: 10,
          displayColors: false,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2,
          caretSize: 10,
          caretPadding: 15
        }
      }
    });
  }
  /*======== 4. LINE CHART1 ========*/
  var lchart1 = document.getElementById("linechart1");
  if (lchart1 !== null) {
    var urChart = new Chart(lchart1, {
      type: "line",
      data: {
        labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
        datasets: [
          {
            label: "Old",
            pointRadius: 0,
            pointBackgroundColor: "rgba(255,255,255,1)",
            pointBorderWidth: 2,
            fill: false,
            backgroundColor: "transparent",
            borderWidth: 2,
            borderColor: "#fcdf80",
            data: [0, 5, 2.5, 9.5, 3.3, 8, 0]
          },
          {
            label: "New",
            fill: false,
            pointRadius: 0,
            pointBackgroundColor: "rgba(255,255,255,1)",
            pointBorderWidth: 2,
            backgroundColor: "transparent",
            borderWidth: 2,
            borderColor: "#4c84ff",
            data: [0, 2, 6, 5, 8.5, 3, 3.8]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false
              },
              ticks: {
                display: false, // hide main x-axis line
                beginAtZero: true
              },
              barPercentage: 1.8,
              categoryPercentage: 0.2
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false, // hide main y-axis line
                display: false
              },
              ticks: {
                display: false,
                beginAtZero: true
              }
            }
          ]
        },
        tooltips: {
          enabled: false
        }
      }
    });
  }
  /*======== 5. LINE CHART2 ========*/
  var lchart2 = document.getElementById("linechart2");
  if (lchart2 !== null) {
    var urChart2 = new Chart(lchart2, {
      type: "line",
      data: {
        labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
        datasets: [
          {
            label: "Old",
            pointRadius: 0,
            pointBackgroundColor: "rgba(255,255,255,1)",
            pointBorderWidth: 2,
            fill: false,
            backgroundColor: "transparent",
            borderWidth: 2,
            borderColor: "#fcdf80",
            data: [0, 5, 2.5, 9.5, 3.3, 8, 0]
          },
          {
            label: "New",
            fill: false,
            pointRadius: 0,
            pointBackgroundColor: "rgba(255,255,255,1)",
            pointBorderWidth: 2,
            backgroundColor: "transparent",
            borderWidth: 2,
            borderColor: "#ffffff",
            data: [0, 2, 6, 5, 8.5, 3, 3.8]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false
              },
              ticks: {
                display: false, // hide main x-axis line
                beginAtZero: true
              },
              barPercentage: 1.8,
              categoryPercentage: 0.2
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false, // hide main y-axis line
                display: false
              },
              ticks: {
                display: false,
                beginAtZero: true
              }
            }
          ]
        },
        tooltips: {
          enabled: false
        }
      }
    });
  }
  /*======== 6. AREA CHART ========*/
  var area = document.getElementById("area-chart");
  if (area !== null) {
    var areaChart = new Chart(area, {
      type: "line",
      data: {
        labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
        datasets: [
          {
            label: "New",
            pointHitRadius: 10,
            pointRadius: 0,
            fill: true,
            backgroundColor: "rgba(76, 132, 255, 0.9)",
            borderColor: "rgba(76, 132, 255, 0.9)",
            data: [0, 4, 2, 6.5, 3, 4.7, 0]
          },
          {
            label: "Old",
            pointHitRadius: 10,
            pointRadius: 0,
            fill: true,
            backgroundColor: "rgba(253, 197, 6, 0.9)",
            borderColor: "rgba(253, 197, 6, 1)",
            data: [0, 2, 4.3, 3.8, 5.2, 1.8, 2.2]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        layout: {
          padding: {
            right: 10
          }
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false
              },
              ticks: {
                display: false, // hide main x-axis line
                beginAtZero: true
              },
              barPercentage: 1.8,
              categoryPercentage: 0.2
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false, // hide main y-axis line
                display: false
              },
              ticks: {
                display: false,
                beginAtZero: true
              }
            }
          ]
        },
        tooltips: {
          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 14,
          backgroundColor: "rgba(256,256,256,0.95)",
          displayColors: true,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2
        }
      }
    });
  }
  /*======== 7. AREA CHART1 ========*/
  var area1 = document.getElementById("areaChart1");
  if (area1 !== null) {
    var areaChart = new Chart(area1, {
      type: "line",
      data: {
        labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
        datasets: [
          {
            label: "New",
            pointRadius: 0.1,
            fill: true,
            lineTension: 0.3,
            backgroundColor: "rgba(76, 132, 255, 0.9)",
            borderColor: "rgba(76, 132, 255, 0.9)",
            data: [0, 5, 2.5, 9, 3.5, 6.5, 0]
          },
          {
            label: "Old",
            pointRadius: 0.1,
            fill: true,
            lineTension: 0.3,
            backgroundColor: "rgba(253, 197, 6, 0.9)",
            borderColor: "rgba(253, 197, 6, 1)",
            data: [0, 2, 5.5, 2.6, 5.7, 4, 2.8]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false
              },
              ticks: {
                display: false, // hide main x-axis line
                beginAtZero: true
              },
              barPercentage: 1.8,
              categoryPercentage: 0.2
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false, // hide main y-axis line
                display: false
              },
              ticks: {
                display: false,
                beginAtZero: true
              }
            }
          ]
        },
        tooltips: {
          enabled: false
        }
      }
    });
  }

  /*======== 8. AREA CHART2 ========*/
  var area2 = document.getElementById("areaChart2");
  if (area2 !== null) {
    var areaChart = new Chart(area2, {
      type: "line",
      data: {
        labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
        datasets: [
          {
            label: "New",
            pointRadius: 0.1,
            fill: true,
            lineTension: 0.6,
            backgroundColor: "rgba(255, 255, 255, 0.4)",
            borderColor: "rgba(255, 255, 255,0)",
            data: [0, 5, 2.5, 9, 3.5, 6.5, 0]
          },
          {
            label: "Old",
            pointRadius: 0.1,
            fill: true,
            lineTension: 0.6,
            backgroundColor: "rgba(255, 255, 255, 0.8)",
            borderColor: "rgba(255, 255, 255, 0)",
            data: [0, 2, 5.5, 2.6, 5.7, 4, 2.8]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false
              },
              ticks: {
                display: false, // hide main x-axis line
                beginAtZero: true
              },
              barPercentage: 1.8,
              categoryPercentage: 0.2
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false, // hide main y-axis line
                display: false
              },
              ticks: {
                display: false,
                beginAtZero: true
              }
            }
          ]
        },
        tooltips: {
          enabled: false
        }
      }
    });
  }

  /*======== 9. AREA CHART3 ========*/
  var area3 = document.getElementById("area-chart3");
  if (area3 !== null) {
    var areaChart3 = new Chart(area3, {
      type: "line",
      data: {
        labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
        datasets: [
          {
            label: "New",
            pointHitRadius: 10,
            pointRadius: 0,
            fill: true,
            backgroundColor: "rgba(255, 255, 255, 0.4)",
            borderColor: "rgba(255, 255, 255,0)",
            data: [0, 4, 2, 6.5, 3, 4.7, 0]
          },
          {
            label: "Old",
            pointHitRadius: 10,
            pointRadius: 0,
            fill: true,
            backgroundColor: "rgba(255, 255, 255, 0.8)",
            borderColor: "rgba(255, 255, 255, 0)",
            data: [0, 2, 4.3, 3.8, 5.2, 1.8, 2.2]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        layout: {
          padding: {
            right: 10
          }
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false
              },
              ticks: {
                display: false, // hide main x-axis line
                beginAtZero: true
              },
              barPercentage: 1.8,
              categoryPercentage: 0.2
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false, // hide main y-axis line
                display: false
              },
              ticks: {
                display: false,
                beginAtZero: true
              }
            }
          ]
        },
        tooltips: {
          enabled: true
        }
      }
    });
  }
  /*======== 10. GRADIENT LINE CHART ========*/
  var line = document.getElementById("line");
  if (line !== null) {
    line = line.getContext("2d");
    var gradientFill = line.createLinearGradient(0, 120, 0, 0);
    gradientFill.addColorStop(0, "rgba(41,204,151,0.10196)");
    gradientFill.addColorStop(1, "rgba(41,204,151,0.30196)");

    var lChart = new Chart(line, {
      type: "line",
      data: {
        labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
        datasets: [
          {
            label: "Rev",
            lineTension: 0,
            pointRadius: 4,
            pointBackgroundColor: "rgba(255,255,255,1)",
            pointBorderWidth: 2,
            fill: true,
            backgroundColor: gradientFill,
            borderColor: "#29cc97",
            borderWidth: 2,
            data: [0, 4, 3, 5.5, 3, 4.7, 1]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        layout: {
          padding: {
            right: 10
          }
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: false
              },
              ticks: {
                display: false, // hide main x-axis line
                beginAtZero: true
              },
              barPercentage: 1.8,
              categoryPercentage: 0.2
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false, // hide main y-axis line
                display: false
              },
              ticks: {
                display: false,
                beginAtZero: true
              }
            }
          ]
        },
        tooltips: {
          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 14,
          backgroundColor: "rgba(256,256,256,0.95)",
          displayColors: true,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2
        }
      }
    });
  }
  /*======== 11. DOUGHNUT CHART ========*/
  var doughnut = document.getElementById("doChart");
  if (doughnut !== null) {
    var myDoughnutChart = new Chart(doughnut, {
      type: "doughnut",
      data: {
        labels: ["completed", "unpaid", "pending", "canceled"],
        datasets: [
          {
            label: ["completed", "unpaid", "pending", "canceled"],
            data: [4100, 2500, 1800, 2300],
            backgroundColor: ["#4c84ff", "#29cc97", "#8061ef", "#fec402"],
            borderWidth: 1
            // borderColor: ['#4c84ff','#29cc97','#8061ef','#fec402']
            // hoverBorderColor: ['#4c84ff', '#29cc97', '#8061ef', '#fec402']
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        cutoutPercentage: 75,
        tooltips: {
          callbacks: {
            title: function(tooltipItem, data) {
              return "Order : " + data["labels"][tooltipItem[0]["index"]];
            },
            label: function(tooltipItem, data) {
              return data["datasets"][0]["data"][tooltipItem["index"]];
            }
          },
          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 14,
          backgroundColor: "rgba(256,256,256,0.95)",
          displayColors: true,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2
        }
      }
    });
  }
  /*======== 12. POLAR CHART ========*/
    var polar = document.getElementById("polar");
    if (polar !== null) {
      var configPolar = {
        data: {
          datasets: [
            {
              data: [43, 23, 53, 33, 55],
              backgroundColor: [
                "rgba(41,204,151,0.5)",
                "rgba(254,88,101,0.5)",
                "rgba(128,97,239,0.5)",
                "rgba(254,196,0,0.5)",
                "rgba(76,132,255,0.5)"
              ],
              label: "" // for legend
            }
          ],
          labels: ["Total Sales", "Rejected", "Completed", "Pending", "Reserve"]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          legend: {
            position: "right",
            display: false
          },
          layout: {
            padding: {
              top: 10,
              bottom: 10,
              right: 10,
              left: 10
            }
          },
          title: {
            display: false,
            text: "Chart.js Polar Area Chart"
          },
          scale: {
            ticks: {
              beginAtZero: true,
              fontColor: "#1b223c",
              fontSize: 12,
              stepSize: 10,
              max: 60
            },
            reverse: false
          },
          animation: {
            animateRotate: false,
            animateScale: true
          },
          tooltips: {
            titleFontColor: "#888",
            bodyFontColor: "#555",
            titleFontSize: 12,
            bodyFontSize: 14,
            backgroundColor: "rgba(256,256,256,0.95)",
            displayColors: true,
            borderColor: "rgba(220, 220, 220, 0.9)",
            borderWidth: 2
          }
        }
      };
      window.myPolarArea = Chart.PolarArea(polar, configPolar);
    }

  /*======== 13. RADAR CHART ========*/
  var radar = document.getElementById("radar");
  if (radar !== null) {
    var myRadar = new Chart(radar, {
      type: "radar",
      data: {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "Current Year",
            backgroundColor: "rgba(76,132,255,0.2)",
            borderColor: "#4c84ff",
            pointBorderWidth: 2,
            pointRadius: 4,
            pointBorderColor: "rgba(76,132,255,1)",
            pointBackgroundColor: "#ffffff",
            data: [25, 31, 43, 48, 21, 36, 23, 12, 33, 36, 28, 55]
          },
          {
            label: "Previous Year",
            backgroundColor: "rgba(41, 204, 151, 0.2)",
            borderColor: "#29cc97",
            pointBorderWidth: 2,
            pointRadius: 4,
            pointBorderColor: "#29cc97",
            pointBackgroundColor: "#ffffff",
            data: [45, 77, 22, 12, 56, 43, 71, 23, 54, 19, 32, 55]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        title: {
          display: false,
          text: "Chart.js Radar Chart"
        },
        layout: {
          padding: {
            top: 10,
            bottom: 10,
            right: 10,
            left: 10
          }
        },
        scale: {
          ticks: {
            beginAtZero: true,
            fontColor: "#1b223c",
            fontSize: 12,
            stepSize: 10,
            max: 60
          }
        },
        tooltips: {
          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 14,
          backgroundColor: "rgba(256,256,256,0.95)",
          displayColors: true,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2
        }
      }
    });
  }
  /*======== 14. CURRENT USER BAR CHART ========*/
  var cUser = document.getElementById("currentUser");
  if (cUser !== null) {
    var myUChart = new Chart(cUser, {
      type: "bar",
      data: {
        labels: [
          "1h",
          "10 m",
          "50 m",
          "30 m",
          "40 m",
          "20 m",
          "30 m",
          "25 m",
          "20 m",
          "5 m",
          "10 m"
        ],
        datasets: [
          {
            label: "signup",
            data: [15, 30, 27, 43, 39, 18, 42, 25, 13, 18, 59],
            // data: [2, 3.2, 1.8, 2.1, 1.5, 3.5, 4, 2.3, 2.9, 4.5, 1.8, 3.4, 2.8],
            backgroundColor: "#4c84ff"
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: true,
                display: false,
              },
              ticks: {
                fontColor: "#8a909d",
                fontFamily: "Roboto, sans-serif",
                display: false, // hide main x-axis line
                beginAtZero: true,
                callback: function(tick, index, array) {
                  return index % 2 ? "" : tick;
                }
              },
              barPercentage: 1.8,
              categoryPercentage: 0.2
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: true,
                display: true,
                color: "#eee",
                zeroLineColor: "#eee"
              },
              ticks: {
                fontColor: "#8a909d",
                fontFamily: "Roboto, sans-serif",
                display: true,
                beginAtZero: true
              }
            }
          ]
        },

        tooltips: {
          mode: "index",
          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 15,
          backgroundColor: "rgba(256,256,256,0.95)",
          displayColors: true,
          xPadding: 10,
          yPadding: 7,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2,
          caretSize: 6,
          caretPadding: 5
        }
      }
    });
  }
  /*======== 15. ANALYTICS - USER ACQUISITION ========*/
  var acquisition = document.getElementById("acquisition");
  if (acquisition !== null) {
    var acqData = [
      {
        first: [100, 180, 44, 75, 150, 66, 70],
        second: [144, 44, 177, 76, 23, 189, 12],
        third: [44, 167, 102, 123, 183, 88, 134]
      },
      {
        first: [144, 44, 110, 5, 123, 89, 12],
        second: [22, 123, 45, 130, 112, 54, 181],
        third: [55, 44, 144, 75, 155, 166, 70]
      },
      {
        first: [134, 80, 123, 65, 171, 33, 22],
        second: [44, 144, 77, 76, 123, 89, 112],
        third: [156, 23, 165, 88, 112, 54, 181]
      }
    ];

    var configAcq = {
      // The type of chart we want to create
      type: "line",

      // The data for our dataset
      data: {
        labels: [
          "4 Jan",
          "5 Jan",
          "6 Jan",
          "7 Jan",
          "8 Jan",
          "9 Jan",
          "10 Jan"
        ],
        datasets: [
          {
            label: "Referral",
            backgroundColor: "rgb(76, 132, 255)",
            borderColor: "rgba(76, 132, 255,0)",
            data: acqData[0].first,
            lineTension: 0.3,
            pointBackgroundColor: "rgba(76, 132, 255,0)",
            pointHoverBackgroundColor: "rgba(76, 132, 255,1)",
            pointHoverRadius: 3,
            pointHitRadius: 30,
            pointBorderWidth: 2,
            pointStyle: "rectRounded"
          },
          {
            label: "Direct",
            backgroundColor: "rgb(254, 196, 0)",
            borderColor: "rgba(254, 196, 0,0)",
            data: acqData[0].second,
            lineTension: 0.3,
            pointBackgroundColor: "rgba(254, 196, 0,0)",
            pointHoverBackgroundColor: "rgba(254, 196, 0,1)",
            pointHoverRadius: 3,
            pointHitRadius: 30,
            pointBorderWidth: 2,
            pointStyle: "rectRounded"
          },
          {
            label: "Social",
            backgroundColor: "rgb(41, 204, 151)",
            borderColor: "rgba(41, 204, 151,0)",
            data: acqData[0].third,
            lineTension: 0.3,
            pointBackgroundColor: "rgba(41, 204, 151,0)",
            pointHoverBackgroundColor: "rgba(41, 204, 151,1)",
            pointHoverRadius: 3,
            pointHitRadius: 30,
            pointBorderWidth: 2,
            pointStyle: "rectRounded"
          }
        ]
      },

      // Configuration options go here
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                display: false
              }
            }
          ],
          yAxes: [
            {
              gridLines: {
                display: true,
                color: "#eee",
                zeroLineColor: "#eee"
              },
              ticks: {
                beginAtZero: true,
                stepSize: 50,
                max: 200
              }
            }
          ]
        },
        tooltips: {
          mode: "index",
          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 15,
          backgroundColor: "rgba(256,256,256,0.95)",
          displayColors: true,
          xPadding: 20,
          yPadding: 10,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2,
          caretSize: 10,
          caretPadding: 15
        }
      }
    };

    var ctx = document.getElementById("acquisition").getContext("2d");
    var lineAcq = new Chart(ctx, configAcq);
    document.getElementById("acqLegend").innerHTML = lineAcq.generateLegend();

    var items = document.querySelectorAll(
      "#user-acquisition .nav-tabs .nav-item"
    );
    items.forEach(function (item, index) {
      item.addEventListener("click", function() {
        configAcq.data.datasets[0].data = acqData[index].first;
        configAcq.data.datasets[1].data = acqData[index].second;
        configAcq.data.datasets[2].data = acqData[index].third;
        lineAcq.update();
      });
    });
  }

  /*======== 16. ANALYTICS - ACTIVITY CHART ========*/
  var activity = document.getElementById("activity");
  if (activity !== null) {
    var activityData = [
      {
        first: [0, 65, 52, 115, 98, 165, 125],
        second: [45, 38, 100, 87, 152, 187, 85]
      },
      {
        first: [0, 65, 77, 33, 49, 100, 100],
        second: [88, 33, 20, 44, 111, 140, 77]
      },
      {
        first: [0, 40, 77, 55, 33, 116, 50],
        second: [55, 32, 20, 55, 111, 134, 66]
      },
      {
        first: [0, 44, 22, 77, 33, 151, 99],
        second: [60, 32, 120, 55, 19, 134, 88]
      }
    ];

    var config = {
      // The type of chart we want to create
      type: "line",
      // The data for our dataset
      data: {
        labels: [
          "4 Jan",
          "5 Jan",
          "6 Jan",
          "7 Jan",
          "8 Jan",
          "9 Jan",
          "10 Jan"
        ],
        datasets: [
          {
            label: "Active",
            backgroundColor: "transparent",
            borderColor: "rgb(82, 136, 255)",
            data: activityData[0].first,
            lineTension: 0,
            pointRadius: 5,
            pointBackgroundColor: "rgba(255,255,255,1)",
            pointHoverBackgroundColor: "rgba(255,255,255,1)",
            pointBorderWidth: 2,
            pointHoverRadius: 7,
            pointHoverBorderWidth: 1
          },
          {
            label: "Inactive",
            backgroundColor: "transparent",
            borderColor: "rgb(255, 199, 15)",
            data: activityData[0].second,
            lineTension: 0,
            borderDash: [10, 5],
            borderWidth: 1,
            pointRadius: 5,
            pointBackgroundColor: "rgba(255,255,255,1)",
            pointHoverBackgroundColor: "rgba(255,255,255,1)",
            pointBorderWidth: 2,
            pointHoverRadius: 7,
            pointHoverBorderWidth: 1
          }
        ]
      },
      // Configuration options go here
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                display: false,
              },
              ticks: {
                fontColor: "#8a909d", // this here
              },
            }
          ],
          yAxes: [
            {
              gridLines: {
                fontColor: "#8a909d",
                fontFamily: "Roboto, sans-serif",
                display: true,
                color: "#eee",
                zeroLineColor: "#eee"
              },
              ticks: {
                // callback: function(tick, index, array) {
                //   return (index % 2) ? "" : tick;
                // }
                stepSize: 50,
                fontColor: "#8a909d",
                fontFamily: "Roboto, sans-serif"
              }
            }
          ]
        },
        tooltips: {
          mode: "index",
          intersect: false,
          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 15,
          backgroundColor: "rgba(256,256,256,0.95)",
          displayColors: true,
          xPadding: 10,
          yPadding: 7,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2,
          caretSize: 6,
          caretPadding: 5
        }
      }
    };

    var ctx = document.getElementById("activity").getContext("2d");
    var myLine = new Chart(ctx, config);

    var items = document.querySelectorAll("#user-activity .nav-tabs .nav-item");
    items.forEach(function(item, index){
      item.addEventListener("click", function() {
        config.data.datasets[0].data = activityData[index].first;
        config.data.datasets[1].data = activityData[index].second;
        myLine.update();
      });
    });
  }

  /*======== 17. HORIZONTAL BAR CHART1 ========*/
  var hbar1 = document.getElementById("hbar1");
  if (hbar1 !== null) {
    var hbChart1 = new Chart(hbar1, {
      type: "horizontalBar",
      data: {
        labels: ["India", "USA", "Turkey"],
        datasets: [
          {
            label: "signup",
            data: [18, 13, 9.5],
            backgroundColor: "#4c84ff"
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: true,
                color: "#eee",
                zeroLineColor: "#eee",
                tickMarkLength: 3
              },
              ticks: {
                display: true, // false will hide main x-axis line
                beginAtZero: true,
                fontFamily: "Roboto, sans-serif",
                fontColor: "#8a909d",
                callback: function(value) {
                  return value + " %";
                }
              }
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false, // hide main y-axis line
                display: false
              },
              ticks: {
                display: true,
                beginAtZero: false,
                fontFamily: "Roboto, sans-serif",
                fontColor: "#8a909d",
                fontSize: 14
              },
              barPercentage: 1.6,
              categoryPercentage: 0.2
            }
          ]
        },
        tooltips: {
          mode: "index",
          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 15,
          backgroundColor: "rgba(256,256,256,0.95)",
          displayColors: true,
          xPadding: 10,
          yPadding: 7,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2,
          caretSize: 6,
          caretPadding: 5
        }
      }
    });
  }
  /*======== 18. HORIZONTAL BAR CHART2 ========*/
  var hbar2 = document.getElementById("hbar2");
  if (hbar2 !== null) {
    var hbChart2 = new Chart(hbar2, {
      type: "horizontalBar",
      data: {
        labels: ["Florida", "Poland", "UK"],
        datasets: [
          {
            label: "signup",
            data: [7.5, 4.6, 4],
            backgroundColor: "#4c84ff"
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                drawBorder: false,
                display: true,
                color: "#eee",
                zeroLineColor: "#eee",
                tickMarkLength: 3
              },
              ticks: {
                display: true, // false will hide main x-axis line
                beginAtZero: true,
                fontFamily: "Roboto, sans-serif",
                fontColor: "#8a909d",
                max: 20,
                callback: function(value) {
                  return value + "%";
                }
              }
            }
          ],
          yAxes: [
            {
              gridLines: {
                drawBorder: false, // hide main y-axis line
                display: false
              },
              ticks: {
                display: true,
                beginAtZero: false,
                fontFamily: "Roboto, sans-serif",
                fontColor: "#8a909d",
                fontSize: 14
              },
              barPercentage: 1.6,
              categoryPercentage: 0.2
            }
          ]
        },
        tooltips: {
          mode: "index",
          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 15,
          backgroundColor: "rgba(256,256,256,0.95)",
          displayColors: true,
          xPadding: 10,
          yPadding: 7,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2,
          caretSize: 6,
          caretPadding: 5
        }
      }
    });
  }

  /*======== 19. DEVICE - DOUGHNUT CHART ========*/
  var deviceChart = document.getElementById("deviceChart");
  if (deviceChart !== null) {
    var mydeviceChart = new Chart(deviceChart, {
      type: "doughnut",
      data: {
        labels: ["Desktop", "Tablet", "Mobile"],
        datasets: [
          {
            label: ["Desktop", "Tablet", "Mobile"],
            data: [60000, 15000, 25000],
            backgroundColor: [
              "rgba(76, 132, 255, 1)",
              "rgba(76, 132, 255, 0.85)",
              "rgba(76, 132, 255, 0.70)",
            ],
            borderWidth: 1
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        cutoutPercentage: 75,
        tooltips: {
          callbacks: {
            title: function(tooltipItem, data) {
              return data["labels"][tooltipItem[0]["index"]];
            },
            label: function(tooltipItem, data) {
              return (
                data["datasets"][0]["data"][tooltipItem["index"]] + " Sessions"
              );
            }
          },

          titleFontColor: "#888",
          bodyFontColor: "#555",
          titleFontSize: 12,
          bodyFontSize: 15,
          backgroundColor: "rgba(256,256,256,0.95)",
          displayColors: true,
          xPadding: 10,
          yPadding: 7,
          borderColor: "rgba(220, 220, 220, 0.9)",
          borderWidth: 2,
          caretSize: 6,
          caretPadding: 5
        }
      }
    });
  }
});
/*======== 20. BAR CHART ========*/
var barX = document.getElementById("barChart");
if (barX !== null) {
  var myChart = new Chart(barX, {
    type: "bar",
    data: {
      labels: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
      datasets: [
        {
          label: "signup",
          data: [5, 6, 4.5, 5.5, 3, 6, 4.5, 6, 8, 3, 5.5, 4],
          // data: [2, 3.2, 1.8, 2.1, 1.5, 3.5, 4, 2.3, 2.9, 4.5, 1.8, 3.4, 2.8],
          backgroundColor: "#4c84ff"
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              drawBorder: false,
              display: false
            },
            ticks: {
              display: false, // hide main x-axis line
              beginAtZero: true
            },
            barPercentage: 1.8,
            categoryPercentage: 0.2
          }
        ],
        yAxes: [
          {
            gridLines: {
              drawBorder: false, // hide main y-axis line
              display: false
            },
            ticks: {
              display: false,
              beginAtZero: true
            }
          }
        ]
      },
      tooltips: {
        titleFontColor: "#888",
        bodyFontColor: "#555",
        titleFontSize: 12,
        bodyFontSize: 15,
        backgroundColor: "rgba(256,256,256,0.95)",
        displayColors: false,
        borderColor: "rgba(220, 220, 220, 0.9)",
        borderWidth: 2
      }
    }
  });
}
/*======== 21. BAR CHART1 ========*/
var bar1 = document.getElementById("barChart1");
if (bar1 !== null) {
  var myChart = new Chart(bar1, {
    type: "bar",
    data: {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      datasets: [
        {
          label: "signup",
          data: [5, 7.5, 5.5, 6.5, 4, 9],
          // data: [2, 3.2, 1.8, 2.1, 1.5, 3.5, 4, 2.3, 2.9, 4.5, 1.8, 3.4, 2.8],
          backgroundColor: "#4c84ff"
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              drawBorder: false,
              display: false
            },
            ticks: {
              display: false, // hide main x-axis line
              beginAtZero: true
            },
            barPercentage: 1.8,
            categoryPercentage: 0.2
          }
        ],
        yAxes: [
          {
            gridLines: {
              drawBorder: false, // hide main y-axis line
              display: false
            },
            ticks: {
              display: false,
              beginAtZero: true
            }
          }
        ]
      },
      tooltips: {
        enabled: false
      }
    }
  });
}
/*======== 22. BAR CHART2 ========*/
var bar2 = document.getElementById("barChart2");
if (bar2 !== null) {
  var myChart2 = new Chart(bar2, {
    type: "bar",
    data: {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      datasets: [
        {
          label: "signup",
          data: [5, 7.5, 5.5, 6.5, 4, 9],
          // data: [2, 3.2, 1.8, 2.1, 1.5, 3.5, 4, 2.3, 2.9, 4.5, 1.8, 3.4, 2.8],
          backgroundColor: "#ffffff"
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              drawBorder: false,
              display: false
            },
            ticks: {
              display: false, // hide main x-axis line
              beginAtZero: true
            },
            barPercentage: 1.8,
            categoryPercentage: 0.2
          }
        ],
        yAxes: [
          {
            gridLines: {
              drawBorder: false, // hide main y-axis line
              display: false
            },
            ticks: {
              display: false,
              beginAtZero: true
            }
          }
        ]
      },
      tooltips: {
        enabled: false
      }
    }
  });
}
/*======== 23. BAR CHART3 ========*/
var bar3 = document.getElementById("barChart3");
if (bar3 !== null) {
  var bar_Chart = new Chart(bar3, {
    type: "bar",
    data: {
      labels: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
      datasets: [
        {
          label: "signup",
          data: [5, 6, 4.5, 5.5, 3, 6, 4.5, 6, 8, 3, 5.5, 4],
          // data: [2, 3.2, 1.8, 2.1, 1.5, 3.5, 4, 2.3, 2.9, 4.5, 1.8, 3.4, 2.8],
          backgroundColor: "#ffffff"
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              drawBorder: false,
              display: false
            },
            ticks: {
              display: false, // hide main x-axis line
              beginAtZero: true
            },
            barPercentage: 1.8,
            categoryPercentage: 0.2
          }
        ],
        yAxes: [
          {
            gridLines: {
              drawBorder: false, // hide main y-axis line
              display: false
            },
            ticks: {
              display: false,
              beginAtZero: true
            }
          }
        ]
      },
      tooltips: {
        enabled: true
      }
    }
  });
}

/*======== 24. GRADIENT LINE CHART1 ========*/
var gline1 = document.getElementById("gline1");
if (gline1 !== null) {
  gline1 = gline1.getContext("2d");
  var gradientFill = gline1.createLinearGradient(0, 120, 0, 0);
  gradientFill.addColorStop(0, "rgba(41,204,151,0.10196)");
  gradientFill.addColorStop(1, "rgba(41,204,151,0.30196)");

  var lChart = new Chart(gline1, {
    type: "line",
    data: {
      labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
      datasets: [
        {
          label: "Rev",
          lineTension: 0,
          pointRadius: 0.1,
          pointBackgroundColor: "rgba(255,255,255,1)",
          pointBorderWidth: 2,
          fill: true,
          backgroundColor: gradientFill,
          borderColor: "#29cc97",
          borderWidth: 2,
          data: [0, 5.5, 4, 9, 4, 7, 4.7]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              drawBorder: false,
              display: false
            },
            ticks: {
              display: false, // hide main x-axis line
              beginAtZero: true
            },
            barPercentage: 1.8,
            categoryPercentage: 0.2
          }
        ],
        yAxes: [
          {
            gridLines: {
              drawBorder: false, // hide main y-axis line
              display: false
            },
            ticks: {
              display: false,
              beginAtZero: true
            }
          }
        ]
      },
      tooltips: {
        enabled: false
      }
    }
  });
}
/*======== 25. GRADIENT LINE CHART2 ========*/
var gline2 = document.getElementById("gline2");
if (gline2 !== null) {
  gline2 = gline2.getContext("2d");
  var gradientFill = gline2.createLinearGradient(0, 90, 0, 0);
  gradientFill.addColorStop(0, "rgba(255,255,255,0.10196)");
  gradientFill.addColorStop(1, "rgba(255,255,255,0.30196)");

  var lChart2 = new Chart(gline2, {
    type: "line",
    data: {
      labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
      datasets: [
        {
          label: "Rev",
          lineTension: 0,
          pointRadius: 0.1,
          pointBackgroundColor: "rgba(255,255,255,1)",
          pointBorderWidth: 2,
          fill: true,
          backgroundColor: gradientFill,
          borderColor: "#ffffff",
          borderWidth: 2,
          data: [0, 5.5, 4, 9, 4, 7, 4.7]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              drawBorder: false,
              display: false
            },
            ticks: {
              display: false, // hide main x-axis line
              beginAtZero: true
            },
            barPercentage: 1.8,
            categoryPercentage: 0.2
          }
        ],
        yAxes: [
          {
            gridLines: {
              drawBorder: false, // hide main y-axis line
              display: false
            },
            ticks: {
              display: false,
              beginAtZero: true
            }
          }
        ]
      },
      tooltips: {
        enabled: false
      }
    }
  });
}
/*======== 26. GRADIENT LINE CHART3 ========*/
var gline3 = document.getElementById("line3");
if (gline3 !== null) {
  gline3 = gline3.getContext("2d");
  var gradientFill = gline3.createLinearGradient(0, 90, 0, 0);
  gradientFill.addColorStop(0, "rgba(255,255,255,0.10196)");
  gradientFill.addColorStop(1, "rgba(255,255,255,0.30196)");

  var lChart3 = new Chart(gline3, {
    type: "line",
    data: {
      labels: ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
      datasets: [
        {
          label: "Rev",
          lineTension: 0,
          pointRadius: 4,
          pointBackgroundColor: "#29cc97",
          pointBorderWidth: 2,
          fill: true,
          backgroundColor: gradientFill,
          borderColor: "#ffffff",
          borderWidth: 2,
          data: [0, 4, 3, 5.5, 3, 4.7, 1]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      layout: {
        padding: {
          right: 10
        }
      },
      legend: {
        display: false
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              drawBorder: false,
              display: false
            },
            ticks: {
              display: false, // hide main x-axis line
              beginAtZero: true
            },
            barPercentage: 1.8,
            categoryPercentage: 0.2
          }
        ],
        yAxes: [
          {
            gridLines: {
              drawBorder: false, // hide main y-axis line
              display: false
            },
            ticks: {
              display: false,
              beginAtZero: true
            }
          }
        ]
      },
      tooltips: {
        enabled: true
      }
    }
  });
}
/*======== 27. ACQUISITION3 ========*/
var acquisition3 = document.getElementById("bar3");
if (acquisition3 !== null) {
  var acChart3 = new Chart(acquisition3, {
    // The type of chart we want to create
    type: "bar",

    // The data for our dataset
    data: {
      labels: ["4 Jan", "5 Jan", "6 Jan", "7 Jan", "8 Jan", "9 Jan", "10 Jan"],
      datasets: [
        {
          label: "Referral",
          backgroundColor: "rgb(76, 132, 255)",
          borderColor: "rgba(76, 132, 255,0)",
          data: [78, 90, 70, 75, 45, 52, 22],
          pointBackgroundColor: "rgba(76, 132, 255,0)",
          pointHoverBackgroundColor: "rgba(76, 132, 255,1)",
          pointHoverRadius: 3,
          pointHitRadius: 30
        },
        {
          label: "Direct",
          backgroundColor: "rgb(254, 196, 0)",
          borderColor: "rgba(254, 196, 0,0)",
          data: [88, 115, 80, 96, 65, 77, 38],
          pointBackgroundColor: "rgba(254, 196, 0,0)",
          pointHoverBackgroundColor: "rgba(254, 196, 0,1)",
          pointHoverRadius: 3,
          pointHitRadius: 30
        },
        {
          label: "Social",
          backgroundColor: "rgb(41, 204, 151)",
          borderColor: "rgba(41, 204, 151,0)",
          data: [103, 135, 102, 116, 83, 97, 55],
          pointBackgroundColor: "rgba(41, 204, 151,0)",
          pointHoverBackgroundColor: "rgba(41, 204, 151,1)",
          pointHoverRadius: 3,
          pointHitRadius: 30
        }
      ]
    },

    // Configuration options go here
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              display: false
            }
          }
        ],
        yAxes: [
          {
            gridLines: {
              display: true
            },
            ticks: {
              beginAtZero: true,
              stepSize: 50,
              fontColor: "#8a909d",
              fontFamily: "Roboto, sans-serif",
              max: 200
            }
          }
        ]
      },
      tooltips: {}
    }
  });
  document.getElementById("customLegend").innerHTML = acChart3.generateLegend();
}
/*======== 28. STATISTICS ========*/
var mstat = document.getElementById("mstat");
if (mstat !== null) {
  var msdChart = new Chart(mstat, {
    type: "line",
    data: {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
      datasets: [
        {
          label: "Old",
          pointRadius: 4,
          pointBackgroundColor: "rgba(255,255,255,1)",
          pointBorderWidth: 2,
          fill: true,
          lineTension: 0,
          backgroundColor: "rgba(66,208,163,0.2)",
          borderWidth: 2.5,
          borderColor: "#42d0a3",
          data: [10000, 17500, 2000, 11000, 19000, 10500, 18000]
        },
        {
          label: "New",
          pointRadius: 4,
          pointBackgroundColor: "rgba(255,255,255,1)",
          pointBorderWidth: 2,
          fill: true,
          lineTension: 0,
          backgroundColor: "rgba(76,132,255,0.2)",
          borderWidth: 2.5,
          borderColor: "#4c84ff",
          data: [2000, 11500, 10000, 14000, 11000, 16800, 14500]
        }
      ]
    },
    options: {
      maintainAspectRatio: false,
      legend: {
        display: false
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              drawBorder: true,
              display: false
            },
            ticks: {
              display: true, // hide main x-axis line
              beginAtZero: true,
              fontFamily: "Roboto, sans-serif",
              fontColor: "#8a909d"
            }
          }
        ],
        yAxes: [
          {
            gridLines: {
              drawBorder: true, // hide main y-axis line
              display: true
            },
            ticks: {
              callback: function(value) {
                var ranges = [
                  { divider: 1e6, suffix: "M" },
                  { divider: 1e3, suffix: "k" }
                ];
                function formatNumber(n) {
                  for (var i = 0; i < ranges.length; i++) {
                    if (n >= ranges[i].divider) {
                      return (
                        (n / ranges[i].divider).toString() + ranges[i].suffix
                      );
                    }
                  }
                  return n;
                }
                return formatNumber(value);
              },
              stepSize: 5000,
              fontColor: "#8a909d",
              fontFamily: "Roboto, sans-serif",
              beginAtZero: true
            }
          }
        ]
      },
      tooltips: {
        enabled: true
      }
    }
  });
}