Chart.render doesn’t seem to work

[canvasCharterX]

Hey there,

I’m trying to fill in a line Chart with data I get from a Server. This does work fine, the requiered data is added into the chartOptions. But when I try to call chart.render nothing happens. It however works when I resize the window.
I’m using Angular and getChartInstance function. When I console.log this.chart it gets the right element. Still the render won’t work. No error is given.

The code:

HTML

 <div class="row">
        <canvasjs-chart #chart style="width: 100%" (chartInstance)="getChartInstance($event)" [options]="chartOptions" ></canvasjs-chart>
      </div>

TypeScript:

  
this.chart: any;

getChartInstance(chart: object) {
    this.chart = chart;
  }

pullParamData() {
    this.offcanvasService.dismiss();
    let url = serverAd + '/getColumn?id=' + this.currAnalysis.id + '&filename=' + this.analysisFiles[0].name
    const paramsWithoutSpace = this.selectedParams.map(x => x.replace(/\s+/g, "%20"))
    paramsWithoutSpace.forEach((parmName) => url = url + '&param=' + parmName)
    let series: Object[] = []
    this.httpClient.get(url).subscribe((response: any) => {
      const data = JSON.parse(response.data);
      for (let i = 0; i < this.selectedParams.length; i++) {
        let obj = {
          type: "line",
          name: this.selectedParams[i],
          showInLegend: true,
          dataPoints: [{}]
        }
        for (let j = 0; j < data[i].length; j++) {
          const dataPointObj = {
            x: data[i][j][0],
            y: data[i][j][1]
          }
          obj.dataPoints.push(dataPointObj)
        }
        series.push(obj)
      }
    },
      error => this.showAlertMsg("Fehler beim Anfragen der Daten: " + error.message));
    this.chartOptions.data = series
    this.chart.render()
  }

Chart Options on creation:

this.chartOptions = {
      theme: "dark1", // "light2", "dark1", "dark2"
      zoomEnabled: true,
      title: {
        text: "Basic Column Chart - Angular 8"
      },
      toolTip: {
        shared: true
      },
      animationEnabled: true,
      data: []
    }

Can’t seem to figure out the problem. Had the same issue with ApexCharts which is why I switched off to CanvasJS. Now I have the same problem over here :(

[Manoj Mohan]

@canvascharterx,

It seems like you are rendering the chart before getting the data. Moving this.chartOptions.data = series;this.chart.render(); inside the subscribe callback function should work fine in your case.

If you are still facing the issue, kindly create sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can look into your code, run it locally at our end to understand the scenario better and help you out.

—-
Manoj Mohan
Team CanvasJS

[canvasCharterX]

I’m so embarrassed, this was the solution all along…

I don’t know why I didn’t think of this, wasted many hours.

Thank you so much for fixing my mistake – You saved me many more hours!
Also thank you for your awesome work on this framework and the support you give, you make a developers life a lot better:)