on selecting dropdown values graph gets stuck with unresponsive page.

[npkp18]

`html
<select class=”dropdown” name=”chartType” id=”x” (change)=”changeChartx($any($event.target).value)”>
<option selected disabled>Select Value on X Axis</option>
<option value=”x1″>X</option>
<option value=”x2″>Y</option>
</select>

<select class=”dropdown” name=”chartType” id=”y” (change)=”changeCharty($any($event.target).value)”>
<option selected disabled>Select Value on Y Axis</option>
<option value=”y1″>Y</option>
<option value=”y2″>X</option>
</select>
<div>
<canvasjs-chart [options]=”canvasChart” [styles]=”{width: ‘100%’, height: ‘360px’}” (chartInstance)=”getChartInstance($event)”></canvasjs-chart>
</div>

.ts

data : any =[{x: 1, y: 10}, {x: 2, y: 11}, {x: 3, y: 13}, {x: 4, y: 15}, {x: 5, y: 18}]
xAxis = ‘x1’
yAxis = ‘y1′

this.canvasChart = {
title: {
text: “Live chart example”,
fontFamily: “Trebuchet MS, Helvetica, sans-serif”
},
axisY: {
title: “Value”,
includeZero: true
},
data: [{
type: “line”,
dataPoints:
this.data

}]
}
}
getChartInstance(chart: object) {
this.chart = chart
this.updateChart()
this.changedChart()
}
updateChart= () => {
this.yValue = this.yValue + Math.round(2 + Math.random() *(-2-2))
this.data.push({x: this.xValue,y: this.yValue,})
this.xValue++
this.chart.render()
this.timeout = setTimeout(this.updateChart, 2000)
}

changeChartx(option:any){
this.xAxis=option
this.changedChart()
}
changeCharty(options:any){
this.yAxis=options
this.changedChart()
}

changedChart(){
let changedData = [{}]
for(var i = 0; i<this.data.length; i++){
if(this.xAxis==’x1’ && this.yAxis == ‘y1′){
this.chart.render()
this.timeout = setTimeout(this.updateChart, 2000)
}
else if(this.xAxis==’x2’ && this.yAxis == ‘y1′){
changedData.push({x: this.yValue,y: this.yValue,})
console.log(changedData)
this.data.push(changedData)
this.chart.render()
this.timeout = setTimeout(this.updateChart, 2000)
console.log(this.data)
}
else if(this.xAxis==’x2’ && this.yAxis == ‘y2’){
changedData.push({x: this.yValue,y: this.xValue,})
console.log(changedData)
this.data.push(changedData)
console.log(this.data)
this.chart.render()
this.timeout = setTimeout(this.updateChart, 2000)
}
else{
changedData.push({x: this.xValue,y: this.xValue,})
console.log(changedData)
this.data.push(changedData)
console.log(this.data)
this.chart.render()
this.timeout = setTimeout(this.updateChart, 2000)
}
}
}

[Thangaraj Raman]

@npkp18,

Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google Drive or OneDrive so that we can look into your code, run it locally at our end to understand the scenario better, and help you out?

—
Thangaraj Raman
Team CanvasJS