"ERROR in src/app/dashboard/dashboard.component.ts(63,24): error TS2345: Argument of type 'HTMLElement' is not assignable to parameter of type 'string | HTMLCanvasElement | CanvasRenderingContext2D | ArrayLike<HTMLCanvasElement | CanvasRenderingConte

[Polsani Hema]

import { Component, OnInit } from '@angular/core';

import {HttpClient, HttpHeaders} from '@angular/common/http';

import {Observable} from 'rxjs';

import {Chart} from "chart.js";

@Component({

  selector: 'app-dashboard',

  templateUrl: './dashboard.component.html',

  styleUrls: ['./dashboard.component.scss']

})

export class DashboardComponent implements OnInit {

  public records:Observable<any>;

  public data  = {"avail":0,"not":0};

  public chart;

  public max=0;

  public dt='11-30-2018';

   constructor(private vhttp:HttpClient) { }

  getData=()=>{

    var appstatus =[["ftp1.mymicros.net",0,27],["stwdtrans.microsdc",0,130],["stwdmyportal.microsdc.com",0,0],["mi.mymicros.net",0,0],["mi.simphony.net",0,0]];

    var i=0;

    //var t= document.getElementById("dt");

    console.log(this.dt)

    var vdate = new Date(this.dt);

    var vformatdate = ' ' + vdate.getDate() + '-' + vdate.getMonth();

   

    this.records=this.vhttp.get('https://cloudant-importexportdb.mybluemix.net/api/day/ie/' + this.dt,{responseType:'json'})

   this.records.subscribe(vmap=>{

  

  

  //  console.log(this.records)

    //console.log(this.content[0].App_name)

   

    //console.log(this.content[1].App_name);

    this.max = 0;

    vmap.forEach(vdata=>{console.log(vdata);

      appstatus.forEach(vappname=>{

       

        if (vappname[0]== vdata.App_name)

        { if( this.max > (Number(vappname[1]) + Number(vappname[2]) + 1)  ){

          this.max = Number(vappname[1]) + Number(vappname[1]) + 1;

        }

          if (vdata.App_status=="System Avaiable")

          {

            vappname[1]= Number(vappname[1]) + 1;

//console.log(vappname[1])

          }

          else{

            vappname[2]= Number(vappname[2]) + 1;

          }

        }

      })

    })

  })   

var ctx = document.getElementById("appStatus");//.getContext('2d');

ctx.style.backgroundColor="#330000"

setTimeout(function(){

this.chart =new Chart(ctx,{

  type: 'bar',

  data: {

      labels: ["ftpmymicros","appstastwdtrans","stwdmyportal","mymicros"],

      datasets: [{

          label: '# Avaliable ' + vformatdate,

          fontColor :'#ffffff',

          data: [appstatus[0][1],appstatus[1][1],appstatus[2][1],appstatus[3][1]],

          backgroundColor:[ '#800080', '#800080', '#800080', '#800080'],

          borderColor: [

              'rgba(54, 162, 235, 1)',

              'rgba(54, 162, 235, 1)',

              'rgba(54, 162, 235, 1)',

              'rgba(54, 162, 235, 1)'

           

          ],

          borderWidth: 1

      },

      {

        label: '# Not avaliable ' + vformatdate,

        fontColor :'#ffffff',

        data: [appstatus[0][2],appstatus[1][2],appstatus[2][2],appstatus[3][2]],

        backgroundColor: ['#FFA500','#ace600','#ace600','#ace600'],

        borderColor: [

          'rgba(54, 162, 235, 1)',

          'rgba(54, 162, 235, 1)',

          'rgba(54, 162, 235, 1)',

          'rgba(54, 162, 235, 1)'

               

        ],

        borderWidth: 1

    }

    ]

  },

  options: {

    responsive:true,

    title: {

      display: true,

      text: 'Application Avaliablty' + vformatdate,

      position: "top",

      fontSize: 18,

      fontColor: "#ffffff"

    },

    legend: {

      display: true,

      position: 'bottom',

     labels: {

        fontColor: "#ffffff",

      }

    },

    scales: {

      xAxes: [{

          stacked: true,

          barPercentage: 0.4,

          gridLines: {

            color: "rgba(0, 0, 0, 0)"},

          ticks:{fontSize:10,fontColor:'#ffffff'}

      }],

      yAxes: [{

          stacked: true,

          ticks:{

            min:0,max:this.max,

            fontSize:10,fontColor:'#ffffff',

            callback:function(v,i,vs){

             

              return ((v/this.max)*100).toFixed(0) + '%'

            }

          }

      }]

  }

  },

  chartArea: {

    backgroundColor:  "#999"

  }

})

},3000);

  }

  //public content=[{"_id":"001784aa76d6b389c4f91fdf511195d8","_rev":"1-b14969a9f6a96e73ce1270623a63f1ad","App_name":"ftp1.mymicros.net","App_status":"System Avaiable","App_RespTime":"01:37:00","App_RespDate":"11-30-2018"},{"_id":"001784aa76d6b389c4f91fdf51630994","_rev":"1-9cee02fb54504ae1e001da5848c21dfe","App_name":"stwdtrans.microsdc","App_status":"System Avaiable","App_RespTime":"01:55:00","App_RespDate":"11-30-2018"},{"_id":"001784aa76d6b389c4f91fdf5192c3cc","_rev":"1-cccf8342a9c704462742355040d23cd7","App_name":"stwdmyportal.microsdc.com","App_status":"System Avaiable","App_RespTime":"02:30:00","App_RespDate":"11-30-2018"},{"_id":"001784aa76d6b389c4f91fdf51a57741","_rev":"1-585e82df84ac0bffd3e6060bfd91b741","App_name":"mi.mymicros.net","App_status":"System Avaiable","App_RespTime":"02:48:00","App_RespDate":"11-30-2018"}];

  ngOnInit() {

    console.log('max',this.max)

    //console.log(appstatus)

   /* for(i;i<this..length; i++){

      if(this.content[i].App_name == 'ftp1.mymicros.net'){

        this.data.avail = this.content[i].App_status == 'System Avaiable'?this.data.avail + 1:this.data.avail;

        this.data.not = this.content[i].App_status == 'System Avaiable'?this.data.not + 1:this.data.not;

      }

    }

    console.log(this.data)

 

    */

}

}

[Sander Elias]

Hi Polsani,

What's line 64? You should probably cast the thing you assign to something that fits your need.

Regards

Sander