| Server IP : 74.208.127.88 / Your IP : 3.129.206.232 Web Server : Apache/2.4.41 (Ubuntu) System : Linux ubuntu 5.4.0-163-generic #180-Ubuntu SMP Tue Sep 5 13:21:23 UTC 2023 x86_64 User : www-data ( 33) PHP Version : 7.4.3-4ubuntu2.29 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/html/muebles/js/charts/ |
Upload File : |
(function ($) {
"use strict";
/*----------------------------------------*/
/* 1. Basic Line Chart
/*----------------------------------------*/
var ctx = document.getElementById("basiclinechart");
var basiclinechart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fill: false,
backgroundColor: '#303030',
borderColor: '#303030',
data: [3, -5, -2, 3, 9, 12, 19]
}, {
label: "My Second dataset",
fill: false,
backgroundColor: '#03a9f4',
borderColor: '#03a9f4',
data: [-12, -3, -4, 6, 3, 7, 10]
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Basic Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
},
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
});
/*----------------------------------------*/
/* 2. Line Chart Multi axis
/*----------------------------------------*/
var ctx = document.getElementById("linechartmultiaxis");
var linechartmultiaxis = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fill: false,
backgroundColor: '#303030',
borderColor: '#303030',
data: [3, -5, -2, 3, 9, 12, 19],
yAxisID: "y-axis-1"
}, {
label: "My Second dataset",
fill: false,
backgroundColor: '#03a9f4',
borderColor: '#03a9f4',
data: [-12, -3, -4, 6, 3, 7, -20],
yAxisID: "y-axis-2"
}]
},
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title:{
display: true,
text:'Line Chart Multi Axis'
},
scales: {
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
}, {
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
drawOnChartArea: false,
},
}],
}
}
});
/*----------------------------------------*/
/* 3. Line Chart stepped
/*----------------------------------------*/
var ctx = document.getElementById("linechartstepped");
var linechartstepped = new Chart(ctx, {
type: 'line',
data: {
labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
datasets: [{
label: "steppedLine",
fill: false,
backgroundColor: '#303030',
borderColor: '#303030',
data: [3, -5, -2, 3, 9, 12, 19]
}]
},
options: {
responsive: true,
title: {
display: true,
text:'Line Chart stepped',
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}],
yAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}]
}
}
});
/*----------------------------------------*/
/* 4. Line Chart Interpolation
/*----------------------------------------*/
var ctx = document.getElementById("linechartinterpolation");
var linechartinterpolation = new Chart(ctx, {
type: 'line',
data: {
labels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
datasets: [{
label: "Cubic interpolation",
fill: false,
backgroundColor: '#303030',
borderColor: '#303030',
data: [0, 15, 17, 200, 0, 12, -200, 5, 200, 8, 200, 12, 200],
cubicInterpolationMode: 'monotone'
}, {
label: "Cubic interpolation",
fill: false,
backgroundColor: '#03a9f4',
borderColor: '#03a9f4',
data: [-100, 200, 12, -200, 12, 200, 8, -200, 9, 200, -200, -12, -200]
}, {
label: "Linear interpolation",
fill: false,
backgroundColor: '#ff0000',
borderColor: '#ff0000',
data: [-8, -9, -10, -11, 0, 0, 0, 12, 10, 8, 9, 7, 12],
lineTension: 0
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Line Chart interpolation'
},
tooltips: {
mode: 'index'
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}],
yAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}]
}
}
});
/*----------------------------------------*/
/* 5. Line Chart styles
/*----------------------------------------*/
var ctx = document.getElementById("linechartstyles");
var linechartstyles = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "Unfilled",
fill: false,
backgroundColor: '#303030',
borderColor: '#303030',
data: [0, 15, 17, 200, 0, 12, -200, 5]
}, {
label: "Dashed",
fill: false,
backgroundColor: '#03a9f4',
borderColor: '#03a9f4',
borderDash: [5, 5],
data: [-100, 200, 12, -200, 12, 200, 8]
}, {
label: "Filled",
fill: true,
backgroundColor: '#ff0000',
borderColor: '#ff0000',
data: [-200, -9, 200, -11, 0, -200, 0]
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Line Chart Style'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}],
yAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}]
}
}
});
/*----------------------------------------*/
/* 6. Line Chart point circle
/*----------------------------------------*/
var ctx = document.getElementById("linechartpointcircle");
var linechartpointcircle = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: '#03a9f4',
borderColor: '#03a9f4',
data: [0, 10, 20, 30, 40, 50, 60],
fill: false,
pointRadius: 4,
pointHoverRadius: 10,
showLine: false
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Line Chart Point Circle'
},
legend: {
display: false
},
elements: {
point: {
pointStyle: 'circle',
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}],
yAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}]
}
}
});
/*----------------------------------------*/
/* 6. Line Chart point rectRot
/*----------------------------------------*/
var ctx = document.getElementById("linechartpointrectRot");
var linechartpointrectRot = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: '#03a9f4',
borderColor: '#03a9f4',
data: [60, 50, 40, 30, 20, 10, 0],
fill: false,
pointRadius: 6,
pointHoverRadius: 10,
showLine: false
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Line Chart Point rectRot'
},
legend: {
display: false
},
elements: {
point: {
pointStyle: 'rectRot',
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}],
yAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}]
}
}
});
/*----------------------------------------*/
/* 6. Line Chart point cross
/*----------------------------------------*/
var ctx = document.getElementById("linechartpointcross");
var linechartpointcross = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: '#03a9f4',
borderColor: '#03a9f4',
data: [0, 10, 60, 30, 0, 80, 60],
fill: false,
pointRadius: 6,
pointHoverRadius: 10,
showLine: false
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Line Chart Point cross'
},
legend: {
display: false
},
elements: {
point: {
pointStyle: 'cross',
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}],
yAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
},
ticks: {
fontColor: "#fff", // this here
}
}]
}
}
});
})(jQuery);