You must be logged in to post your query.
Home › Forums › Chart Support › how use service in Angular2 to plot line graph in canvasjs
Tagged: angular2, canvasjs, mysql
I have created a service using Mysql based api. my result type is named as “testing” with these properties.
mac: string; temp: string; time_stamp:string; epoch_time_stamp:string;
this my service
@Injectable() export class TabuleService { //private headers = new Headers({'Content-Type': 'application/json'}); private _Url = 'http://localhost:3000'; // URL to web api constructor(private _http: Http) {} getTable(): Observable<Tabule[]> { const url = this._Url+'/temperature'; return this._http.get(url) .map(res => res.json()) .catch(this.handleError); }
<strong>this is my component how to inject service into the component to read datapoints</strong> ´export class TemperatureComponent { tabules: Tabule[]; testings:testing[]; constructor(private _TabuleService: TabuleService) { } ngOnInit(): any { this._TabuleService .getTemp() .subscribe(testings => {this.testings=testings; console.log(testings); }); const chart = new CanvasJS.Chart("chartContainer", { zoomEnabled: true, title:{ text: "Temperature and Time " }, axisX:{ title: "Time", //tickColor: "red", //tickLength: 5, tickThickness: 2, gridDashType:"dot", interlacedColor: "#F0F8FF" }, axisY:{ title: "Temperature", tickLength: 15, //tickColor: "DarkSlateBlue" , tickThickness: 2, gridDashType:"dot" }, data: [ { type: "spline", showInLegend: true, legendText: "Temperature", xValueType: "dateTime", dataPoints: ?????? } ] }); chart.render(); function rangeChange(e) { console.log(e); } } }
You must be logged in to reply to this topic. Login/Register