/*global $, document*/ "use strict"; document.addEventListener("DOMContentLoaded", function () { Chart.defaults.global.defaultFontColor = "#75787c"; const LINECHARTEXMPLE = document.getElementById("lineChartCustom1"), BARCHART1 = document.getElementById("barChartCustom1"), BARCHART2 = document.getElementById("barChartCustom2"), LINECHART1 = document.getElementById("lineChartCustom2"), LINECHART2 = document.getElementById("lineChartCustom3"), BARCHARTEXMPLE = document.getElementById("barChartCustom3"), PIECHARTEXMPLE = document.getElementById("pieChartCustom1"), PIECHART = document.getElementById("doughnutChartCustom1"), POLARCHARTEXMPLE = document.getElementById("polarChartCustom"), RADARCHARTEXMPLE = document.getElementById("radarChartCustom"); // ------------------------------------------------------- // // Line Chart Custom 1 // ------------------------------------------------------ // var lineChartExample = new Chart(LINECHARTEXMPLE, { type: "line", options: { legend: { labels: { fontColor: "#777", fontSize: 12 } }, scales: { xAxes: [ { display: false, gridLines: { color: "transparent", }, }, ], yAxes: [ { ticks: { max: 60, min: 0, }, display: true, gridLines: { color: "transparent", }, }, ], }, }, data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "Data Set One", fill: true, lineTension: 0, backgroundColor: "rgba(134, 77, 217, 0.88)", borderColor: "rgba(134, 77, 217, 088)", borderCapStyle: "butt", borderDash: [], borderDashOffset: 0.0, borderJoinStyle: "miter", borderWidth: 1, pointBorderColor: "rgba(134, 77, 217, 0.88)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(134, 77, 217, 0.88)", pointHoverBorderColor: "rgba(134, 77, 217, 0.88)", pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: [0, 20, 17, 40, 30, 22, 30], spanGaps: false, }, { label: "Data Set Two", fill: true, lineTension: 0, backgroundColor: "rgba(98, 98, 98, 0.5)", borderColor: "rgba(98, 98, 98, 0.5)", borderCapStyle: "butt", borderDash: [], borderDashOffset: 0.0, borderJoinStyle: "miter", borderWidth: 1, pointBorderColor: "rgba(98, 98, 98, 0.5)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: "rgba(98, 98, 98, 0.5)", pointHoverBorderColor: "rgba(98, 98, 98, 0.5)", pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: [0, 30, 22, 20, 35, 25, 50], spanGaps: false, }, ], }, }); // ------------------------------------------------------- // // Bar Chart Custom 1 // ------------------------------------------------------ // var barChartHome = new Chart(BARCHART1, { type: "bar", options: { scales: { xAxes: [ { display: true, barPercentage: 0.2, }, ], yAxes: [ { ticks: { max: 100, min: 0, }, display: false, }, ], }, legend: { display: false, }, }, data: { labels: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"], datasets: [ { label: "Data Set 1", backgroundColor: [ "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", ], borderColor: [ "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", "#EF8C99", ], borderWidth: 0.3, data: [35, 55, 65, 85, 40, 30, 50, 35, 50, 70, 60, 50], }, ], }, }); // ------------------------------------------------------- // // Bar Chart Example 2 // ------------------------------------------------------ // var barChartHome = new Chart(BARCHART2, { type: "bar", options: { scales: { xAxes: [ { display: true, barPercentage: 0.2, }, ], yAxes: [ { ticks: { max: 100, min: 0, }, display: false, }, ], }, legend: { display: false, }, }, data: { labels: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"], datasets: [ { label: "Data Set 1", backgroundColor: [ "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", ], borderColor: [ "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", "#CF53F9", ], borderWidth: 0.2, data: [30, 40, 45, 55, 70, 45, 60, 35, 50, 63, 40, 70], }, ], }, }); // ------------------------------------------------------- // // Line Chart Custom 2 // ------------------------------------------------------ // var myLineChart = new Chart(LINECHART1, { type: "line", options: { scales: { xAxes: [ { display: true, gridLines: { display: false, }, }, ], yAxes: [ { ticks: { max: 40, min: 10, stepSize: 0.1, }, display: false, gridLines: { display: false, }, }, ], }, legend: { display: false, }, }, data: { labels: [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "L", "M", "N", "O", "P", "Q", "R", "S", "T", ], datasets: [ { label: "Team Drills", fill: true, lineTension: 0.3, backgroundColor: "transparent", borderColor: "#EF8C99", pointBorderColor: "#EF8C99", pointHoverBackgroundColor: "#EF8C99", borderCapStyle: "butt", borderDash: [], borderDashOffset: 0.0, borderJoinStyle: "miter", borderWidth: 2, pointBackgroundColor: "#EF8C99", pointBorderWidth: 2, pointHoverRadius: 4, pointHoverBorderColor: "#fff", pointHoverBorderWidth: 0, pointRadius: 1, pointHitRadius: 0, data: [20, 21, 25, 22, 24, 18, 20, 23, 19, 22, 25, 19, 24, 27, 22, 17, 20, 17, 20, 26, 22], spanGaps: false, }, { label: "Team Drills", fill: true, lineTension: 0.3, backgroundColor: "transparent", borderColor: "rgba(238, 139, 152, 0.24)", pointBorderColor: "rgba(238, 139, 152, 0.24)", pointHoverBackgroundColor: "rgba(238, 139, 152, 0.24)", borderCapStyle: "butt", borderDash: [], borderDashOffset: 0.0, borderJoinStyle: "miter", borderWidth: 2, pointBackgroundColor: "rgba(238, 139, 152, 0.24)", pointBorderWidth: 2, pointHoverRadius: 4, pointHoverBorderColor: "#fff", pointHoverBorderWidth: 0, pointRadius: 1, pointHitRadius: 0, data: [24, 20, 23, 19, 22, 20, 25, 21, 23, 19, 21, 23, 19, 24, 19, 22, 21, 24, 19, 21, 20], spanGaps: false, }, ], }, }); // ------------------------------------------------------- // // Line Chart Custom 3 // ------------------------------------------------------ // var myLineChart = new Chart(LINECHART2, { type: "line", options: { scales: { xAxes: [ { display: true, gridLines: { display: false, }, }, ], yAxes: [ { ticks: { max: 40, min: 10, stepSize: 0.1, }, display: false, gridLines: { display: false, }, }, ], }, legend: { display: false, }, }, data: { labels: [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "L", "M", "N", "O", "P", "Q", "R", "S", "T", ], datasets: [ { label: "Team Drills", fill: true, lineTension: 0.3, backgroundColor: "transparent", borderColor: "#CF53F9", pointBorderColor: "#CF53F9", pointHoverBackgroundColor: "#CF53F9", borderCapStyle: "butt", borderDash: [], borderDashOffset: 0.0, borderJoinStyle: "miter", borderWidth: 2, pointBackgroundColor: "#CF53F9", pointBorderWidth: 2, pointHoverRadius: 4, pointHoverBorderColor: "#fff", pointHoverBorderWidth: 0, pointRadius: 1, pointHitRadius: 0, data: [24, 20, 23, 19, 22, 20, 25, 21, 23, 19, 21, 23, 19, 24, 19, 22, 21, 24, 19, 21, 20], spanGaps: false, }, { label: "Team Drills", fill: true, lineTension: 0.3, backgroundColor: "transparent", borderColor: "rgba(207, 83, 249, 0.24)", pointBorderColor: "rgba(207, 83, 249, 0.24)", pointHoverBackgroundColor: "rgba(207, 83, 249, 0.24)", borderCapStyle: "butt", borderDash: [], borderDashOffset: 0.0, borderJoinStyle: "miter", borderWidth: 2, pointBackgroundColor: "rgba(207, 83, 249, 0.24)", pointBorderWidth: 2, pointHoverRadius: 4, pointHoverBorderColor: "#fff", pointHoverBorderWidth: 0, pointRadius: 1, pointHitRadius: 0, data: [20, 21, 25, 22, 24, 18, 20, 23, 19, 22, 25, 19, 24, 27, 22, 17, 20, 17, 20, 26, 22], spanGaps: false, }, ], }, }); // ------------------------------------------------------- // // Bar Chart // ------------------------------------------------------ // var barChartExample = new Chart(BARCHARTEXMPLE, { type: "bar", options: { scales: { xAxes: [ { display: true, gridLines: { color: "transparent", }, }, ], yAxes: [ { display: true, gridLines: { color: "transparent", }, }, ], }, }, data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "Data Set 1", backgroundColor: ["#864DD9", "#864DD9", "#864DD9", "#864DD9", "#864DD9", "#864DD9", "#864DD9"], hoverBackgroundColor: ["#864DD9", "#864DD9", "#864DD9", "#864DD9", "#864DD9", "#864DD9", "#864DD9"], borderColor: ["#864DD9", "#864DD9", "#864DD9", "#864DD9", "#864DD9", "#864DD9", "#864DD9"], borderWidth: 0.5, data: [65, 59, 80, 81, 56, 55, 40], }, { label: "Data Set 2", backgroundColor: [ "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", ], hoverBackgroundColor: [ "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", ], borderColor: [ "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", "rgba(98, 98, 98, 0.5)", ], borderWidth: 0.5, data: [35, 40, 60, 47, 88, 27, 30], }, ], }, }); // ------------------------------------------------------- // // Pie Chart Custom 1 // ------------------------------------------------------ // var pieChartExample = new Chart(PIECHARTEXMPLE, { type: "pie", options: { legend: { display: true, position: "left", }, }, data: { labels: ["A", "B", "C", "D"], datasets: [ { data: [300, 50, 100, 80], borderWidth: 0, backgroundColor: ["#723ac3", "#864DD9", "#9762e6", "#a678eb"], hoverBackgroundColor: ["#723ac3", "#864DD9", "#9762e6", "#a678eb"], }, ], }, }); var pieChartExample = { responsive: true, }; // ------------------------------------------------------- // // Doughnut Chart Custom // ------------------------------------------------------ // var myPieChart = new Chart(PIECHART, { type: "doughnut", options: { cutoutPercentage: 80, legend: { display: true, position: "left", }, }, data: { labels: ["A", "B", "C", "D"], datasets: [ { data: [120, 90, 77, 95], borderWidth: [0, 0, 0, 0], backgroundColor: ["#b53dde", "#CF53F9", "#d06cf2", "#de97f6"], hoverBackgroundColor: ["#b53dde", "#CF53F9", "#d06cf2", "#de97f6"], }, ], }, }); // ------------------------------------------------------- // // Polar Chart // ------------------------------------------------------ // var chartOptions = { scale: { gridLines: { color: "#3f4145", }, ticks: { beginAtZero: true, min: 0, max: 100, stepSize: 20, }, pointLabels: { fontSize: 12, }, }, legend: { position: "left", }, elements: { arc: { borderWidth: 0, borderColor: "transparent", }, }, }; var polarChartExample = new Chart(POLARCHARTEXMPLE, { type: "polarArea", options: chartOptions, data: { datasets: [ { data: [80, 70, 60, 50], backgroundColor: ["#ba3fe4", "#CF53F9", "#d97bf9", "#e28eff"], label: "My dataset", // for legend }, ], labels: ["A", "B", "C", "D"], }, }); var polarChartExample = { responsive: true, }; // ------------------------------------------------------- // // Radar Chart // ------------------------------------------------------ // var chartOptions = { scale: { gridLines: { color: "#3f4145", }, ticks: { beginAtZero: true, min: 0, max: 100, stepSize: 20, }, pointLabels: { fontSize: 12, }, }, legend: { position: "left", }, }; var radarChartExample = new Chart(RADARCHARTEXMPLE, { type: "radar", options: chartOptions, data: { labels: ["A", "B", "C", "D", "E", "C"], datasets: [ { label: "First dataset", backgroundColor: "rgba(113, 39, 172, 0.4)", borderWidth: 2, borderColor: "#7127AC", pointBackgroundColor: "#7127AC", pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "#7127AC", data: [65, 59, 90, 81, 56, 55], }, { label: "Second dataset", backgroundColor: "rgba(207, 83, 249, 0.4)", borderWidth: 2, borderColor: "#CF53F9", pointBackgroundColor: "#CF53F9", pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "#CF53F9", data: [50, 60, 80, 45, 96, 70], }, ], }, }); var radarChartExample = { responsive: true, }; });