ChartistJS Angular2 - chart only rendering after resizing window

Question

Good Afternoon,

I'm trying to render a chart using ChartistJS

Whats weird is that if i resize the window my charts data displays.

This suggests I'm rendering the Chart with incomplete data.

Currently I am using my API service to get my data.

I found this link which looks like a similar solved problem but really struggling to implement it.

enter link description here

Below is my component

I would love your help here please

Thanks

GWS

chartistJs.component.ts

import { Component, ViewEncapsulation, 
  ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ChartistJsService } from './chartistJs.service';
import { PortfolioReturns } from './returns-interface';
import { BaThemeConfigProvider } from '../../../../theme';

@Component({
  selector: 'chartist-js',
  encapsulation: ViewEncapsulation.None,
  styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')],
  template: require('./chartistJs.html'),
  providers: [ ChartistJsService ]  
})

export class ChartistJs {
  
  errorMessage: string;
  returns: PortfolioReturns[];
  arr = [];
  seriesdata = [];
  lablesdata = [];
  isDataAvailable : boolean = true;

  data = {
    simpleLineOptions: {},
    simpleLineData: {}
  };

  constructor( private _chartistJsService: ChartistJsService, 
  private _baConfig: BaThemeConfigProvider,
  private _cdRef: ChangeDetectorRef ) {
  }

  ngOnInit() {     
    this.ChartistChart();
     }

ChartistChart() {

 let chartdata = {
  labels: this.getlablesdata(),
  series: [ this.getseriesdata(),
  ]
};

 this.data = {
    simpleLineOptions: {
      color: this._baConfig.get().colors.defaultText,
      fullWidth: true,
      height: '300px',
      chartPadding: {
        right: 40
      }
    },
    simpleLineData: chartdata
    };
 }

 getseriesdata() {
   this._chartistJsService.getReturns()
            .subscribe((res: PortfolioReturns[]) => {
                this.returns = res;
                for (let i = 0; i < this.returns.length; ++i) {
                   this.seriesdata.push(this.returns[i].logReturnGross.toString());
    }} );
    return this.seriesdata;
  }

 getlablesdata() {
   this._chartistJsService.getReturns()
            .subscribe((res: PortfolioReturns[]) => {
                this.returns = res;
                for (let i = 0; i < this.returns.length; ++i) {
                   this.lablesdata.push(this.returns[i].performanceDate);
                  }} ) ;
    return this.lablesdata;
  }


   getResponsive(padding, offset) {
    return this._chartistJsService.getResponsive(padding, offset);
  }

}

Hi thanks for your response, I understand it's hard to tell from the snippet. I'm really struggling to try and reproduced an example given the complexity of the base project I'm really unsure how long that will take me. I've raised the issue with the dashboard framework I've forked https://github.com/akveo/ng2-admin — Glenn Sampson, Oct 18 '16 at 06:06

score 0 · Accepted Answer · answered Oct 27 '16 at 06:02

the problem was solved by .subscribe after my Http Get

ChartistChart() {
    this._chartistJsService.getReturns()
        .subscribe((res: PortfolioReturns[])  => {
            this.returns = res;
            for (let i = 0; i < this.returns.length; ++i) {
               this.seriesdata.push(this.returns[i].logReturnGross);
               this.lablesdata.push(this.returns[i].performanceDate.toString());
              };
               this.data = {   
                simpleLineOptions: {
                  color: this._baConfig.get().colors.defaultText,
                  fullWidth: true,
                  height: '300px',
                  chartPadding: {
                    right: 40
                  }
                },
                simpleLineData: {
                  labels: this.lablesdata,
                  series: [ this.seriesdata ]
                }
                };
            });
        }

ChartistJS Angular2 - chart only rendering after resizing window

1 Answers1