Graphics with Chart.js

Question

Graphics with Chart.js

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (-1 votes)

1

I have a small problem with the graphics, what happens is the following, I have a list where the list in each element has a button that shows in a few tabs more information about each element, whenever you click on the button is loaded in a tab the graph that I have made, the question is that this graph every time I show it once and return to the list to look at another item the graph is recharged but on top of the one that already existed, some help?

I have read that it can be the canvas, but I do not know how to clean it, I appreciate the help

I add the requested information regarding the code:

I have the code with which I graph:

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
                          }
                      }]
                  }
              }
          });
        })

I have the element that I want when the click is created the graphic based on the previous code

<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>

And I have the element where the graphic is reflected

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

It must be kept in mind that it is a list that is filled using angular and consuming web service, each item that is created has that label that corresponds to a button, where each button is clicked on that button create the graph, when I give any one but that is the first to be clicked is perfect graph, but when I return to the list and clickeo another the graph is shown above the previous one, it is not of more obvious to indicate that the graph is is filling in based on two arrays one is arrayValorSolicitud [] and the other is label [], both must be restarted just as the graph is cleaned

javascript html5 chart.js

asked by FABIAN AGUILAR 04.05.2017 в 21:35

source

3 answers

Connection to failed firebase I can not display my mongodb data with mongoose in node.js

score 1 · Answer 1

1

Here the solution, to that if the graph is placed on top of the other.

if ( window.myChart != undefined){
    window.myChart.destroy();
}
window.myChart = new Chart(ctx, {
    .........
});

answered by 07.04.2018 в 00:16

score 0 · Answer 2

Try cleaning the div before generating a new chart var ctx = $ ("# myChart"); ctx.empty (); or $ ("# myChart"). empty (); var ctx = $ ("# myChart"); Before var myChart = new Chart (ctx, [...]

I see, after your editing that you are using Angular, so I would recommend using ng-chart or ng2-charts depending on whether you are using AngularJS or Angular.

I leave the links so you can see the documentation, examples and implement it correctly in your project.

AngularJS

Angular

I hope it serves you. :)

score -1 · Answer 3

I have the code with which I graph:

  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
                              }
                          }]
                      }
                  }
              });
            })

I have the element that I want when the click is created the graphic based on the previous code

<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>

And I have the element where the graphic is reflected

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

It must be kept in mind that it is a list that is filled using angular and consuming web service, each item that is created has that label that corresponds to a button, where each button is clicked on that button create the graph, when I give any one but that is the first to be clicked is perfect graph, but when I return to the list and clickeo another the graph is shown above the previous one, it is not of more obvious to indicate that the graph is is filling in based on two arrays one is arrayValorSolicitud [] and the other is label [], both must be restarted just as the graph is cleaned