mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2025-01-19 09:45:28 +01:00
1024 lines
36 KiB
JavaScript
Executable File
1024 lines
36 KiB
JavaScript
Executable File
(function ($) {
|
|
'use strict';
|
|
$(function () {
|
|
function onRefresh(chart) {
|
|
chart.data.datasets.forEach(function (dataset) {
|
|
dataset.data.push({
|
|
x: Date.now(),
|
|
y: Math.random()
|
|
});
|
|
});
|
|
}
|
|
var lineChartStyleOption_1 = {
|
|
scales: {
|
|
yAxes: [{
|
|
display: false
|
|
}],
|
|
xAxes: [{
|
|
display: false
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 1
|
|
},
|
|
line: {
|
|
tension: 0
|
|
}
|
|
},
|
|
stepsize: 100
|
|
};
|
|
var lineChartStyleOption_2 = {
|
|
scales: {
|
|
yAxes: [{
|
|
display: false
|
|
}],
|
|
xAxes: [{
|
|
display: false
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0
|
|
},
|
|
line: {
|
|
tension: 0
|
|
}
|
|
},
|
|
stepsize: 100
|
|
};
|
|
if ($('#source-graph-1').length) {
|
|
var lineChartCanvas = $("#source-graph-1").get(0).getContext("2d");
|
|
var data = {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
|
|
datasets: [{
|
|
label: 'Profit',
|
|
data: [1, 3, 7, 4, 1, 9, 6],
|
|
borderColor: [
|
|
warningColor
|
|
],
|
|
borderWidth: 2,
|
|
fill: false
|
|
}]
|
|
};
|
|
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: data,
|
|
options: lineChartStyleOption_1
|
|
});
|
|
}
|
|
if ($('#source-graph-2').length) {
|
|
var lineChartCanvas = $("#source-graph-2").get(0).getContext("2d");
|
|
var data = {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
|
|
datasets: [{
|
|
label: 'Profit',
|
|
data: [1, 4, 8, 3, 4, 6, 1],
|
|
borderColor: [
|
|
successColor
|
|
],
|
|
borderWidth: 2,
|
|
fill: false
|
|
}]
|
|
};
|
|
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: data,
|
|
options: lineChartStyleOption_1
|
|
});
|
|
}
|
|
if ($('#source-graph-3').length) {
|
|
var lineChartCanvas = $("#source-graph-3").get(0).getContext("2d");
|
|
var data = {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
|
|
datasets: [{
|
|
label: 'Profit',
|
|
data: [8, 12, 5, 4, 1, 12, 4],
|
|
borderColor: [
|
|
dangerColor
|
|
],
|
|
borderWidth: 2,
|
|
fill: false
|
|
}]
|
|
};
|
|
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: data,
|
|
options: lineChartStyleOption_1
|
|
});
|
|
}
|
|
if ($('#source-graph-4').length) {
|
|
var lineChartCanvas = $("#source-graph-4").get(0).getContext("2d");
|
|
var data = {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
|
|
datasets: [{
|
|
label: 'Profit',
|
|
data: [6, 9, 3, 4, 2, 5, 6],
|
|
borderColor: [
|
|
warningColor
|
|
],
|
|
borderWidth: 2,
|
|
fill: false
|
|
}]
|
|
};
|
|
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: data,
|
|
options: lineChartStyleOption_1
|
|
});
|
|
}
|
|
if ($("#trafficDoughnutChart").length) {
|
|
var doughnutChartCanvas = $("#trafficDoughnutChart").get(0).getContext("2d");
|
|
var doughnutPieData = {
|
|
datasets: [{
|
|
data: [70, 20],
|
|
backgroundColor: [
|
|
primaryColor,
|
|
successColor
|
|
],
|
|
borderColor: [
|
|
primaryColor,
|
|
successColor
|
|
],
|
|
}],
|
|
|
|
// These labels appear in the legend and in the tooltips when hovering different arcs
|
|
labels: [
|
|
'Chrome',
|
|
'Firefox',
|
|
'Safari',
|
|
'Opera',
|
|
'IE',
|
|
]
|
|
};
|
|
var doughnutPieOptions = {
|
|
cutoutPercentage: 70,
|
|
animationEasing: "easeOutBounce",
|
|
animateRotate: true,
|
|
animateScale: false,
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
showScale: true,
|
|
legend: {
|
|
display: false
|
|
},
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
}
|
|
};
|
|
var doughnutChart = new Chart(doughnutChartCanvas, {
|
|
type: 'doughnut',
|
|
data: doughnutPieData,
|
|
options: doughnutPieOptions
|
|
});
|
|
}
|
|
if ($('#sourceLineChart').length) {
|
|
var sourceLineChartCanvas = $("#sourceLineChart").get(0).getContext("2d");
|
|
var sourceLineChart = new Chart(sourceLineChartCanvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"],
|
|
datasets: [{
|
|
label: 'Desktop',
|
|
data: [0, 16, 3, 5, 2, 12, 9, 3],
|
|
borderColor: successColor,
|
|
backgroundColor: successColor,
|
|
borderWidth: 2,
|
|
fill: false
|
|
}, {
|
|
label: 'Mobile',
|
|
data: [0, 23, 7, 12, 40, 17, 26, 13],
|
|
borderColor: primaryColor,
|
|
backgroundColor: primaryColor,
|
|
borderWidth: 2,
|
|
fill: false
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
animation: {
|
|
animateScale: true,
|
|
animateRotate: true
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 2
|
|
}
|
|
},
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
},
|
|
legend: false,
|
|
stepsize: 20,
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
color: 'rgba(0, 0, 0, 0)',
|
|
display: true
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
gridLines: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
display: true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if ($('#statistics-graph-1').length) {
|
|
var lineChartCanvas = $("#statistics-graph-1").get(0).getContext("2d");
|
|
var gradientStrokeFill_1 = lineChartCanvas.createLinearGradient(1, 2, 1, 400);
|
|
gradientStrokeFill_1.addColorStop(0, 'rgba(0,0,0,0.2)');
|
|
gradientStrokeFill_1.addColorStop(1, infoColor);
|
|
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
|
|
datasets: [{
|
|
label: 'Profit',
|
|
data: [3, 9, 7, 5, 7, 2, 8],
|
|
borderColor: infoColor,
|
|
backgroundColor: gradientStrokeFill_1,
|
|
borderWidth: 2,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: lineChartStyleOption_2
|
|
});
|
|
}
|
|
if ($('#statistics-graph-2').length) {
|
|
var lineChartCanvas = $("#statistics-graph-2").get(0).getContext("2d");
|
|
var gradientStrokeFill_1 = lineChartCanvas.createLinearGradient(1, 2, 1, 400);
|
|
gradientStrokeFill_1.addColorStop(0, 'rgba(0,0,0,0.2)');
|
|
gradientStrokeFill_1.addColorStop(1, primaryColor);
|
|
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
|
|
datasets: [{
|
|
label: 'Profit',
|
|
data: [7, 9, 2, 2, 8, 7, 9],
|
|
borderColor: primaryColor,
|
|
backgroundColor: gradientStrokeFill_1,
|
|
borderWidth: 2,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: lineChartStyleOption_2
|
|
});
|
|
}
|
|
if ($('#statistics-graph-3').length) {
|
|
var lineChartCanvas = $("#statistics-graph-3").get(0).getContext("2d");
|
|
var gradientStrokeFill_1 = lineChartCanvas.createLinearGradient(1, 2, 1, 400);
|
|
gradientStrokeFill_1.addColorStop(0, 'rgba(0,0,0,0.2)');
|
|
gradientStrokeFill_1.addColorStop(1, warningColor);
|
|
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
|
|
datasets: [{
|
|
label: 'Profit',
|
|
data: [5, 4, 7, 2, 9, 2, 8],
|
|
borderColor: warningColor,
|
|
backgroundColor: gradientStrokeFill_1,
|
|
borderWidth: 2,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: lineChartStyleOption_2
|
|
});
|
|
}
|
|
if ($('#statistics-graph-4').length) {
|
|
var lineChartCanvas = $("#statistics-graph-4").get(0).getContext("2d");
|
|
var gradientStrokeFill_1 = lineChartCanvas.createLinearGradient(1, 2, 1, 400);
|
|
gradientStrokeFill_1.addColorStop(0, 'rgba(0,0,0,0.2)');
|
|
gradientStrokeFill_1.addColorStop(1, dangerColor);
|
|
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7"],
|
|
datasets: [{
|
|
label: 'Profit',
|
|
data: [5, 2, 5, 2, 4, 4, 1],
|
|
borderColor: dangerColor,
|
|
backgroundColor: gradientStrokeFill_1,
|
|
borderWidth: 2,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: lineChartStyleOption_2
|
|
});
|
|
}
|
|
if ($('#review-rating-1').length) {
|
|
$('#review-rating-1').barrating({
|
|
theme: 'css-stars',
|
|
showSelectedRating: false,
|
|
initialRating: 4
|
|
});
|
|
}
|
|
if ($('#review-rating-2').length) {
|
|
$('#review-rating-2').barrating({
|
|
theme: 'css-stars',
|
|
showSelectedRating: false,
|
|
initialRating: 5
|
|
});
|
|
}
|
|
if ($('#review-rating-3').length) {
|
|
$('#review-rating-3').barrating({
|
|
theme: 'css-stars',
|
|
showSelectedRating: false,
|
|
initialRating: 3
|
|
});
|
|
}
|
|
if ($('#review-rating-4').length) {
|
|
$('#review-rating-4').barrating({
|
|
theme: 'css-stars',
|
|
showSelectedRating: false,
|
|
initialRating: 4
|
|
});
|
|
}
|
|
if ($('#review-rating-5').length) {
|
|
$('#review-rating-5').barrating({
|
|
theme: 'css-stars',
|
|
showSelectedRating: false,
|
|
initialRating: 2
|
|
});
|
|
}
|
|
if ($('#statistics-chart').length) {
|
|
var barChartCanvas = $("#statistics-chart").get(0).getContext("2d");
|
|
var barChart = new Chart(barChartCanvas, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7", "Day 8", "Day 9", "Day 10", ],
|
|
datasets: [{
|
|
label: 'Revenue',
|
|
data: [39, 19, 25, 16, 31, 39, 23, 20, 23, 18],
|
|
backgroundColor: successColor
|
|
},
|
|
{
|
|
label: 'Sales',
|
|
data: [27, 12, 26, 15, 21, 27, 13, 19, 32, 22],
|
|
backgroundColor: primaryColor
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
},
|
|
|
|
scales: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
yAxes: [{
|
|
stacked: true,
|
|
display: false,
|
|
gridLines: {
|
|
color: 'rgba(0, 0, 0, 0.03)',
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
stacked: true,
|
|
display: false,
|
|
barPercentage: 0.3,
|
|
gridLines: {
|
|
display: false,
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if ($('#balance-chart-1').length) {
|
|
var lineChartCanvas = $("#balance-chart-1").get(0).getContext("2d");
|
|
var data = {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7", "Day 8"],
|
|
datasets: [{
|
|
label: 'Balance',
|
|
data: [10, 2, 7, 3, 10, 0, 9, 0],
|
|
borderColor: primaryColor,
|
|
borderWidth: 2,
|
|
fill: false
|
|
}]
|
|
};
|
|
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
scales: {
|
|
yAxes: [{
|
|
display: false
|
|
}],
|
|
xAxes: [{
|
|
display: false
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 1
|
|
}
|
|
},
|
|
stepsize: 100
|
|
}
|
|
});
|
|
}
|
|
if ($('#balance-chart-2').length) {
|
|
var lineChartCanvas = $("#balance-chart-2").get(0).getContext("2d");
|
|
var data = {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7", "Day 8"],
|
|
datasets: [{
|
|
label: 'Credit',
|
|
data: [4, 1, 7, 4, 1, 8, 2, 8],
|
|
borderColor: primaryColor,
|
|
borderWidth: 2,
|
|
fill: false
|
|
}]
|
|
};
|
|
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: data,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
scales: {
|
|
yAxes: [{
|
|
display: false
|
|
}],
|
|
xAxes: [{
|
|
display: false
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 1
|
|
}
|
|
},
|
|
stepsize: 100
|
|
}
|
|
});
|
|
}
|
|
if ($("#UsersDoughnutChart").length) {
|
|
var doughnutChartCanvas = $("#UsersDoughnutChart").get(0).getContext("2d");
|
|
var doughnutPieData = {
|
|
datasets: [{
|
|
data: [80, 34, 100],
|
|
backgroundColor: [
|
|
successColor,
|
|
infoColor,
|
|
secondaryColor
|
|
],
|
|
borderColor: [
|
|
successColor,
|
|
infoColor,
|
|
secondaryColor
|
|
],
|
|
}],
|
|
labels: [
|
|
'Request',
|
|
'Email',
|
|
]
|
|
};
|
|
var doughnutPieOptions = {
|
|
cutoutPercentage: 70,
|
|
animationEasing: "easeOutBounce",
|
|
animateRotate: true,
|
|
animateScale: false,
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
showScale: true,
|
|
legend: {
|
|
display: false
|
|
},
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
}
|
|
};
|
|
var doughnutChart = new Chart(doughnutChartCanvas, {
|
|
type: 'doughnut',
|
|
data: doughnutPieData,
|
|
options: doughnutPieOptions
|
|
});
|
|
}
|
|
if ($('#conversionBarChart').length) {
|
|
var barChartCanvas = $("#conversionBarChart").get(0).getContext("2d");
|
|
var barChart = new Chart(barChartCanvas, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7", "Day 8", "Day 9", "Day 10"],
|
|
datasets: [{
|
|
label: 'Amount Due',
|
|
data: [39, 19, 25, 16, 31, 39, 12, 18, 33, 24],
|
|
backgroundColor: primaryColor
|
|
}]
|
|
},
|
|
options: {
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
},
|
|
|
|
scales: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
color: 'rgba(0, 0, 0, 0.03)',
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
display: false,
|
|
barPercentage: 0.4,
|
|
gridLines: {
|
|
display: false,
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if ($("#dashboard-bar-chart").length) {
|
|
var CurrentChartCanvas = $("#dashboard-bar-chart").get(0).getContext("2d");
|
|
var CurrentChart = new Chart(CurrentChartCanvas, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["1", "3", "6", "9", "12", "15", "18", "21", "24", "27"],
|
|
datasets: [{
|
|
label: 'SNOOZED',
|
|
data: [330, 380, 230, 400, 309, 430, 340, 310, 280, 300],
|
|
backgroundColor: '#8862e0'
|
|
},
|
|
{
|
|
label: 'COMPLETED',
|
|
data: [375, 440, 284, 450, 386, 480, 400, 365, 365, 435],
|
|
backgroundColor: '#49bbce'
|
|
},
|
|
{
|
|
label: 'OVERDUE',
|
|
data: [425, 480, 324, 490, 426, 520, 440, 405, 425, 475],
|
|
backgroundColor: '#e7487e'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 20,
|
|
bottom: 0
|
|
}
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
stacked: true,
|
|
ticks: {
|
|
beginAtZero: true,
|
|
fontColor: "#bdbcbe"
|
|
},
|
|
gridLines: {
|
|
color: "rgba(0, 0, 0, 0)",
|
|
display: false
|
|
},
|
|
barPercentage: 0.2
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if ($('#topSellingProducts').length) {
|
|
var topSellingChartCanvas = $("#topSellingProducts").get(0).getContext("2d");
|
|
|
|
var topSellingChart = new Chart(topSellingChartCanvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["2011", "2012", "2013", "2014", "2015", "2016", "2017"],
|
|
datasets: [{
|
|
label: 'Total Profit',
|
|
data: [150, 200, 150, 220, 350, 275, 365],
|
|
borderColor: primaryColor,
|
|
backgroundColor: 'rgba(0,0,0,0.2)',
|
|
borderWidth: 2,
|
|
fill: true
|
|
}, {
|
|
label: 'Total Sales',
|
|
data: [300, 400, 300, 440, 700, 550, 730],
|
|
borderColor: successColor,
|
|
backgroundColor: 'rgba(0,0,0,0.2)',
|
|
borderWidth: 2,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
yAxes: [{
|
|
display: false
|
|
}],
|
|
xAxes: [{
|
|
display: false
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 3
|
|
},
|
|
line: {
|
|
tension: 0
|
|
}
|
|
},
|
|
stepsize: 100
|
|
}
|
|
});
|
|
}
|
|
if ($("#realtime-statistics").length) {
|
|
var realtimeChartCanvas = $("#realtime-statistics").get(0).getContext("2d");
|
|
var realtimeChart = new Chart(realtimeChartCanvas, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
datasets: [{
|
|
label: 'Profit',
|
|
data: [330, 380, 230, 400, 309, 530, 340, 400, 490, 380, 300, 510],
|
|
backgroundColor: primaryColor
|
|
},
|
|
{
|
|
label: 'Target',
|
|
data: [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600],
|
|
backgroundColor: 'rgba(238, 242, 245, 1)'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
display: false,
|
|
gridLines: {
|
|
display: false
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
stacked: true,
|
|
ticks: {
|
|
beginAtZero: true,
|
|
fontColor: "#354168"
|
|
},
|
|
gridLines: {
|
|
color: "rgba(0, 0, 0, 0)",
|
|
display: false
|
|
},
|
|
barPercentage: 0.4
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if ($("#humanResouceDoughnutChart").length) {
|
|
var doughnutChartCanvas = $("#humanResouceDoughnutChart").get(0).getContext("2d");
|
|
var doughnutPieData = {
|
|
datasets: [{
|
|
data: [20, 80, 85, 45],
|
|
backgroundColor: [
|
|
successColor,
|
|
primaryColor,
|
|
dangerColor,
|
|
secondaryColor
|
|
],
|
|
borderColor: [
|
|
successColor,
|
|
primaryColor,
|
|
dangerColor,
|
|
secondaryColor
|
|
],
|
|
}],
|
|
|
|
// These labels appear in the legend and in the tooltips when hovering different arcs
|
|
labels: [
|
|
'Human Resources',
|
|
'Manger',
|
|
'Other'
|
|
]
|
|
};
|
|
var doughnutPieOptions = {
|
|
cutoutPercentage: 75,
|
|
animationEasing: "easeOutBounce",
|
|
animateRotate: true,
|
|
animateScale: false,
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
showScale: true,
|
|
legend: {
|
|
display: false
|
|
},
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
}
|
|
};
|
|
var doughnutChart = new Chart(doughnutChartCanvas, {
|
|
type: 'doughnut',
|
|
data: doughnutPieData,
|
|
options: doughnutPieOptions
|
|
});
|
|
}
|
|
if ($("#trafficSourceDoughnutChart").length) {
|
|
var doughnutChartCanvas = $("#trafficSourceDoughnutChart").get(0).getContext("2d");
|
|
var doughnutPieData = {
|
|
datasets: [{
|
|
data: [185, 85, 15],
|
|
backgroundColor: [
|
|
secondaryColor,
|
|
successColor,
|
|
dangerColor,
|
|
|
|
],
|
|
borderColor: [
|
|
secondaryColor,
|
|
successColor,
|
|
dangerColor,
|
|
|
|
],
|
|
}],
|
|
|
|
// These labels appear in the legend and in the tooltips when hovering different arcs
|
|
labels: [
|
|
'Human Resources',
|
|
'Manger',
|
|
'Other'
|
|
]
|
|
};
|
|
var doughnutPieOptions = {
|
|
cutoutPercentage: 75,
|
|
animationEasing: "easeOutBounce",
|
|
animateRotate: true,
|
|
animateScale: false,
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
showScale: true,
|
|
legend: {
|
|
display: false
|
|
},
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
}
|
|
};
|
|
var doughnutChart = new Chart(doughnutChartCanvas, {
|
|
type: 'doughnut',
|
|
data: doughnutPieData,
|
|
options: doughnutPieOptions
|
|
});
|
|
}
|
|
if ($('#todo-tags-1').length) {
|
|
$('#todo-tags-1').tagsInput({
|
|
'width': '100%',
|
|
'interactive': true,
|
|
'defaultText': 'Add More',
|
|
'removeWithBackspace': true,
|
|
'minChars': 0,
|
|
'maxChars': 20
|
|
});
|
|
}
|
|
if ($('#todo-tags-2').length) {
|
|
$('#todo-tags-2').tagsInput({
|
|
'width': '100%',
|
|
'interactive': true,
|
|
'defaultText': 'Add More',
|
|
'removeWithBackspace': true,
|
|
'minChars': 0,
|
|
'maxChars': 20, // if not provided there is no limit
|
|
'placeholderColor': '#666666'
|
|
});
|
|
}
|
|
if ($("#salesPrdictionDoughnutChart").length) {
|
|
var doughnutChartCanvas = $("#salesPrdictionDoughnutChart").get(0).getContext("2d");
|
|
var doughnutPieData = {
|
|
datasets: [{
|
|
data: [185, 85, 65],
|
|
backgroundColor: [
|
|
primaryColor,
|
|
warningColor,
|
|
successColor,
|
|
],
|
|
borderColor: [
|
|
primaryColor,
|
|
warningColor,
|
|
successColor,
|
|
],
|
|
}],
|
|
|
|
// These labels appear in the legend and in the tooltips when hovering different arcs
|
|
labels: [
|
|
'Human Resources',
|
|
'Manger',
|
|
'Other'
|
|
]
|
|
};
|
|
var doughnutPieOptions = {
|
|
cutoutPercentage: 75,
|
|
animationEasing: "easeOutBounce",
|
|
animateRotate: true,
|
|
animateScale: false,
|
|
responsive: true,
|
|
maintainAspectRatio: true,
|
|
showScale: true,
|
|
legend: {
|
|
display: false
|
|
},
|
|
layout: {
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
}
|
|
}
|
|
};
|
|
var doughnutChart = new Chart(doughnutChartCanvas, {
|
|
type: 'doughnut',
|
|
data: doughnutPieData,
|
|
options: doughnutPieOptions
|
|
});
|
|
}
|
|
if ($('#usersDoughnutChart').length) {
|
|
var g1
|
|
var g1 = new JustGage({
|
|
id: "usersDoughnutChart",
|
|
value: getRandomInt(0, 100),
|
|
min: 0,
|
|
max: 100,
|
|
gaugeWidthScale: 0.8,
|
|
hideInnerShadow: true,
|
|
customSectors: [{
|
|
color: dangerColor,
|
|
lo: 0,
|
|
hi: 25
|
|
}, {
|
|
color: warningColor,
|
|
lo: 25,
|
|
hi: 50
|
|
}, {
|
|
color: successColor,
|
|
lo: 50,
|
|
hi: 100
|
|
}],
|
|
label: "Daily average"
|
|
});
|
|
|
|
|
|
setInterval(function () {
|
|
g1.refresh(getRandomInt(20, 100));
|
|
}, 3500);
|
|
}
|
|
if ($('#product-area-chart').length) {
|
|
var lineChartCanvas = $("#product-area-chart").get(0).getContext("2d");
|
|
var data = {
|
|
labels: ["2013", "2014", "2014", "2015", "2016", "2017", "2018"],
|
|
datasets: [{
|
|
label: 'Support',
|
|
data: [150, 200, 150, 220, 350, 275, 365],
|
|
backgroundColor: 'rgba(52,110,240,0.7)',
|
|
borderColor: 'rgba(52,110,240,0.8)',
|
|
borderWidth: 2,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Product',
|
|
data: [300, 400, 300, 440, 700, 550, 730],
|
|
backgroundColor: 'rgba(0,187,248,0.7)',
|
|
borderColor: 'rgba(0,187,248,0.8)',
|
|
borderWidth: 2,
|
|
fill: true
|
|
}
|
|
]
|
|
};
|
|
var options = {
|
|
scales: {
|
|
yAxes: [{
|
|
display: false
|
|
}],
|
|
xAxes: [{
|
|
display: false
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 3
|
|
},
|
|
line: {
|
|
tension: 0
|
|
}
|
|
},
|
|
stepsize: 1
|
|
};
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: data,
|
|
options: options
|
|
});
|
|
}
|
|
});
|
|
})(jQuery) |