esnet / react-timeseries-charts

Declarative and modular timeseries charting components for React
http://software.es.net/react-timeseries-charts
Other
856 stars 283 forks source link

LineChart error - TypeError: this.props.series.events is not a function #462

Open eleruma opened 3 years ago

eleruma commented 3 years ago

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