How to convert js code to angular 2

Question

How i can convert this js function on angular 2?

This is a function of pie chart:

$(function() {

var data = [{
    label: "Series 0",
    data: 1
}, {
    label: "Series 1",
    data: 3
}, {
    label: "Series 2",
    data: 9
}, {
    label: "Series 3",
    data: 20
}];

var plotObj = $.plot($("#flot-pie-chart"), data, {
    series: {
        pie: {
            show: true
        }
    },
    grid: {
        hoverable: true
    },
    tooltip: true,
    tooltipOpts: {
        content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
        shifts: {
            x: 20,
            y: 0
        },
        defaultTheme: false
    }
});

And how to show in html? With class or something else? Maybe ngShow? This code to solve some pie chart.

are you using angular-cli for your project ?

pd farhad
– pd farhad

2016-07-25 11:28:38 +00:00
Commented Jul 25, 2016 at 11:28 — pd farhad
– pd farhad, Commented Jul 25, 2016 at 11:28
@pd farhad i dont know what it this

Eduard Arevshatyan
– Eduard Arevshatyan

2016-07-25 12:04:21 +00:00
Commented Jul 25, 2016 at 12:04 — Eduard Arevshatyan
– Eduard Arevshatyan, Commented Jul 25, 2016 at 12:04

yurzui · Accepted Answer · 2016-07-25 12:25:48Z

2

You can create a angular2 directive like this:

declare var $: any;

@Directive({
  selector: 'pie-flot',
  host: {
    '[style.display]': '"block"',
    '[style.width]': '"300px"',
    '[style.height]': '"300px"'
  }
})
export class PieFlotDirective {
  @Input() data: any;
  plotObj: any;

  constructor(private elRef: ElementRef) {}

  ngAfterViewInit() {
    this.plotObj = $.plot($(this.elRef.nativeElement), this.data, {
      series: {
        pie: {
          show: true
        } 
      },
      grid: {
        hoverable: true
      },
      tooltip: true,  
      tooltipOpts: {
        content: "%p.0%, %s",
        shifts: {
          x: 20,
          y: 0
        },
        defaultTheme: false
      }
    });
  }

  ngOnDestroy() {
    this.plotObj.destroy();
  }
}

And then use it:

<pie-flot [data]="data"></pie-flot>

The corresponding plunkr is located here

edited Jul 25, 2016 at 12:25

answered Jul 25, 2016 at 10:50

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

9 Comments

Eduard Arevshatyan Over a year ago

Thanks for quickly answer! But now i have this error ReferenceError: $ is not defined

Eduard Arevshatyan Over a year ago

and how i can use *ngFor with this chart? i

yurzui Over a year ago

declare var $: any;

Eduard Arevshatyan Over a year ago

thanks a lot, and last question, how i cat change legend position? for example in righr turn on chart?

yurzui Over a year ago

See this customization github.com/flot/flot/blob/master/API.md#customizing-the-legend. I've updated plnkr.co/edit/eWx7AmBo5dQAE3fhbpNV?p=preview

|

Collectives™ on Stack Overflow

How to convert js code to angular 2

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related