| Current Path : /home/users/unlimited/www/facebook.codeskitter.site/admin-panel/assets/js/examples/ |
| Current File : /home/users/unlimited/www/facebook.codeskitter.site/admin-panel/assets/js/examples/dashboard.js |
'use strict';
$(document).ready(function () {
var colors = {
primary: $('.colors .bg-primary').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
secondary: $('.colors .bg-secondary').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
info: $('.colors .bg-info').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
success: $('.colors .bg-success').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
danger: $('.colors .bg-danger').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
warning: $('.colors .bg-warning').css('background-color').replace('rgb', '').replace(')', '').replace('(', '').split(','),
};
var rgbToHex = function (rgb) {
var hex = Number(rgb).toString(16);
if (hex.length < 2) {
hex = "0" + hex;
}
return hex;
};
var fullColorHex = function (r, g, b) {
var red = rgbToHex(r);
var green = rgbToHex(g);
var blue = rgbToHex(b);
return red + green + blue;
};
colors.primary = '#' + fullColorHex(colors.primary[0], colors.primary[1], colors.primary[2]);
colors.secondary = '#' + fullColorHex(colors.secondary[0], colors.secondary[1], colors.secondary[2]);
colors.info = '#' + fullColorHex(colors.info[0], colors.info[1], colors.info[2]);
colors.success = '#' + fullColorHex(colors.success[0], colors.success[1], colors.success[2]);
colors.danger = '#' + fullColorHex(colors.danger[0], colors.danger[1], colors.danger[2]);
colors.warning = '#' + fullColorHex(colors.warning[0], colors.warning[1], colors.warning[2]);
var chartColors = {
primary: {
base: '#3f51b5',
light: '#c0c5e4'
},
danger: {
base: '#f2125e',
light: '#fcd0df'
},
success: {
base: '#0acf97',
light: '#cef5ea'
},
warning: {
base: '#ff8300',
light: '#ffe6cc'
},
info: {
base: '#00bcd4',
light: '#e1efff'
},
dark: '#37474f',
facebook: '#3b5998',
twitter: '#55acee',
linkedin: '#0077b5',
instagram: '#517fa4',
whatsapp: '#25D366',
dribbble: '#ea4c89',
google: '#DB4437',
borderColor: '#e8e8e8',
fontColor: '#999'
};
if ($('body').hasClass('dark')) {
chartColors.borderColor = 'rgba(255, 255, 255, .1)';
chartColors.fontColor = 'rgba(255, 255, 255, .4)';
}
/// Charts
chart_demo_1();
chart_demo_2();
chart_demo_3();
chart_demo_4();
chart_demo_5();
chart_demo_6();
chart_demo_7();
chart_demo_8();
chart_demo_9();
chart_demo_10();
function chart_demo_1() {
if ($('#chart_demo_1').length) {
var element = document.getElementById("chart_demo_1");
element.height = 146;
new Chart(element, {
type: 'bar',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019"],
datasets: [
{
label: "Total Sales",
backgroundColor: colors.primary,
data: [133, 221, 783, 978, 214, 421, 211, 577]
}, {
label: "Average",
backgroundColor: colors.info,
data: [408, 947, 675, 734, 325, 672, 632, 213]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
fontSize: 11,
fontColor: chartColors.fontColor
},
gridLines: {
display: false,
}
}],
yAxes: [{
ticks: {
fontSize: 11,
fontColor: chartColors.fontColor
},
gridLines: {
color: chartColors.borderColor
}
}],
}
}
})
}
}
function chart_demo_2() {
if ($('#chart_demo_2').length) {
var ctx = document.getElementById('chart_demo_2').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ["Jun 2016", "Jul 2016", "Aug 2016", "Sep 2016", "Oct 2016", "Nov 2016", "Dec 2016", "Jan 2017", "Feb 2017", "Mar 2017", "Apr 2017", "May 2017"],
datasets: [{
label: "Rainfall",
backgroundColor: chartColors.primary.light,
borderColor: chartColors.primary.base,
data: [26.4, 39.8, 66.8, 66.4, 40.6, 55.2, 77.4, 69.8, 57.8, 76, 110.8, 142.6],
}]
},
options: {
legend: {
display: false,
labels: {
fontColor: chartColors.fontColor
}
},
title: {
display: true,
text: 'Precipitation in Toronto',
fontColor: chartColors.fontColor,
},
scales: {
yAxes: [{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor,
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Precipitation in mm',
fontColor: chartColors.fontColor,
}
}],
xAxes: [{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor,
beginAtZero: true
}
}]
}
}
});
}
}
function chart_demo_3() {
if ($('#chart_demo_3').length) {
var element = document.getElementById("chart_demo_3"),
ctx = element.getContext("2d");
new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: 'Success',
borderColor: colors.success,
data: [-10, 30, -20, 0, 25, 44, 30, 15, 20, 10, 5, -5],
pointRadius: 5,
pointHoverRadius: 7,
borderDash: [2, 2],
fill: false
}, {
label: 'Return',
fill: false,
borderDash: [2, 2],
borderColor: colors.danger,
data: [20, 0, 22, 39, -10, 19, -7, 0, 15, 0, -10, 5],
pointRadius: 5,
pointHoverRadius: 7
}]
},
options: {
responsive: true,
legend: {
display: false,
labels: {
fontColor: chartColors.fontColor
}
},
title: {
display: false,
fontColor: chartColors.fontColor
},
scales: {
xAxes: [{
gridLines: {
display: false,
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor,
display: false
}
}],
yAxes: [{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor,
min: -50,
max: 50
}
}],
}
}
});
}
}
function chart_demo_4() {
if ($('#chart_demo_4').length) {
var ctx = document.getElementById("chart_demo_4").getContext("2d");
var densityData = {
backgroundColor: chartColors.primary.light,
data: [10, 20, 40, 60, 80, 40, 60, 80, 40, 80, 20, 59]
};
new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [densityData]
},
options: {
scaleFontColor: "#FFFFFF",
legend: {
display: false,
labels: {
fontColor: chartColors.fontColor
}
},
scales: {
xAxes: [{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor
}
}],
yAxes: [{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor,
min: 0,
max: 100,
beginAtZero: true
}
}]
}
}
});
}
}
function chart_demo_5() {
if ($('#chart_demo_5').length) {
var ctx = document.getElementById('chart_demo_5').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{
label: 'Dataset 1',
backgroundColor: [
chartColors.info.base,
chartColors.success.base,
chartColors.danger.base,
chartColors.dark,
chartColors.warning.base,
],
yAxisID: 'y-axis-1',
data: [33, 56, -40, 25, 45]
},
{
label: 'Dataset 2',
backgroundColor: chartColors.info.base,
yAxisID: 'y-axis-2',
data: [23, 86, -40, 5, 45]
}
]
},
options: {
legend: {
labels: {
fontColor: chartColors.fontColor
}
},
responsive: true,
title: {
display: true,
text: 'Chart.js Bar Chart - Multi Axis',
fontColor: chartColors.fontColor
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
xAxes: [{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor
}
}],
yAxes: [
{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
},
{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
},
ticks: {
fontColor: chartColors.fontColor
}
}
],
}
}
});
}
}
function chart_demo_6() {
if ($('#chart_demo_6').length) {
var ctx = document.getElementById("chart_demo_6").getContext("2d");
var speedData = {
labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
datasets: [{
label: "Car Speed (mph)",
borderColor: chartColors.primary.base,
backgroundColor: 'rgba(0, 0, 0, 0',
data: [0, 59, 75, 20, 20, 55, 40]
}]
};
var chartOptions = {
legend: {
scaleFontColor: "#FFFFFF",
position: 'top',
labels: {
fontColor: chartColors.fontColor
}
},
scales: {
xAxes: [{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor
}
}],
yAxes: [{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor
}
}]
}
};
new Chart(ctx, {
type: 'line',
data: speedData,
options: chartOptions
});
}
}
function chart_demo_7() {
if ($('#chart_demo_7').length) {
var config = {
type: 'pie',
data: {
datasets: [{
borderWidth: 3,
borderColor: $('body').hasClass('dark') ? "#313852" : "rgba(255, 255, 255, 1)",
data: [
1242,
742,
442,
1742
],
backgroundColor: [
colors.danger,
colors.info,
colors.warning,
colors.success
],
label: 'Dataset 1'
}],
labels: [
'Organic Search',
'Email',
'Refferal',
'Social Media',
]
},
options: {
responsive: true,
legend: {
display: false
}
}
};
var ctx = document.getElementById('chart_demo_7').getContext('2d');
new Chart(ctx, config);
}
}
function chart_demo_8() {
if ($('#chart_demo_8').length) {
new Chart(document.getElementById("chart_demo_8"), {
type: 'radar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "1950",
fill: true,
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointBackgroundColor: "rgba(179,181,198,1)",
data: [-8.77, -55.61, 21.69, 6.62, 6.82]
}, {
label: "2050",
fill: true,
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointBackgroundColor: "rgba(255,99,132,1)",
data: [-25.48, 54.16, 7.61, 8.06, 4.45]
}
]
},
options: {
legend: {
labels: {
fontColor: chartColors.fontColor
}
},
scale: {
gridLines: {
color: chartColors.borderColor
}
},
title: {
display: true,
text: 'Distribution in % of world population',
fontColor: chartColors.fontColor
}
}
});
}
}
function chart_demo_9() {
if ($('#chart_demo_9').length) {
new Chart(document.getElementById("chart_demo_9"), {
type: 'horizontalBar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: colors.primary,
data: [2478, 2267, 734, 1284, 1933]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor,
display: false
}
}],
yAxes: [{
gridLines: {
color: chartColors.borderColor,
display: false
},
ticks: {
fontColor: chartColors.fontColor
},
barPercentage: 0.5
}]
}
}
});
}
}
function chart_demo_10() {
if ($('#chart_demo_10').length) {
var element = document.getElementById("chart_demo_10");
new Chart(element, {
type: 'bar',
data: {
labels: ["1900", "1950", "1999", "2050"],
datasets: [
{
label: "Europe",
type: "line",
borderColor: "#8e5ea2",
data: [408, 547, 675, 734],
fill: false
},
{
label: "Africa",
type: "line",
borderColor: "#3e95cd",
data: [133, 221, 783, 2478],
fill: false
},
{
label: "Europe",
type: "bar",
backgroundColor: chartColors.primary.base,
data: [408, 547, 675, 734],
},
{
label: "Africa",
type: "bar",
backgroundColor: chartColors.primary.light,
data: [133, 221, 783, 2478]
}
]
},
options: {
title: {
display: true,
text: 'Population growth (millions): Europe & Africa',
fontColor: chartColors.fontColor
},
legend: {
display: true,
labels: {
fontColor: chartColors.fontColor
}
},
scales: {
xAxes: [{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor
}
}],
yAxes: [{
gridLines: {
color: chartColors.borderColor
},
ticks: {
fontColor: chartColors.fontColor
}
}]
}
}
});
}
}
if ($('#circle-1').length) {
$('#circle-1').circleProgress({
startAngle: 1.55,
value: 0.65,
size: 90,
thickness: 10,
fill: {
color: colors.primary
}
});
}
if ($('#sales-circle-graphic').length) {
$('#sales-circle-graphic').circleProgress({
startAngle: 1.55,
value: 0.65,
size: 180,
thickness: 30,
fill: {
color: colors.primary
}
});
}
if ($('#circle-2').length) {
$('#circle-2').circleProgress({
startAngle: 1.55,
value: 0.35,
size: 90,
thickness: 10,
fill: {
color: colors.warning
}
});
}
////////////////////////////////////////////
if ($(".dashboard-pie-1").length) {
$(".dashboard-pie-1").peity("pie", {
fill: [colors.primaryLight, colors.primary],
radius: 30
});
}
if ($(".dashboard-pie-2").length) {
$(".dashboard-pie-2").peity("pie", {
fill: [colors.successLight, colors.success],
radius: 30
});
}
if ($(".dashboard-pie-3").length) {
$(".dashboard-pie-3").peity("pie", {
fill: [colors.warningLight, colors.warning],
radius: 30
});
}
if ($(".dashboard-pie-4").length) {
$(".dashboard-pie-4").peity("pie", {
fill: [colors.infoLight, colors.info],
radius: 30
});
}
////////////////////////////////////////////
function bar_chart() {
if ($('#chart-ticket-status').length > 0) {
var dataSource = [
{country: "USA", hydro: 59.8, oil: 937.6, gas: 582, coal: 564.3, nuclear: 187.9},
{country: "China", hydro: 74.2, oil: 308.6, gas: 35.1, coal: 956.9, nuclear: 11.3},
{country: "Russia", hydro: 40, oil: 128.5, gas: 361.8, coal: 105, nuclear: 32.4},
{country: "Japan", hydro: 22.6, oil: 241.5, gas: 64.9, coal: 120.8, nuclear: 64.8},
{country: "India", hydro: 19, oil: 119.3, gas: 28.9, coal: 204.8, nuclear: 3.8},
{country: "Germany", hydro: 6.1, oil: 123.6, gas: 77.3, coal: 85.7, nuclear: 37.8}
];
// Return with commas in between
var numberWithCommas = function (x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
var dataPack1 = [40, 47, 44, 38, 27, 40, 47, 44, 38, 27, 40, 27];
var dataPack2 = [10, 12, 7, 5, 4, 10, 12, 7, 5, 4, 10, 12];
var dataPack3 = [17, 11, 22, 18, 12, 17, 11, 22, 18, 12, 17, 11];
var dates = ["Jan", "Jan", "Jan", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var bar_ctx = document.getElementById('chart-ticket-status');
bar_ctx.height = 115;
new Chart(bar_ctx, {
type: 'bar',
data: {
labels: dates,
datasets: [
{
label: 'New Tickets',
data: dataPack1,
backgroundColor: colors.primary,
hoverBorderWidth: 0
},
{
label: 'Solved Tickets',
data: dataPack2,
backgroundColor: colors.success,
hoverBorderWidth: 0
},
{
label: 'Pending Tickets',
data: dataPack3,
backgroundColor: colors.info,
hoverBorderWidth: 0
},
]
},
options: {
legend: {
display: false
},
animation: {
duration: 10,
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
}
}
},
scales: {
xAxes: [{
stacked: true,
gridLines: {display: false},
ticks: {
fontSize: 11,
fontColor: chartColors.fontColor
}
}],
yAxes: [{
stacked: true,
ticks: {
callback: function (value) {
return numberWithCommas(value);
},
fontSize: 11,
fontColor: chartColors.fontColor
},
}],
}
},
plugins: [{
beforeInit: function (chart) {
chart.data.labels.forEach(function (value, index, array) {
var a = [];
a.push(value.slice(0, 5));
var i = 1;
while (value.length > (i * 5)) {
a.push(value.slice(i * 5, (i + 1) * 5));
i++;
}
array[index] = a;
})
}
}]
}
);
}
}
bar_chart();
function chart1() {
if ($('#chart1').length) {
var options = {
chart: {
type: 'bar',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
backgroundBarColors: ['red']
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 1,
colors: ['transparent']
},
colors: [colors.secondary, colors.info, colors.warning],
series: [{
name: 'Net Profit',
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
}, {
name: 'Revenue',
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
}, {
name: 'Free Cash Flow',
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
}],
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
legend: {
position: 'bottom',
offsetY: -10
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
}
};
var chart = new ApexCharts(
document.querySelector("#chart1"),
options
);
chart.render();
}
}
chart1();
function widget_chart1() {
if ($('#widget-chart1').length) {
var ctx = document.getElementById("widget-chart1");
ctx.height = 50;
new Chart(ctx.getContext('2d'), {
type: 'line',
data: {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sst", "Sun"],
datasets: [{
label: 'data-2',
data: [5, 15, 5, 20, 5, 15, 5],
backgroundColor: "rgba(0,0,255,0)",
borderWidth: 1,
borderColor: colors.success,
pointBorder: false,
}]
},
options: {
elements: {
point: {
radius: 0
}
},
tooltips: {
enabled: false
},
legend: {
display: false
},
scales: {
yAxes: [{
display: false,
}],
xAxes: [{
display: false
}]
},
}
});
}
}
widget_chart1();
function widget_chart2() {
if ($('#widget-chart2').length) {
var ctx = document.getElementById("widget-chart2");
ctx.height = 50;
var barChart = new Chart(ctx.getContext('2d'), {
type: 'line',
data: {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sst", "Sun"],
datasets: [{
label: 'data-2',
data: [5, 10, 10, 10, 5, 15, 10],
backgroundColor: "rgba(0,0,255,0)",
borderColor: colors.warning,
borderWidth: 1,
pointBorder: false,
}]
},
options: {
elements: {
point: {
radius: 0
}
},
tooltips: {
enabled: false
},
legend: {
display: false
},
scales: {
yAxes: [{
display: false
}],
xAxes: [{
display: false
}]
},
}
});
}
}
widget_chart2();
function widget_chart3() {
if ($('#widget-chart3').length) {
var ctx = document.getElementById("widget-chart3");
ctx.height = 50;
var barChart = new Chart(ctx.getContext('2d'), {
type: 'line',
data: {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sst", "Sun"],
datasets: [{
label: 'data-2',
data: [10, 5, 15, 5, 15, 5, 15],
backgroundColor: "rgba(0,0,255,0)",
borderColor: colors.danger,
borderWidth: 1,
pointBorder: false,
}]
},
options: {
elements: {
point: {
radius: 0
}
},
tooltips: {
enabled: false
},
legend: {
display: false
},
scales: {
yAxes: [{
display: false
}],
xAxes: [{
display: false
}]
},
}
});
}
}
widget_chart3();
});