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

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more

Qt QGraphicsScene is not accessable from QGraphicsView (on Qt 5.6.1) -

i new qt. trying catch mouse press , release in qgraphicsview area , draw line. this, extended qgraphicsview , called myqgraphicsview . seems scene not attached since added " hello world " , never appears in view. here code extended class: class myqgraphicsview : public qgraphicsview { q_object public: myqgraphicsview(qgraphicsscene *scene, qwidget *parent = q_nullptr) : qgraphicsview(scene,parent){ // qgraphicsview::qgraphicsview(scene,parent); } qpoint *pointptr, *startpos,*endpos; qgraphicsview *cv;//maa qgraphicsscene *c; qgraphicsscene *sceneptr; // maa protected: void paintevent(qpaintevent *event) { show(); } void mousepressevent(qmouseevent *event) { // pos wrt widget. global wer global screen qdebug()<<" mouse pressed @ "<<qwidget::mapfromglobal(event->globalpos()); //globalx(); startpos = new qpoint; startpos->setx(qwidget::mapfromglobal(event->globalpos()).x()); startpos->sety(qw...
Read more