|
// add your additional code here
<ejs-chart ref="chart" style="display:block;" :loaded="onChartLoad" :primaryXAxis='primaryXAxis' :enableCanvas='enableCanvas' :theme='theme' >
<e-series-collection>
<e-series :dataSource='seriesData' :marker='marker' :xName='xName' :yName='yName' :animation='animation' type='Line'> </e-series>
</e-series-collection> </ejs-chart><ejs-button cssClass="e-info" @click.native="onChange" style="text-transform:none !important">Load 100K Points</ejs-button> // add your additional code here
data: function() {
return {
theme: theme,
seriesData: [],
enableCanvas: true,
primaryXAxis: {
majorGridLines: { color: 'transparent' }
},
animation: { enable: false },
xName: 'x',
yName: 'y',
marker: {
visible: false
}
};
},
provide: {
chart: [LineSeries, Legend]
},
methods: {
onChange: function (e) {
let series1= [];
let point1;
let value = 0;
let i;
for (i = 0; i < 100000; i++) {
value += (Math.random() * 10 - 5);
point1 = { x: i, y: value };
series1.push(point1);
}
this.dt1 = new Date().getTime();
this.$refs.chart.ej2Instances.series[0].dataSource = series1;
this.$refs.chart.ej2Instances.refresh();
}, },
|