1

I am trying to develop a web app with Angular2 and it contains a google pie chart.

I created a Directive for pie-chart, and here it's code.

@Directive({
selector: 'pie-chart'
})

export class PieChartDirective {
    el: HTMLElement;
    w: any;

private _content: any = {};

@Input()
set content(c: any) {
    this._content = c;

    this.draw();
}
get content() { return this._content; }

constructor(elementRef: ElementRef) {
    this.w = window;

    this.el = elementRef.nativeElement;

    if (!this.w.google) { console.error("Google chart yuklenmedi.."); };
}

draw() {

    var data = this.w.google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Hedef ve Üstü', this._content.hedeF_UST],
        ['Hedef Altı', this._content.hedeF_ALT]
    ]);

    let options = {
        "backgroundColor": '#f1f8e9',
        width: '100px',
        title: this._content.name,
        colors: ['#088A4B', 'red'],
        chartArea: {
            left: "5%",
            top: "20%",
            height: "75%",
            width: "90%"
        }            
    };


    (new this.w.google.visualization.PieChart(this.el))
        .draw(data, options);
}

}

then I used it in app component. Until this point there is no problem, it works with IE 10,11 and Edge, and Chrome. But Firefox has problems. It visualize the chart view very small.

This is chrome and IE view

and

This is firefox view

yeulucay
  • 434
  • 8
  • 17
  • is the chart drawn before it is shown? – WhiteHat May 27 '16 at 13:35
  • I use this directive in a component sth like In this case, is it shown before drawn ? @WhiteHat – yeulucay May 29 '16 at 15:15
  • try setting specific width _and height_ in the chart options, as a number -- instead of `width: '100px'` -- `width: 100` --> see [configuration options](https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options) – WhiteHat May 29 '16 at 20:00

1 Answers1

0

Instead of creating your own directive I would suggest using existing GoogleChartComponent class from ng2-google-charts module. You can see example here: https://stackoverflow.com/a/47728736/372939

ruruskyi
  • 2,018
  • 2
  • 26
  • 37