1

Tengo un pequeño problema con las gráficas , lo que sucede es lo siguiente , tengo una lista donde dicha lista en cada elemento tiene un botón que muestra en unas pestañas mas información sobre cada elemento , siempre que se le da click en el botón se carga en una pestaña la gráfica que he realizado , la cuestión es que esa gráfica cada que la muestro una vez y regreso a la lista a mirar otro ítem se recarga la gráfica pero encima de la que ya existía, alguna ayuda ?

He leido que puede ser lo del canvas , pero no se como limpiarlo, agradezco la ayuda

Adiciono la informacion solicitada con respecto al codigo:

Tengo el codigo con el que grafico :

require(['assets/bower_components/chart.js/dist/Chart.min.js'], function(Chart){

            var ctx = $("#myChart");
            var myChart = new Chart(ctx, {
              type: 'bar',
              data: {
                  borderWidth:2,
                  labels: that.label,
                  datasets: [{

                      data: that.arrayValorSolicitud
                      } 
                  ]
              },
              options: {
                  scales: {
                      yAxes: [{
                          ticks: {
                              beginAtZero:true
                          }
                      }]
                  }
              }
          });
        })

Tengo el elemento que deseo que cuando se de click se cree la grafica en base al codigo anterior

<a  target="_self"  href="#infoPersonal" aria-controls="infoPersonal" role="tab" data-toggle="tab" ng-click="formCtrl.getCredito(credit); formCtrl.getFlujoCaja(credit)" id="prueba"><span class="botonSiguiente glyphicon glyphicon-arrow-right btn-lg"></span></a>

Y tengo el elemento donde se refleja el grafico

<canvas id="myChart" width="auto" height="auto"></canvas>

Se debe tener presente el hecho de que es una lista que se llena utilizando angular y consumiendo web service, cada item que se crea tiene esa etiqueta que corresponde a un boton , donde cada que se le de click a ese boton se debe crear la grafica , cuando le doy a uno cualquiera pero que sea el primero en ser clickeado se grafica perfecto , pero cuando regreso a la lista y clickeo otro la grafica se muestra encima de la anterior, no esta de mas obviamente indicarles que la grafica se esta llenando en base a dos arrays uno es arrayValorSolicitud[] y el otro es label[] , ambos igual deben reiniciarse tal como se limpia la grafica

4
  • Puedes compartir el código ?
    – FederHico
    el 4 may. 2017 a las 19:37
  • probablemente te esté faltando limpiar el canvas
    – FederHico
    el 4 may. 2017 a las 19:38
  • Estaría genial que compartieras un fiddle replicando lo que estás haciendo para poder ayudarte. el 4 may. 2017 a las 21:06
  • Ya la publique como una respuesta , gracias el 4 may. 2017 a las 21:44

3 respuestas 3

2

Aquí la solución, a que si la gráfica se coloca encima de la otra.

if ( window.myChart != undefined){
    window.myChart.destroy();
}
window.myChart = new Chart(ctx, {
    .........
});
0
Prueba limpiando el div antes de generar un nuevo chart var ctx = $("#myChart"); ctx.empty(); o $("#myChart").empty(); var ctx = $("#myChart"); Antes de var myChart = new Chart(ctx, [...]




Veo, después de tu edición que estás usando Angular por lo que te recomendaría usar ng-chart o ng2-charts dependiendo si estas usando AngularJS o Angular.

Te dejo los links para que puedas ver la documentación, ejemplos e implemetarlo de manera correcta en tu proyecto.

AngularJS

Angular

Espero te sirva. :)

6
  • No funciona amigo :s el 4 may. 2017 a las 20:03
  • 1
    Comparte el código completo, a ver si nos acercamos al error
    – FederHico
    el 4 may. 2017 a las 20:04
  • Por cuestiones laborales no se me permite , lo siento. el 4 may. 2017 a las 20:11
  • Hay formas de hacer un ejemplo, sin necesidad de mostrar información sensible para la empresa, vamos que puedes
    – FederHico
    el 4 may. 2017 a las 20:13
  • ya la publique como una respuesta, gracias el 4 may. 2017 a las 21:44
-1

Tengo el codigo con el que grafico :

  require(['assets/bower_components/chart.js/dist/Chart.min.js'], function(Chart){

                var ctx = $("#myChart");
                var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      borderWidth:2,
                      labels: that.label,
                      datasets: [{

                          data: that.arrayValorSolicitud
                          } 
                      ]
                  },
                  options: {
                      scales: {
                          yAxes: [{
                              ticks: {
                                  beginAtZero:true
                              }
                          }]
                      }
                  }
              });
            })

Tengo el elemento que deseo que cuando se de click se cree la grafica en base al codigo anterior

<a  target="_self"  href="#infoPersonal" aria-controls="infoPersonal" role="tab" data-toggle="tab" ng-click="formCtrl.getCredito(credit); formCtrl.getFlujoCaja(credit)" id="prueba"><span class="botonSiguiente glyphicon glyphicon-arrow-right btn-lg"></span></a>

Y tengo el elemento donde se refleja el grafico

<canvas id="myChart" width="auto" height="auto"></canvas>

Se debe tener presente el hecho de que es una lista que se llena utilizando angular y consumiendo web service, cada item que se crea tiene esa etiqueta que corresponde a un boton , donde cada que se le de click a ese boton se debe crear la grafica , cuando le doy a uno cualquiera pero que sea el primero en ser clickeado se grafica perfecto , pero cuando regreso a la lista y clickeo otro la grafica se muestra encima de la anterior, no esta de mas obviamente indicarles que la grafica se esta llenando en base a dos arrays uno es arrayValorSolicitud[] y el otro es label[] , ambos igual deben reiniciarse tal como se limpia la grafica

1
  • Disculpa pero, ¿esto es información adicional a tu pregunta?, si es así, debes editar tu pregunta; si esto es una respuesta, te sugiero mejorar la redacción y luego aceptar tu respuesta. Saludos. el 4 may. 2017 a las 21:47

Tu Respuesta

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

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