krispo / ng2-nvd3

Angular2 component for nvd3
http://krispo.github.io/ng2-nvd3/
MIT License
328 stars 104 forks source link

dynamic update #61

Open gesaleh opened 7 years ago

gesaleh commented 7 years ago

Hi I'm trying to update chart using http service i have the data in the good format bu the chart is not displayed

Component:

import {Component, ViewEncapsulation} from '@angular/core'; import {ChartNvd3Service} from './chartnvd3.service'; import {nvD3} from 'ng2-nvd3';

@Component({ selector: 'line-js', encapsulation: ViewEncapsulation.None, styles: [require('./chartnvd3.scss')], template: require('./chartnvd3.html'), })

export class ChartNvd3 { data:any; options:any;

constructor(private _chartNvd3Service:ChartNvd3Service) { }

ngOnInit() { this.options = this._chartNvd3Service.getOptions(); //this.data = this._chartNvd3Service.getData(); this._chartNvd3Service.getChannels().subscribe( data => { this.data = data; console.log("get Channels ::" + this.data); }, err => { console.log('error http') } );

}

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

Service `import {Injectable} from '@angular/core'; import {Http, Response } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import { Jsonp, URLSearchParams } from '@angular/http'; import {nvD3} from 'ng2-nvd3'; import {Dictionary} from "./dic.ts";

declare let d3, nv: any; import {BaThemeConfigProvider} from '../../../../theme';

interface Ipoint { x: number; y: number; }

@Injectable() export class ChartNvd3Service {

chennelUrl = "http://localhost:7070/channels/msg"; options; data;

constructor(private _baConfig:BaThemeConfigProvider, private _http: Http) {} getChannels (){ return this._http.get(this.chennelUrl) .map(this.extractData) .catch(this.handleError)

}

private extractData(res: Response) { let body = res.json(); let values = {}; let dataset_chart = []; let mydevice = ""; let myobj: any;

let dd = new Dictionary<string, Ipoint[]>();
for (let ent of body) {
    let cdata = [];
    if (dd.containsKey(ent.n)) {
            cdata = dd.getValue(ent.n);
            myobj = { x: ent.t * 1000, y: ent.v };          
            cdata.push(myobj);
            dd.changeValueForKey(ent.n, cdata)
    } else {
            myobj = { x: ent.t * 1000, y: ent.v };
            cdata.push(myobj);
            dd.add( ent.n, cdata );
    }
}
for (let k of dd.keys()) {
    dataset_chart.push({"key":k , "values":dd.getValue(k)})
}
console.log('getChannels :: ' + dataset_chart);
  return dataset_chart || { };

}

private handleError (error: Response | any) { // In a real world app, we might use a remote logging infrastructure let errMsg: string; if (error instanceof Response) { const body = error.json() || ''; const err = body.error || JSON.stringify(body); errMsg = ${error.status} - ${error.statusText || ''} ${err}; } else { errMsg = error.message ? error.message : error.toString(); } console.error(errMsg); return Observable.throw(errMsg); } `

I'm missing something how to make the chart update ?

Thanks for your support

gesaleh commented 7 years ago

almost working i was missing the the tag linedata: Object { linedata: Array[2] } so now i get the chart updated but the objects key is changed key:"EDFXXCCVF (left axis)" why this tag left axis is being added