initial commit
This commit is contained in:
i2p
@@ -0,0 +1,682 @@
|
||||
/*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,
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user