react-timeseries-charts
react-timeseries-charts copied to clipboard
LineChart error - TypeError: this.props.series.events is not a function
I try to create a simple LineChart and every time I get this error trying to include a LineChart: TypeError: this.props.series.events is not a function
var chart = <div></div>
if (this.state.data){
chart = <Resizable>
<ChartContainer timeRange={this.state.data.range()}>
<ChartRow height="220">
<YAxis id="temp" label="TEMP" min={this.state.data.min()} max={this.state.data.max()} width="60" type="linear"/>
<Charts>
<LineChart axis="temp" series={this.state.data} column={["temp"]}/>
<LineChart axis="hum" series={this.state.data} column={["hum"]}/>
</Charts>
<YAxis id="hum" label="HUM" width="80" min={this.state.data.min()} max={this.state.data.max()} type="linear" />
</ChartRow>
</ChartContainer>
</Resizable>
}
I create this.state.data like this:
const resultData = result.map((item) => { return [item.TIMESTAMP*1000, item.TEMP, item.HUM]});
this.setState({
isLoaded: true,
data: timeSeries( {
name: "sensor_"+this.state.sensorid,
columns: ["time", "temp", "hum"],
points: resultData
})
});
and result variable looks like this:
const result = [
{ ID: 1, SENSORID: '1', TIMESTAMP: 1611047447, TEMP: 25, HUM: 50 },
{ ID: 2, SENSORID: '1', TIMESTAMP: 1611047448, TEMP: 26, HUM: 50 },
{ ID: 3, SENSORID: '1', TIMESTAMP: 1610881200, TEMP: 25, HUM: 50 },
{ ID: 4, SENSORID: '1', TIMESTAMP: 1610881200, TEMP: 25, HUM: 50 }
]
Complete error:
Uncaught (in promise) TypeError: this.props.series.events is not a function
renderLine LineChart.js:318
wrappedMethod react-hot-loader.development.js:555
renderLines LineChart.js:301
map Underscore
renderLines LineChart.js:300
wrappedMethod react-hot-loader.development.js:555
render LineChart.js:408
hotComponentRender react-hot-loader.development.js:592
proxiedRender react-hot-loader.development.js:600
React 13
sqlQuery chart.js:54
promise callback*sqlQuery chart.js:48
wrappedMethod react-hot-loader.development.js:555
componentDidMount chart.js:30
wrappedMethod react-hot-loader.development.js:545
React 7
unstable_runWithPriority scheduler.development.js:255
React 32
js index.js:9
Webpack 7
LineChart.js:318
React 7
sqlQuery chart.js:54
(Asíncrono: promise callback)
sqlQuery chart.js:48
wrappedMethod react-hot-loader.development.js:555
componentDidMount chart.js:30
wrappedMethod react-hot-loader.development.js:545
React 7
unstable_runWithPriority scheduler.development.js:255
React 7
dispatchInteractiveEvent self-hosted:1208
React 25
js index.js:9
Webpack 7