0

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>

2 respuestas 2

0

Tal vez te sirva este ejemplo: https://echarts.apache.org/examples/en/editor.html?c=bar-label-rotation

En mi caso particular, utilizo en vez de chart.js echart.js un librería free mucho mas potente y con mucha mas cantidad de gráficos. Este ejemplo tiene en el eje de las x el año y en de las y el valor, pero perfectamente se puede ingresar cualquier cosa para el eje de las x (en particular fechas).

Espero te sirva!!!

1
  • La revisé, me parece potente, como usted lo menciona en cuanto a la calidad de los gráficos y animaciones. Commented el 14 jun. 2021 a las 19:07
0

En chart hay una etiqueta llamada labels. Esa parte contendrá los del eje Y y data, los del eje X.

Ejemplo:

const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
};
2
  • Gracias por sus aportes. Commented el 14 jun. 2021 a las 19:07
  • necesito algo similar, pero por ejemplo en ves de cada label tener un data, que cada label pueda tener varios. por ejemplo enero:-1,0.1,0.5 y así sucesivamente por los demás labels
    – CRIS19N
    Commented el 7 nov. 2021 a las 4:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.