Esta es la primera vez que trabajo con Chart.js para hacer un gráfico para mis datos. Estoy buscando hacer un gráfico a partir de algunos datos específicos de mi base de datos que exporté en una matriz durante el procesamiento en php. Sin embargo, me siento un poco perdido. Así que para ser más específicos:
Tengo una matriz que se ve así:
Array ( [0] => 2021-07-02 [1] => 2021-07-20 [2] => 06:47 [3] => 23:47 [4] => 09:47 [5] => 21:47 [6] => 18:27 [7] => 21:47 [8] => 03:47 [9] => 06:50 [10] => 00:48 [11] => 21:48 [12] => 171.2786 [13] => 170.9501 [14] => 170.2825 [15] => 173.1435 [16] => 171.4377 )Los primeros dos elementos son algunas fechas y horas y los siguientes son intervalos de tiempo seleccionados por el usuario para calcular un promedio de los valores entre las entradas (una entrada en la tabla se ve así):
+-------------+--------------------+------+-------+ | ID | datetime | Type | Value | +-------------+--------------------+------+-------+ | 202106250446| 2021-06-25 04:46:00| 0 | 194 | +-------------+--------------------+------+-------+Quiero hacer un gráfico que tome como etiqueta los intervalos de tiempo (como 1 etiqueta debería verse como 06:47-23:47) y que tenga como valor el primer elemento numérico (para este ejemplo 171.2786)
Analizo esta matriz de php con json (jvs es el nombre de la matriz)
<script type="text/javascript"> var obj = <?php echo json_encode($jvs); ?>; </script>y abrí un archivo app.js pero me cuesta entender cómo concatenar y escribir las etiquetas y los datos (ya que es la primera vez que hago esto)
$(document).ready(function(){ $.ajax({ url: "http://localhost/chartjs/average.php", method: "GET", success: function(jvs) { console.log(jvs); var interval = []; var average = []; { here is the part of code that cannot figure it out} var chartdata = { labels: interval, datasets : [ { label: 'Interval chosen', backgroundColor: 'rgba(200, 200, 200, 0.75)', borderColor: 'rgba(200, 200, 200, 0.75)', hoverBackgroundColor: 'rgba(200, 200, 200, 1)', hoverBorderColor: 'rgba(200, 200, 200, 1)', data: average } ] };Gracias y perdónenme si estoy cometiendo un error de novato, todavía estoy aprendiendo :D