token.html
<mat-form-field>
<mat-select formControlName="selectedValue" >
<mat-option (click)="TokenPrice()" *ngFor="let c of value" [value]="c.viewValue">{{c.value}}</mat-option>
</mat-select>
</mat-form-field>
token.ts
value:coins[] = [
{value:'USDT', viewValue:'0xdAC17F958D2ee523a2206206994597C13D831ec7'},
{value:'BUSD', viewValue:'0xdAC17F958D2ee523a2206206994597C13D831ec7'},
{value:'SHIB', viewValue:'0x95aD61b0a150d79219dCF64E1E6Cc01f0B64C4cE'},
{value:'WBTC', viewValue:'0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599'},
]
getting selected value as
get selectedValue():FormControl{
return this.loginForm.get("selectedValue") as FormControl
}
for every drop-down selection, returns token price.Token Price keeps changing based on selection.
async TokenPrice(){
this.TokenUsdPrice = await Promise.all( await this.blocks.map(async (e,i)=>
await Moralis.Web3API.token.getTokenPrice({address:this.selectedValue.value,to_block:e.block})
))
this.filtereTokenPrice();
}
I want to display TokenPrice(Dynamic) in X-axis and Dates(constant) in Y-axis.
async filtereTokenPrice(){
this.usd = await this.TokenUsdPrice.map(item=>item.usdPrice);//get usdprice
this.chart = new Chart('canvas',{
type:'line',
data:{
labels:this.service.getdates(),
datasets:[
{
data:this.usd,
borderWidth:1,
fill:false
}
]
}
})
}
this works only for 1 selection and displays as needed. When I select other options I get
Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.
Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.
How do I update X-axis values for every other selction.If more information or stackslibz needed please let me know. Thank you.
.destroy()
Use this to destroy any chart instances that are created. This will clean up any references stored to the chart object within Chart.js, along with any associated event listeners attached by Chart.js. This must be called before the canvas is reused for a new chart.
https://www.chartjs.org/docs/latest/developers/api.html#destroy
async filtereTokenPrice(){
this.usd = await this.TokenUsdPrice.map(item=>item.usdPrice);//get usdprice
this.chart.destroy(); // <-----
this.chart = new Chart('canvas',{
type:'line',
data:{
labels:this.service.getdates(),
datasets:[
{
data:this.usd,
borderWidth:1,
fill:false
}
]
}
})
}
<canvas id="canvas"></canvas>
@ViewChild('chart') chart;