Demo.js
demo = {
initDocChart: function() {
chartColor = "#FFFFFF";
// General configuration for the charts with Line gradientStroke
gradientChartOptionsConfiguration = {
maintainAspectRatio: false,
exportEnabled: true,
legend: {
display: false
},
tooltips: {
bodySpacing: 4,
mode: "nearest",
intersect: 0,
position: "nearest",
xPadding: 10,
yPadding: 10,
caretPadding: 10
},
responsive: true,
scales: {
yAxes: [{
display: 0,
gridLines: 0,
ticks: {
display: false
},
gridLines: {
zeroLineColor: "transparent",
drawTicks: false,
display: false,
drawBorder: false
}
}],
xAxes: [{
display: 0,
gridLines: 0,
ticks: {
display: false
},
gridLines: {
zeroLineColor: "transparent",
drawTicks: false,
display: false,
drawBorder: false
}
}]
},
layout: {
padding: {
left: 0,
right: 0,
top: 15,
bottom: 15
}
}
};
},
initDashboardPageCharts: function() {
gradientChartOptionsConfigurationWithTooltipPurple = {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
backgroundColor: '#f5f5f5',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales: {
yAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(29,140,248,0.0)',
zeroLineColor: "transparent",
},
ticks: {
suggestedMin: 60,
suggestedMax: 125,
padding: 20,
fontColor: "#9a9a9a"
}
}],
xAxes: [{
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(225,78,202,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 20,
fontColor: "#9a9a9a"
}
}]
}
};
//****************************************************
//* aqui van los datos para la grafica del dashboard *
//***************************************************
function recogerDatos() {
const xhttp = new XMLHttpRequest();
xhttp.open('GET','assets/js/mqtt/ajax.php',true);
xhttp.send();
xhttp.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
let datos = JSON.parse(this.responseText);
let datox = datos.hora;
let datoy = datos.ppm;
console.log(`datox = ${datox} y datoy = ${datoy}`);
}
}
}
window.setTimeout(recogerDatos, 10000);
var datoy=[];
var datox=[];
//setInterval(function() {
for(var i=0;i<=120;i++){
datoy[i]= Math.floor((Math.random() * (1200 - 300 + 1)) + 300);
datox[i]= i;
}
//console.log(datoy);
//}, 3000);
var ctx = document.getElementById("chartLinePurple").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
gradientStroke.addColorStop(1, 'rgba(72,72,176,0.2)');
gradientStroke.addColorStop(0.2, 'rgba(72,72,176,0.0)');
gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
var data = {
labels: datox,
datasets: [{
label: "Data",
fill: true,
backgroundColor: gradientStroke,
borderColor: '#d048b6',
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: '#d048b6',
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: '#d048b6',
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 4,
data: datoy,
}]
};
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: gradientChartOptionsConfigurationWithTooltipPurple
});
},
};
Luego la llamo desde funciones.js dependiendo que selecciono
$("select[name=dispositivo]").change(function() {
seleccion = $(this).children("option:selected").val();
console.log("Has seleccionado - " + seleccion);
//pasamos los datos a ajax para mostrar la grafica
action = "grafica";
$.ajax({
url: 'assets/js/mqtt/ajax.php',
type: 'GET',
async: true,
data:{action:action,seleccion:seleccion},
success:function(response){
//console.log(response);
},
error:function(error){
console.log(error);
}
}); });