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

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj...
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer ...
Read more

c# - Asp.net web api : redirect unauthorized requst to forbidden page -

im trying redirect unauthorized request forbidden page instead i'm getting forbidden page in response body , how can fix ? here's startup class : app.createperowincontext(storecontext.create); app.createperowincontext<applicationusermanager>(applicationusermanager.create); app.createperowincontext<applicationsigninmanager>(applicationsigninmanager.create); app.usecookieauthentication(new cookieauthenticationoptions { authenticationtype = defaultauthenticationtypes.applicationcookie, expiretimespan = timespan.fromdays(30), }); app.useexternalsignincookie(defaultauthenticationtypes.externalcookie); app.usetwofactorsignincookie(defaultauthenticationtypes.twofactorcookie, timespan.fromminutes(5)); app.usetwofactorrememberbrowsercookie(defaultauthenticationtypes.twofactorrememberbrowsercookie); the method im trying reach : [httpget] [authorize(roles = "admin")] public string getcurrentusername() { return userman...
Read more