`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)
}
}
}
.
