angular2 support

[moparlakci]

Hi, do you plan to create an angular2 version of epoch js?

[dainbrump]

I actually do intend on a component for Angular2. I'm just not comfortably familiar with Angular2 enough that I would feel good releasing anything. It is planned and even sort of in progress currently.

[moparlakci]

Good to hear it, I was also trying myself actually.. You can see how they've implemented google chart as Angular2 directives on the following url https://github.com/vimalavinisha/angular2-google-chart/blob/master/directives/angular2-google-chart.directive.ts

[moparlakci]

I have written something but it doesn't work yet, I got 'annotateLayers' data undefined, maybe if you can help me out..

To test it on any angular2 project use the following approach (the actual directive is at the end but chronologically you should work like this)

First Import the Directive into your Module:

This can be in app.module.ts or in any of your other modules where you use it, for example I import this in my dashboard.module.ts

File: dashboard.module.ts

import { EpochjsChart } from '../directives/angular2-epochjs.directive';

Don't forget to add it to the declarations array of your module

@NgModule({
  imports: [ SharedModule, routing ],
  declarations: [
    EpochjsChart,
    DashboardComponent    
  ]
 })

HTML markup:
File: dashboard.component.html

<EpochjsChart [chartData]="chartData" chartHeight="200" chartWidth="1000" chartType="time.bar"></EpochjsChart>

Chart data:

File: dashboard.component.ts

public chartData = []; // this is being accessed in html markup

ngOnInit() {
  // to populate chart with realtime data
  this.realTimeService.getLiveChartData().subscribe(data => {
      this.chartData.push(data); 
  }); 

}

Where the actual magic happens

File: /directives/angular2-epochjs.directive.ts

import {Directive, ElementRef, Input, OnInit, Renderer } from '@angular/core';

declare var Epoch:any;

@Directive({
  selector: 'EpochjsChart'
})
export class EpochjsChart implements OnInit {


public _element:any;

@Input('chartType') public chartType: String;
@Input('chartData') public chartData: Object;
@Input('chartHeight') public chartHeight: Number;
@Input('chartWidth') public chartWidth: Number;


private chartRange = {
    left: 'range-l',
    right: 'range-r'
};

 constructor(private el: ElementRef, private renderer: Renderer) {
   this._element = this.el.nativeElement;
 }
 ngOnInit() {

     this.drawGraph(this.chartType, this.chartData, this.chartHeight,this.chartWidth,this.chartRange, this._element);

 }
 drawGraph (type, data, height, width, range, el) {

  var options:any = {};
  options.data = data;
  options.height = height;
  options.type = type;
  options.el = el;
  options.width = width;
  options.range = range;
  console.log('options', options);

  var klass = Epoch._typeMap[options.type];
  console.log('klass', klass);
  if (klass == null) {
      Epoch.exception("Unknown chart type '" + options.type + "'");
  }
  var chart = new klass(options);

  chart.draw();    

 }

}

I also included epochjs & d3 in my project by adding these two scripts to the angular-cli.json file

of course install these first

 npm install epochjs --save 
 npm install d3 --save

File: angular-cli.json (excerpt only)

{
 "apps": {
   "scripts": [ 
      "../node_modules/d3/d3.js",
      "../node_modules/epoch-charting/dist/js/epoch.js"
   ]
  }
}