File: //home/jibhires/www/assets/js/dashboard.js
(function($) {
'use strict';
$(function() {
// Remove pro banner on close
document.querySelector('#bannerClose').addEventListener('click',function() {
document.querySelector('#proBanner').classList.add('d-none');
});
Chart.defaults.global.legend.labels.usePointStyle = true;
if ($("#serviceSaleProgress").length) {
var bar = new ProgressBar.Circle(serviceSaleProgress, {
color: 'url(#gradient)',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 8,
trailWidth: 8,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 6 },
to: { color: '#57c7d4', width: 6 }
});
bar.animate(.65); // Number from 0.0 to 1.0
bar.path.style.strokeLinecap = 'round';
let linearGradient = '<defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"><stop offset="20%" stop-color="#da8cff"/><stop offset="50%" stop-color="#9a55ff"/></linearGradient></defs>';
bar.svg.insertAdjacentHTML('afterBegin', linearGradient);
}
if ($("#productSaleProgress").length) {
var bar = new ProgressBar.Circle(productSaleProgress, {
color: 'url(#productGradient)',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 8,
trailWidth: 8,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 6 },
to: { color: '#57c7d4', width: 6 }
});
bar.animate(.6); // Number from 0.0 to 1.0
bar.path.style.strokeLinecap = 'round';
let linearGradient = '<defs><linearGradient id="productGradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"><stop offset="40%" stop-color="#36d7e8"/><stop offset="70%" stop-color="#b194fa"/></linearGradient></defs>';
bar.svg.insertAdjacentHTML('afterBegin', linearGradient);
}
if ($("#points-chart").length) {
var ctx = document.getElementById('points-chart').getContext("2d");
var gradientStrokeViolet = ctx.createLinearGradient(0, 0, 0, 181);
gradientStrokeViolet.addColorStop(0, 'rgba(218, 140, 255, 1)');
gradientStrokeViolet.addColorStop(1, 'rgba(154, 85, 255, 1)');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
datasets: [
{
label: "North Zone",
borderColor: gradientStrokeViolet,
backgroundColor: gradientStrokeViolet,
hoverBackgroundColor: gradientStrokeViolet,
pointRadius: 0,
fill: false,
borderWidth: 1,
fill: 'origin',
data: [20, 40, 15, 35, 25, 50, 30, 20]
},
{
label: "South Zone",
borderColor: '#e9eaee',
backgroundColor: '#e9eaee',
hoverBackgroundColor: '#e9eaee',
pointRadius: 0,
fill: false,
borderWidth: 1,
fill: 'origin',
data: [40, 30, 20, 10, 50, 15, 35, 20]
}
]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
display: false,
min: 0,
stepSize: 10
},
gridLines: {
drawBorder: false,
display: false
}
}],
xAxes: [{
gridLines: {
display:false,
drawBorder: false,
color: 'rgba(0,0,0,1)',
zeroLineColor: '#eeeeee'
},
ticks: {
padding: 20,
fontColor: "#9c9fa6",
autoSkip: true,
},
barPercentage: 0.7
}]
}
},
elements: {
point: {
radius: 0
}
}
})
}
if ($("#events-chart").length) {
var ctx = document.getElementById('events-chart').getContext("2d");
var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 181);
gradientStrokeBlue.addColorStop(0, 'rgba(54, 215, 232, 1)');
gradientStrokeBlue.addColorStop(1, 'rgba(177, 148, 250, 1)');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
datasets: [
{
label: "Domestic",
borderColor: gradientStrokeBlue,
backgroundColor: gradientStrokeBlue,
hoverBackgroundColor: gradientStrokeBlue,
pointRadius: 0,
fill: false,
borderWidth: 1,
fill: 'origin',
data: [50, 40, 15, 35, 25, 50, 30, 20]
},
{
label: "International",
borderColor: '#e9eaee',
backgroundColor: '#e9eaee',
hoverBackgroundColor: '#e9eaee',
pointRadius: 0,
fill: false,
borderWidth: 1,
fill: 'origin',
data: [40, 30, 20, 10, 50, 15, 35, 20]
}
]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
display: false,
min: 0,
stepSize: 10
},
gridLines: {
drawBorder: false,
display: false
}
}],
xAxes: [{
gridLines: {
display:false,
drawBorder: false,
color: 'rgba(0,0,0,1)',
zeroLineColor: '#eeeeee'
},
ticks: {
padding: 20,
fontColor: "#9c9fa6",
autoSkip: true,
},
barPercentage: 0.7
}]
}
},
elements: {
point: {
radius: 0
}
}
})
}
if ($("#visit-sale-chart").length) {
Chart.defaults.global.legend.labels.usePointStyle = true;
var ctx = document.getElementById('visit-sale-chart').getContext("2d");
var gradientStrokeViolet = ctx.createLinearGradient(0, 0, 0, 181);
gradientStrokeViolet.addColorStop(0, 'rgba(218, 140, 255, 1)');
gradientStrokeViolet.addColorStop(1, 'rgba(154, 85, 255, 1)');
var gradientLegendViolet = 'linear-gradient(to right, rgba(218, 140, 255, 1), rgba(154, 85, 255, 1))';
var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 360);
gradientStrokeBlue.addColorStop(0, 'rgba(54, 215, 232, 1)');
gradientStrokeBlue.addColorStop(1, 'rgba(177, 148, 250, 1)');
var gradientLegendBlue = 'linear-gradient(to right, rgba(54, 215, 232, 1), rgba(177, 148, 250, 1))';
var gradientStrokeRed = ctx.createLinearGradient(0, 0, 0, 300);
gradientStrokeRed.addColorStop(0, 'rgba(255, 191, 150, 1)');
gradientStrokeRed.addColorStop(1, 'rgba(254, 112, 150, 1)');
var gradientLegendRed = 'linear-gradient(to right, rgba(255, 191, 150, 1), rgba(254, 112, 150, 1))';
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG'],
datasets: [
{
label: "CAN",
borderColor: gradientStrokeViolet,
backgroundColor: gradientStrokeViolet,
hoverBackgroundColor: gradientStrokeViolet,
legendColor: gradientLegendViolet,
pointRadius: 0,
fill: false,
borderWidth: 1,
fill: 'origin',
data: [20, 40, 15, 35, 25, 50, 30, 20]
},
{
label: "USA",
borderColor: gradientStrokeRed,
backgroundColor: gradientStrokeRed,
hoverBackgroundColor: gradientStrokeRed,
legendColor: gradientLegendRed,
pointRadius: 0,
fill: false,
borderWidth: 1,
fill: 'origin',
data: [40, 30, 20, 10, 50, 15, 35, 40]
},
{
label: "UK",
borderColor: gradientStrokeBlue,
backgroundColor: gradientStrokeBlue,
hoverBackgroundColor: gradientStrokeBlue,
legendColor: gradientLegendBlue,
pointRadius: 0,
fill: false,
borderWidth: 1,
fill: 'origin',
data: [70, 10, 30, 40, 25, 50, 15, 30]
}
]
},
options: {
responsive: true,
legend: false,
legendCallback: function(chart) {
var text = [];
text.push('<ul>');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li><span class="legend-dots" style="background:' +
chart.data.datasets[i].legendColor +
'"></span>');
if (chart.data.datasets[i].label) {
text.push(chart.data.datasets[i].label);
}
text.push('</li>');
}
text.push('</ul>');
return text.join('');
},
scales: {
yAxes: [{
ticks: {
display: false,
min: 0,
stepSize: 20,
max: 80
},
gridLines: {
drawBorder: false,
color: 'rgba(235,237,242,1)',
zeroLineColor: 'rgba(235,237,242,1)'
}
}],
xAxes: [{
gridLines: {
display:false,
drawBorder: false,
color: 'rgba(0,0,0,1)',
zeroLineColor: 'rgba(235,237,242,1)'
},
ticks: {
padding: 20,
fontColor: "#9c9fa6",
autoSkip: true,
},
categoryPercentage: 0.5,
barPercentage: 0.5
}]
}
},
elements: {
point: {
radius: 0
}
}
})
$("#visit-sale-chart-legend").html(myChart.generateLegend());
}
if ($("#visit-sale-chart-dark").length) {
Chart.defaults.global.legend.labels.usePointStyle = true;
var ctx = document.getElementById('visit-sale-chart-dark').getContext("2d");
var gradientStrokeViolet = ctx.createLinearGradient(0, 0, 0, 181);
gradientStrokeViolet.addColorStop(0, 'rgba(218, 140, 255, 1)');
gradientStrokeViolet.addColorStop(1, 'rgba(154, 85, 255, 1)');
var gradientLegendViolet = 'linear-gradient(to right, rgba(218, 140, 255, 1), rgba(154, 85, 255, 1))';
var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 360);
gradientStrokeBlue.addColorStop(0, 'rgba(54, 215, 232, 1)');
gradientStrokeBlue.addColorStop(1, 'rgba(177, 148, 250, 1)');
var gradientLegendBlue = 'linear-gradient(to right, rgba(54, 215, 232, 1), rgba(177, 148, 250, 1))';
var gradientStrokeRed = ctx.createLinearGradient(0, 0, 0, 300);
gradientStrokeRed.addColorStop(0, 'rgba(255, 191, 150, 1)');
gradientStrokeRed.addColorStop(1, 'rgba(254, 112, 150, 1)');
var gradientLegendRed = 'linear-gradient(to right, rgba(255, 191, 150, 1), rgba(254, 112, 150, 1))';
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG'],
datasets: [
{
label: "CHN",
borderColor: gradientStrokeViolet,
backgroundColor: gradientStrokeViolet,
hoverBackgroundColor: gradientStrokeViolet,
legendColor: gradientLegendViolet,
pointRadius: 0,
fill: false,
borderWidth: 1,
fill: 'origin',
data: [20, 40, 15, 35, 25, 50, 30, 20]
},
{
label: "USA",
borderColor: gradientStrokeRed,
backgroundColor: gradientStrokeRed,
hoverBackgroundColor: gradientStrokeRed,
legendColor: gradientLegendRed,
pointRadius: 0,
fill: false,
borderWidth: 1,
fill: 'origin',
data: [40, 30, 20, 10, 50, 15, 35, 40]
},
{
label: "UK",
borderColor: gradientStrokeBlue,
backgroundColor: gradientStrokeBlue,
hoverBackgroundColor: gradientStrokeBlue,
legendColor: gradientLegendBlue,
pointRadius: 0,
fill: false,
borderWidth: 1,
fill: 'origin',
data: [70, 10, 30, 40, 25, 50, 15, 30]
}
]
},
options: {
responsive: true,
legend: false,
legendCallback: function(chart) {
var text = [];
text.push('<ul>');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li><span class="legend-dots" style="background:' +
chart.data.datasets[i].legendColor +
'"></span>');
if (chart.data.datasets[i].label) {
text.push(chart.data.datasets[i].label);
}
text.push('</li>');
}
text.push('</ul>');
return text.join('');
},
scales: {
yAxes: [{
ticks: {
display: false,
min: 0,
stepSize: 20,
max: 80
},
gridLines: {
drawBorder: false,
color: '#322f2f',
zeroLineColor: '#322f2f'
}
}],
xAxes: [{
gridLines: {
display:false,
drawBorder: false,
color: 'rgba(0,0,0,1)',
zeroLineColor: 'rgba(235,237,242,1)'
},
ticks: {
padding: 20,
fontColor: "#9c9fa6",
autoSkip: true,
},
categoryPercentage: 0.5,
barPercentage: 0.5
}]
}
},
elements: {
point: {
radius: 0
}
}
})
$("#visit-sale-chart-legend-dark").html(myChart.generateLegend());
}
if ($("#traffic-chart").length) {
var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 181);
gradientStrokeBlue.addColorStop(0, 'rgba(54, 215, 232, 1)');
gradientStrokeBlue.addColorStop(1, 'rgba(177, 148, 250, 1)');
var gradientLegendBlue = 'linear-gradient(to right, rgba(54, 215, 232, 1), rgba(177, 148, 250, 1))';
var gradientStrokeRed = ctx.createLinearGradient(0, 0, 0, 50);
gradientStrokeRed.addColorStop(0, 'rgba(255, 191, 150, 1)');
gradientStrokeRed.addColorStop(1, 'rgba(254, 112, 150, 1)');
var gradientLegendRed = 'linear-gradient(to right, rgba(255, 191, 150, 1), rgba(254, 112, 150, 1))';
var gradientStrokeGreen = ctx.createLinearGradient(0, 0, 0, 300);
gradientStrokeGreen.addColorStop(0, 'rgba(6, 185, 157, 1)');
gradientStrokeGreen.addColorStop(1, 'rgba(132, 217, 210, 1)');
var gradientLegendGreen = 'linear-gradient(to right, rgba(6, 185, 157, 1), rgba(132, 217, 210, 1))';
var trafficChartData = {
datasets: [{
data: [30, 30, 40],
backgroundColor: [
gradientStrokeBlue,
gradientStrokeGreen,
gradientStrokeRed
],
hoverBackgroundColor: [
gradientStrokeBlue,
gradientStrokeGreen,
gradientStrokeRed
],
borderColor: [
gradientStrokeBlue,
gradientStrokeGreen,
gradientStrokeRed
],
legendColor: [
gradientLegendBlue,
gradientLegendGreen,
gradientLegendRed
]
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Search Engines',
'Direct Click',
'Bookmarks Click',
]
};
var trafficChartOptions = {
responsive: true,
animation: {
animateScale: true,
animateRotate: true
},
legend: false,
legendCallback: function(chart) {
var text = [];
text.push('<ul>');
for (var i = 0; i < trafficChartData.datasets[0].data.length; i++) {
text.push('<li><span class="legend-dots" style="background:' +
trafficChartData.datasets[0].legendColor[i] +
'"></span>');
if (trafficChartData.labels[i]) {
text.push(trafficChartData.labels[i]);
}
text.push('<span class="float-right">'+trafficChartData.datasets[0].data[i]+"%"+'</span>')
text.push('</li>');
}
text.push('</ul>');
return text.join('');
}
};
var trafficChartCanvas = $("#traffic-chart").get(0).getContext("2d");
var trafficChart = new Chart(trafficChartCanvas, {
type: 'doughnut',
data: trafficChartData,
options: trafficChartOptions
});
$("#traffic-chart-legend").html(trafficChart.generateLegend());
}
if ($("#inline-datepicker").length) {
$('#inline-datepicker').datepicker({
enableOnReadonly: true,
todayHighlight: true,
});
}
});
})(jQuery);
$(function () {
/* ChartJS
* -------
* Here we will create a few charts using ChartJS
*/
//--------------
//- AREA CHART -
//--------------
// Get context with jQuery - using jQuery's .get() method.
var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
var areaChartData = {
labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label : 'Digital Goods',
backgroundColor : 'rgba(60,141,188,0.9)',
borderColor : 'rgba(60,141,188,0.8)',
pointRadius : false,
pointColor : '#3b8bba',
pointStrokeColor : 'rgba(60,141,188,1)',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data : [28, 48, 40, 19, 86, 27, 90]
},
{
label : 'Electronics',
backgroundColor : 'rgba(200, 150, 30, 1)',
borderColor : 'rgba(210, 214, 222, 1)',
pointRadius : false,
pointColor : 'rgba(210, 214, 222, 1)',
pointStrokeColor : '#c1c7d1',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
data : [66, 59, 80, 81, 56, 55, 41]
},
]
}
var areaChartOptions = {
maintainAspectRatio : false,
responsive : true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines : {
display : false,
}
}],
yAxes: [{
gridLines : {
display : false,
}
}]
}
}
// This will get the first returned node in the jQuery collection.
var areaChart = new Chart(areaChartCanvas, {
type: 'bar',
data: areaChartData,
options: areaChartOptions
})
//-------------
//- LINE CHART -
//--------------
var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
var lineChartOptions = jQuery.extend(true, {}, areaChartOptions)
var lineChartData = jQuery.extend(true, {}, areaChartData)
lineChartData.datasets[0].fill = false;
lineChartData.datasets[1].fill = false;
lineChartOptions.datasetFill = false
var lineChart = new Chart(lineChartCanvas, {
type: 'line',
data: lineChartData,
options: lineChartOptions
})
//-------------
//- DONUT CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
var donutData = {
labels: [
'Chrome',
'IE',
'FireFox',
'Safari',
'Opera',
'Navigator',
],
datasets: [
{
data: [700,500,400,600,300,100],
backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
}
]
}
var donutOptions = {
maintainAspectRatio : false,
responsive : true,
}
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
var donutChart = new Chart(donutChartCanvas, {
type: 'doughnut',
data: donutData,
options: donutOptions
})
//-------------
//- PIE CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
var pieData = donutData;
var pieOptions = {
maintainAspectRatio : false,
responsive : true,
}
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
var pieChart = new Chart(pieChartCanvas, {
type: 'pie',
data: pieData,
options: pieOptions
})
//-------------
//- BAR CHART -
//-------------
var barChartCanvas = $('#barChart').get(0).getContext('2d')
var barChartData = jQuery.extend(true, {}, areaChartData)
var temp0 = areaChartData.datasets[0]
var temp1 = areaChartData.datasets[1]
barChartData.datasets[0] = temp1
barChartData.datasets[1] = temp0
var barChartOptions = {
responsive : true,
maintainAspectRatio : false,
datasetFill : false
}
var barChart = new Chart(barChartCanvas, {
type: 'bar',
data: barChartData,
options: barChartOptions
})
//---------------------
//- STACKED BAR CHART -
//---------------------
var stackedBarChartCanvas = $('#stackedBarChart').get(0).getContext('2d')
var stackedBarChartData = jQuery.extend(true, {}, barChartData)
var stackedBarChartOptions = {
responsive : true,
maintainAspectRatio : false,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
var stackedBarChart = new Chart(stackedBarChartCanvas, {
type: 'bar',
data: stackedBarChartData,
options: stackedBarChartOptions
})
})
// $(document).ready(function () {
// showGraph();
// });
// function showGraph()
// {
// {
// $.post("data.php",
// function (data)
// {
// console.log(data);
// var name = [];
// var marks = [];
// for (var i in data) {
// name.push(data[i].ServiceName);
// marks.push(data[i].population);
// }
// var barChartOptions = {
// responsive : true,
// maintainAspectRatio : false,
// datasetFill : false,
// scales:{
// yAxes:[{
// ticks:{
// beginAtZero: true
// }
// }]
// }
// }
// var chartdata = {
// labels: name,
// datasets: [
// {
// label: 'Student Marks',
// backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
// borderColor: '#46d5f1',
// hoverBackgroundColor: '#CCCCCC',
// hoverBorderColor: '#666666',
// data: marks
// }
// ]
// };
// var graphTarget = $("#graphCanvas");
// var barGraph = new Chart(graphTarget, {
// type: 'bar',
// data: chartdata,
// options: barChartOptions
// });
// });
// }
// }
$(document).ready(function(){
$.ajax({
url: "data.php",
method: "GET",
success: function(data){
console.log(data);
var name = [];
var marks = [];
for (var i in data){
name.push(data[i].Sector);
marks.push(data[i].total);
}
var chartdata = {
labels: name,
datasets: [{
label: 'student marks',
backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
borderColor: 'rgba(134, 159, 152, 1)',
hoverBackgroundColor: 'rgba(230, 236, 235, 0.75)',
hoverBorderColor: 'rgba(230, 236, 235, 0.75)',
data: marks
}]
};
var graphTarget = $("#graphCanvas");
var barGraph = new Chart(graphTarget, {
type: 'bar',
data: chartdata,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
},
error: function(data) {
console.log(data);
}
});
});
$(document).ready(function () {
showGraph2();
});
function showGraph2()
{
{
$.post("data.php",
function (data)
{
console.log(data);
var name = [];
var marks = [];
for (var i in data) {
name.push(data[i].Sector);
marks.push(data[i].total);
}
var chartdata = {
labels: name,
datasets: [
{
label: 'Student Marks',
backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
// borderColor: '#46d5f1',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
data: marks
}
]
};
var graphTarget = $("#graphCanvas2");
var pieChart = new Chart(graphTarget, {
type: 'pie',
data: chartdata
});
});
}
}
// * Author Name: MH RONY.
// * GigHub Link: https://github.com/dev-mhrony
// * Facebook Link:https://www.facebook.com/dev.mhrony
// * Youtube Link: https://www.youtube.com/channel/UChYhUxkwDNialcxj-OFRcDw
// for any PHP, Laravel, Python, Dart, Flutter work contact me at developer.mhrony@gmail.com
// * Visit My Website : developerrony.com