he tenido siertos problemas al intentar crear una gráfica en la que se muestre por meses (timeline), he intentedo viendo la documentación oficial de chartjs, pero me ha resultado complejo, quisiera saber si poseen algun ejemplo en el que se pueda recibir una fecha en formato YY-MM-DD en el eje "x" y un numero el costo en el eje "y".
El objetivo es consultar desde la base de datos, mediante ajax a un archivo .php, el cual devuelve información con una fecha como por ejemplo 2020-01-16.
La idea es mostrar la información de manera que se pueda saber la cantidad de registros por mes, por ejeplo mayo 6, junio x. Tengan un exelente día.
///grafica tres
///pruebas timeline indi
let myChart = document.getElementById('canvasTres').getContext('2d');
// Global Options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = '#777';
let massPopChart = new Chart(myChart, {
type:'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
data:{
// labels:['Boston', 'Worcester'],
datasets:[{
label:'Population',
data: [
{x:'2016-12-25', y:100},
{x:'2016-11-26', y:25},
{x:'2016-12-25', y:100},
{x:'2017-05-26', y:25},
{x:'2017-02-25', y:100},
{x:'2016-12-26', y:25}
],
//backgroundColor:'green',
backgroundColor:[
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)'
],
borderWidth:1,
borderColor:'#777',
hoverBorderWidth:3,
hoverBorderColor:'#000'
}]
},
options:{
title:{
display:true,
text:'timeline 123',
fontSize:25
},
legend:{
display:true,
position:'right',
labels:{
fontColor:'#000'
}
},
layout:{
padding:{
left:50,
right:0,
bottom:0,
top:0
}
},
tooltips:{
enabled:true
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month'
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!-- DONUT CHART INDICADOR TRES -->
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">CORRECTIVOS GENERADOS AL AÑO</h3>
</div>
<div class="box-body chart-responsive">
<div style="width: 75%">
<canvas id="canvasTres"></canvas>
</div>
</div>
</div>