-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The chart is distorted #10
Comments
Hey, I've added a sample with dynamic data: https://github.com/AlbinoDrought/chartjs-plugin-downsample/blob/master/samples/dynamic.html#L98 Can you please try with both import React, {Component} from 'react';
import {Line} from 'react-chartjs-2';
import {tooltipLabel, yAxes} from "../../../../configurations/chartFormat";
import DownsamplePlugin from 'chartjs-plugin-downsample';
const Chart = require('react-chartjs-2').Chart;
interface ChartProps {
data: Array<any>
}
const option = {
type: 'line',
legend: {
display: false
},
animation: {
duration: 0
},
scales: {
xAxes: [{
gridLines: {drawOnChartArea: false},
type: 'time',
time: {
unit: 'minute',
// displayFormats: {
// minute: 'h:mm A'
// }
},
ticks: {
maxRotation: 0,
autoSkip: true,
autoSkipPadding: 50,
maxTicksLimit: 2
}
}],
yAxes: [{
ticks: {
stacked: true,
min: 0,
autoSkip: true,
// autoSkipPadding: 15,
callback: function (value, index, values) {
return (index === 0 || index === values.length - 1) ? yAxes(value, values) : null
},
}
}]
},
tooltips: {
displayColors: false,
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
return tooltipLabel(tooltipItem, data, 'TPS : ')
}
}
},
downsample: {
enabled: true,
threshold: 100,
preferOriginalData: true,
}
}
class TestChart extends Component<ChartProps> {
componentDidMount() {
Chart.pluginService.register(DownsamplePlugin);
console.log("componentDidMount")
}
componentDidUpdate(prevProps: Readonly<ChartProps>, prevState: Readonly<{}>, snapshot?: any) {
console.log("componentDidMount")
}
componentWillUnmount() {
console.log("componentDidMount")
}
chartData = (dataList: Array<any>) => {
let pointTypeList = dataList.map(function (data) {
return {
x:data.timestamp * 1000,
y:data.tps_count
};
})
return {
datasets: [
{
fill: false,
lineTension: 0,
borderWidth: 1,
backgroundColor: 'rgba(75,118,192,0.4)',
borderColor: 'rgb(32,92,92)',
pointBorderColor: 'rgba(91,128,191,0.4)',
pointBackgroundColor: '#fff',
pointBorderWidth: 0,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 1,
pointRadius: 0,
pointHitRadius: 10,
data: pointTypeList
}
]
};
}
render() {
const {data} = this.props;
return (
<div>
<Line options={option}
data={this.chartData(data)}
/>
</div>
);
}
}
export default TestChart; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello
I took the data every five seconds and put it on the chart.
If you first put data in the chart and lander it normally goes downsamples, and then the data looks distorted like an image.
First Landered Chart,
![image](https://user-images.githubusercontent.com/67257236/93317148-157bf380-f848-11ea-9f55-4c86402d646c.png)
Next Landered Chart
![image](https://user-images.githubusercontent.com/67257236/93317107-02692380-f848-11ea-8e39-9dd7a4df1459.png)
The code I wrote is as follows.
The text was updated successfully, but these errors were encountered: