CODEWITHSUNDEEP
javascriptangularchart.js
Jerso
Jerso

Reputation: 21

Angular 6 multiple dynamic Charts.js not showing

I'm trying to make a dynamical charts page for my Final Project on my bachelor. First of all, I have a metric database in SQL, which is retrieved this way.

getmetrics(flag = 2) {
  this.metricService.getmetrics()
  .subscribe(res => {
    this.metricService.metrics = res as metric[];
    for (let metric of this.metricService.metrics) {
      metric.canvas = "canvas" + metric.id_metric;
    }
    if (flag == 2) {
      for (let i = 0; i < this.metricService.metrics.length; i++) {
        //here we create the chart with createCharts(metric);
        this.metricService.metrics[i] = this.createCharts(this.metricService.metrics[i]);

  }
}

Flag is used to create the charts after the view is inited, 

ngOnInit() {
  this.getmetrics(1);
}
ngAfterViewInit() {
  this.getmetrics(2);
}

And create charts looks this way right now to make sure that is only a problem in frontend.

createCharts(metric) {
    metric.chart = new Chart(metric.canvas, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '# of Votes',
        data: [12, 24, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
  return metric;
}

And the HTML looks like this: 

    <div class="col-6 metric" *ngFor="let metric of metricService.metrics">
        <h5>{{metric.nombre}}</h5>
        <div *ngIf = "metric.canvas">
            <canvas id="{{metric.canvas}}">{{ metric.chart }}</canvas>
        </div>
    </div>

But the result is the following Picture of the result without the static chart And it should be like this, but with the first chart on every other canvas. Picture of the result with static chart Also, is important to say that the result in the result of the static canvas is the following

<canvas _ngcontent-c2="" id="canvas0" width="450" height="225" class="chartjs-render-monitor" style="display: block; width: 450px; height: 225px;"></canvas>

And the result in the dynamic (and the objective) canvas is 

<canvas _ngcontent-c2="" id="canvas2"></canvas>

Hope this can help, and sorry about my English if I did some mistake on the way.

Upvotes: 2

Views: 691

Answers (1)

Victor Oliveira
Victor Oliveira

Reputation: 583

I did a little bit different. Instead of creating the canvas tag inside a *ngFor, I created the chart canvas dynamically at the component code. 

const wrapper = document.getElementById('chart-wrapper');
const newCanvas = document.createElement('canvas');
newCanvas.id = metric.canvas;
wrapper.appendChild(newCanvas);
const ctx = (newCanvas as HTMLCanvasElement).getContext('2d');
this.lineChart = new Chart(ctx, chartOptions);

Upvotes: 1

Related Questions