4

I am experimenting with ng2-charts using Angular 2. I started by following the example to create a line chart. It initialises the chart using a dataset as follows:

  public lineChartData:Array<any> = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
  ];

I want to progess by retrieving data from a server - this works, however I no longer want a hardcoded initial dataset. If I change lineChartData to be empty, I get the following error:

ERROR Error: ng-charts configuration error,
      data or datasets field are required to render char line
Stack trace:
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.getDatasets@http://localhost:4200/vendor.bundle.js:31447:19
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.getChartBuilder@http://localhost:4200/vendor.bundle.js:31375:24
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.refresh@http://localhost:4200/vendor.bundle.js:31457:22
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.ngOnInit@http://localhost:4200/vendor.bundle.js:31346:13

The only way I have been able to get round this is to add empty objects in lineChartData. But this places a constraint on how much data I can return. Currently, I am not sure how much data needs to be returned, or if this is arbitrary.

Is there a way of having an empty initial dataset which is populated when data is retrieved from server?

Community
  • 1
  • 1
user1849060
  • 621
  • 3
  • 10
  • 20
  • Try: `lineChartData:Array = [];` When you get your data, do `let newChartData:Array = []; newChartData.push({data: [1, 2], label: 'Series A'}, {data: [1, 2], label: 'Series B'}); lineChartData = newChartData;` One thing I've noticed about the ng2-charts library is that it doesn't like you modifying the data array, but you can swap it out like I showed. – HaveSpacesuit Jul 27 '17 at 19:20
  • Problem is that the first part won't work as the dataset is empty which will throw an error saying that the data value which is expected is not defined. – user1849060 Aug 09 '17 at 13:44
  • 1
    One solution is to create the chart after you have received your data. When you've built your chart, assign a variable like `chartReady = true;`. In your html, wrap the chart with an `*ngIf="chartReady"` so you can hide it until you have build your chart. – HaveSpacesuit Aug 09 '17 at 17:22
  • @user1849060 : were you able to solve the above issue? I am also trying to bind data dynamically to my charts, but failing to do so. any help would be great. – Abb Feb 20 '19 at 16:15
  • @user1849060 please see this https://stackoverflow.com/questions/54770459/dynamically-populate-ng2-chart-in-angular-4 – Abb Feb 20 '19 at 16:16
  • @Abb this was a obviously a while ago and my memory is a little sketchy but I remember finding a different package that allowed you to use dynamic data. I think it was this: https://www.npmjs.com/package/angular2-highcharts – user1849060 Feb 21 '19 at 08:44

1 Answers1

2

Use *ngIf when the dynamic data comes in "barChartData" array then it will work.

<div style="display: block" *ngIf="barChartData">
                              <canvas baseChart
                                      [datasets]="barChartData"
                                      [labels]="barChartLabels"
                                      [options]="barChartOptions"
                                      [legend]="barChartLegend"
                                      [chartType]="barChartType"
                                      (chartHover)="chartHovered($event)"
                                      (chartClick)="chartClicked($event)"></canvas>
                            </div>
Suraj Sakhare
  • 363
  • 1
  • 4
  • 12
  • For some reason, this is not helping. Just having the same issue and tried your hint. – Jakub Hubert Jul 02 '19 at 08:26
  • 1
    I used a similar process to get around this myself, except instead of checking the variable that holds my chart data, I created a boolean variable called `chartReady`, then used that in the `*ngIf` and set it to `true` after I'd finished preparing my chart data. @JakubHubert maybe that idea might help in your project as well? –  Jul 12 '19 at 06:22