Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » PHP » Chart.js dinamico segun drodown multiselect

PHP - Chart.js dinamico segun drodown multiselect

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Pepe

Chart.js dinamico segun drodown multiselect

Publicado por Pepe (9 intervenciones) el 17/03/2022 08:19:39
Buenos días.
Soy bastante nuevo en php y estoy intentando crear un chart.js dinámico según los datos de un dropdown menú de selección múltiple.

El problema esta en que el número de elementos a crear en el grafico es variable, según lo seleccionado en el dropdown menú y los datos ha mostrar los extraeré de mysql mediante php para pasárselos al grafico.

Alguien conoce algún algún ejemplo de algo así? He encontrado muchos ejemplos de graficas pero son estáticas siempre con un numero de datos fijos.

muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 393
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Chart.js dinamico segun drodown multiselect

Publicado por Jefferson (211 intervenciones) el 21/03/2022 13:13:34
Hola Pepe que tan bajos son tus conocimientos?

Puedes poner el código del dropdown?, que imagino al seleccionar algún valor, debes buscar en una tabla y con los resultados que traiga debe pintarse el ChartJs

Ya comentaras
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Pepe

Chart.js dinamico segun drodown multiselect

Publicado por Pepe (9 intervenciones) el 31/03/2022 09:17:43
Muchas gracias por contestar. Ya conseguí cargar los datos de forma dinámica en el charts, aunque no de la forma que me hubiera gustado, pero funciona:

Código JS que rellena mi chart:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
$(document).ready(function() {
 
  // Read data file with random string generated by current time
  // to bypass browser cache, and create chart
  $.get('db/consultas/comparaFollowers.php', {'_': $.now()}, function(csvString) {
 
    var datafollowers = Papa.parse(csvString).data;
    var timeLabelsF = datafollowers.slice(1).map(function(row) { return row[0]; });
 
    var datasetsF = [];
    for (var i = 1; i < datafollowers[0].length; i++) {
      datasetsF.push(
        {
          label: datafollowers[0][i], // column name
          data: datafollowers.slice(1).map(function(row) {return row[i]}), // data in that column
          fill: false // `true` for area charts, `false` for regular line charts
        }
      )
    }
 
    // Get container for the chart
    var ctx = document.getElementById('ChartCompFollowers').getContext('2d');
 
    new Chart(ctx, {
      type: 'line',
 
      data: {
        labels: timeLabelsF,
        datasets: datasetsF,
      },
 
      options: {
        legend: {
          display: true,
        },
        maintainAspectRatio: false,
        scales: {
          max: 5,
          xAxes: [{
            time: {
              unit: 'date'
            },
            gridLines: {
              display: false,
              drawBorder: false
            },
            ticks: {
              maxTicksLimit: 10,
 
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: false,
 
            },
            gridLines: {
              color: "rgb(234, 236, 244)",
              zeroLineColor: "rgb(234, 236, 244)",
              drawBorder: false,
              borderDash: [2],
              zeroLineBorderDash: [2]
            }
          }],
        },
        tooltips: {
          displayColors: true,
          callbacks: {
            label: function(tooltipItem, all) {
              return all.datasets[tooltipItem.datasetIndex].label
                + ': ' + tooltipItem.yLabel.toLocaleString();
            }
          }
        },
        plugins: {
          colorschemes: {
            /*
              Replace below with any other scheme from
              https://nagix.github.io/chartjs-plugin-colorschemes/colorchart.html
            */
            scheme: 'office.Excel16'
          }
        }
      }
    });
 
  });
 
});

Ahora el problema que tengo es que al comparar varios perfiles, si sus valores están muy alejados las líneas se ven como líneas rectas:

rectas

No se si hay alguna forma de eliminar la escala y que las líneas se vean con las cuervas de variación.

variacion
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de javier
Val: 1.542
Bronce
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

Chart.js dinamico segun drodown multiselect

Publicado por javier (547 intervenciones) el 31/03/2022 10:30:00
1
<canvas id="myChart" width="400" height="400"></canvas>

prueba haciendo las graficas mas altas

1
<canvas id="myChart" width="400" height="800"></canvas>

aver que pasa

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Pepe

Chart.js dinamico segun drodown multiselect

Publicado por Pepe (9 intervenciones) el 31/03/2022 12:20:07
Nada. El cambiar el tamaño de la grafica no soluciono nada. existe tanta diferencia de valores, que el grafico debería ocupar 4 pantallas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Pepe

Chart.js dinamico segun drodown multiselect

Publicado por Pepe (9 intervenciones) el 31/03/2022 12:37:27
Por lo que he estado leyendo, podría crear diferentes ejes Y para cada elemento comparado. (Que tengo dudas si se pueden crear tantos ejes como se quiera, porque todos los ejemplos que he encontrado únicamente comparaban dos elementos con un eje y a cada lado del grafico)

Pero no tengo nada claro como poder crear los diferentes ejes Y de forma dinámica.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Pepe

Chart.js dinamico segun drodown multiselect

Publicado por Pepe (9 intervenciones) el 31/03/2022 13:13:33
He intentado crear diferentes yAxisID en el código JS dándoles el mismo nombre del label , pero no consigo crear los ejes de forma dinámica.
De hecho así ni siquiera carga el grafico.

1
2
3
4
5
6
7
8
9
10
11
var datasetsF = [];
    for (var i = 1; i < datafollowers[0].length; i++) {
      datasetsF.push(
        {
          label: datafollowers[0][i], // column name
          data: datafollowers.slice(1).map(function(row) {return row[i]}), // data in that column
          fill: false, // `true` for area charts, `false` for regular line charts
          yAxisID: datafollowers[0][i]
        }
      )
    }
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Pepe

Chart.js dinamico segun drodown multiselect

Publicado por Pepe (9 intervenciones) el 31/03/2022 14:29:07
El Problema es que estoy usando la versión 2.9 de charts.js.

Con la versión 3 si que funciona el cambio realizado en el JS y me crea todos los ejes diferentes. El problema es que me desconfigura varias cosas como los colores por ejemplo, ya que no acepta el pluging de colores.

Hay alguna forma de hacer lo mismo con la versión 2?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar