creating a dynamic number of charts using chart.js using angular

Question

I am trying to use chart.js to create multiple number of charts according to data that I got from a database.

The documentations said to use the following code in order to create a chart:

 @ViewChild('doughnutCanvas') doughnutCanvas;
  doughnutChart: any;



createChart(){
      this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
        type: 'doughnut',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 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)'
                ]
            }]
        }
    });
  }

and in the html file:

  <ion-card-content>
        <canvas #doughnutCanvas></canvas>
  </ion-card-content>

The problem is that i don't know in advance how many charts i want to create and want to use ngFor on a dataset that recieved from the database.

How can I do it? the problem is mainly the : @ViewChild('doughnutCanvas') doughnutCanvas; command.

**im using ionic 3 but dont think it is relevant

Daniel W Strimpel · Accepted Answer · 2018-03-14 16:41:53Z

2

I would recommend that you pull out this logic into a reusable chart component and that will take care of it for you. I created a plunkr to show you an example of doing so.

Essentially this allows you to loop over them by rendering a new version of your chart component and passing the necessary data it needs to render like so:

<chart-canvas *ngFor="let chart of charts" [data]="chart"></chart-canvas>

You can then put all of the logic you have shown above in that chart-canvas component.

answered Mar 14, 2018 at 16:41

Daniel W Strimpel

8,5002 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

ofir Over a year ago

thanks! how can I run the planker to see the results? (i pressed run at the top corner and nothing happened)

Daniel W Strimpel Over a year ago

There wasn't really anything to show without using a library to render a chart in your SVG. If you use the Chrome Inspector (or equivalent from your browser) you'll see four <chart-canvas> tags each with their own <canvas> tag. If you look in your console you'll also see the data and DOM reference for each canvas. I updated the plunker to render the data passed to it on the canvas so you can see where the canvas elements are

ofir Over a year ago

ok, i did what you said and i succeeded to create mulitple chart components, but the chart itself doesnt render, do you know why?

Daniel W Strimpel Over a year ago

You'd have to post your code in order to give you help. Can you put an update at the bottom of your question with what you have now and what you are experiencing?

ofir Over a year ago

thanks for your help, I found an angular component that does exactly what you suggested so, for now, the problem is solved.

|

Collectives™ on Stack Overflow

creating a dynamic number of charts using chart.js using angular

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related