Home forums Using CanvasJS how use service in Angular2 to plot line graph in canvasjs

This topic contains 0 replies, has 1 voice, and was last updated by  sai 9 months, 2 weeks ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #14263

    sai
    Member

    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);
    		}	
        
    }
    
    }
    
    
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.