angular2 template - load json data to predix timeseries chart -
i developing application uses angular2 container , uses predix ui component(px-vis.timeseries) plotting graph. need data json file , display data in graph.
app.component.ts file
import { component, oninit } '@angular/core'; import { injectable } '@angular/core'; import { timeservice } './timeservice'; import {itime} './time' @component({ selector: 'my-app', template: ` <div> <h2 id="title_tag" >timeseries - chart</h2> <px-vis-timeseries id="timeseries" prevent-resize width = "900" height = "800" selection-type= "xy" [attr.chart-data]='chartdata ' [attr.series-config]='seriesconfig ' x-axis-config='{"title":"date"}' y-axis-config='{"title":"single","titletruncation":false,"unit":"f","axis1":{"title":"temperature","titletruncation":false,"unit":"c"}}'> </px-vis-timeseries> </div> `, providers:[timeservice] }) export class appcomponent implements oninit{ seriesconfig = '{"y0":{"name":"y0","x":"x","y":"y0","yaxisunit":"f","axis":{"id":"axis1","side":"left","number":"1"}},"y1":{"name":"y1","x":"x","y":"y1","yaxisunit":"hz","axis":{"id":"axis2","side":"right","number":"1"}},"y2":{"name":"y2","x":"x","y":"y2","ymin":0.11,"ymax":1.1,"yaxisunit":"c","axis":{"id":"axis3","side":"left","number":"2"}},"y3":{"name":"y3","x":"x","y":"y3","yaxisunit":"f","axis":{"id":"axis4","side":"right","number":"2"}}}'; errormessage: string; data: itime[]; chartdata:any[]; constructor(private _timeservice: timeservice){ } ngoninit():void{ this._timeservice.gettimedata() .subscribe(data => this.data = data, error => this.errormessage = <any>error); chartdata = this.data; } timeservice.ts
import { injectable } '@angular/core'; import { http, response } '@angular/http'; import { observable } 'rxjs/observable'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/do'; import 'rxjs/add/operator/map'; @injectable() export class timeservice{ timedata: array<any>; private _jsonurl = "../time.json"; constructor(private _http: http){ } gettimedata(): observable<any>{ return this._http.get(this._jsonurl) .map((response:response) => <any>response.json()) .do(data => console.log('all: '+json.stringify(data))) .catch(this.handleerror); private handleerror(error: response){ console.error(error); return observable.throw(error.json().error || 'server error'); } } time.ts
export interface itime{ time: date; } time.json
[{"x":1397102460000,"y0":11.4403,"y1":96.5,"y2":0.56,"y3":0.56},{"x":1397139660000,"y0":13.1913,"y1":96.5,"y2":0.4,"y3":0.4},{"x":1397177400000,"y0":12.8485,"y1":96.5,"y2":0.43,"y3":0.43},{"x":1397228040000,"y0":10.975,"y1":96.5,"y2":0.33,"y3":0.33},{"x":1397248260000,"y0":12.9377,"y1":96.5,"y2":0.47,"y3":0.47},{"x":1397291280000,"y0":13.3795,"y1":96.5,"y2":0.41,"y3":0.41},{"x":1397522940000,"y0":16.4446,"y1":96.5,"y2":0.32,"y3":0.32},{"x":1397542800000,"y0":12.2771,"y1":96.5,"y2":0.35,"y3":0.35},{"x":1397640960000,"y0":13.0709,"y1":96.5,"y2":0.34,"y3":0.34},{"x":1397663100000,"y1":88.8,"y2":0.28,"y3":0.28},{"x":1397700000000,"y0":12.6198,"y1":95.2,"y2":0.49,"y3":0.49},{"x":1397753040000,"y0":11.0486,"y1":96.5,"y2":0.35,"y3":0.35},{"x":1397772540000,"y0":14.6892,"y1":96.5,"y2":0.21,"y3":0.21},{"x":1397794860000,"y0":14.3738,"y1":96.5,"y2":0.42,"y3":0.42},{"x":1397813580000,"y0":10.4259,"y1":76.5,"y2":0.58,"y3":0.58},{"x":1397890680000,"y0":13.4261,"y1":96.5,"y2":0.37,"y3":0.37},{"x":1397932020000,"y0":13.0062,"y1":96.5,"y2":0.27,"y3":0.27},{"x":1397973480000,"y0":14.475,"y1":96.5,"y2":0.35,"y3":0.35},{"x":1398009240000,"y1":96.5,"y2":0.24,"y3":0.24},{"x":1398035760000,"y0":15.9555,"y1":96.5},{"x":1398075840000,"y0":14.535,"y1":16},{"x":1398102960000,"y0":12.3671,"y1":96.5},{"x":1398126240000,"y0":12.4245,"y1":96.5},{"x":1398195060000,"y0":12.0836,"y1":96.5,"y2":0.31,"y3":0.31},{"x":1398219120000,"y0":15.3137,"y1":96.5,"y2":0.34,"y3":0.34},{"x":1398239220000,"y0":13.7978,"y1":96.5,"y2":0.32,"y3":0.32},{"x":1398617940000,"y1":55.4,"y2":0.16,"y3":0.16},{"x":1398638520000,"y0":15.0664,"y1":85.7,"y2":0.41,"y3":0.41},{"x":1398691860000,"y0":13.504,"y1":96.5,"y2":0.31,"y3":0.31},{"x":1398714240000,"y0":13.7263,"y1":96.5,"y2":0.36,"y3":0.36},{"x":1398807540000,"y0":14.57,"y1":96.5,"y2":0.44,"y3":0.44},{"x":1398858180000,"y0":13.9641,"y1":96.5,"y2":0.25,"y3":0.25},{"x":1398879420000,"y0":12.5418,"y1":96.5,"y2":0.42,"y3":0.42},{"x":1398920880000,"y0":14.8822,"y1":96.5,"y2":0.22,"y3":0.22},{"x":1398956340000,"y0":15.2676,"y1":96.5,"y2":0.42,"y3":0.42},{"x":1398995280000,"y1":20.3,"y2":0.16,"y3":0.16}] here able display json in console timeservice.ts. need json in chartdata in app.component.ts can use in graph can please guide me?
Comments
Post a Comment