Nrthugu

Could use some help trying to create a simple line chart with Victory.

What I'm trying to do:

I'm basically trying to create a line chart that shows random numbers for the last 10 minutes. I generate a new random number every 3 seconds, and add that num to the line chart.

So the X-Axis should be from 0 minutes – 10 minutes, and the Y axis should be the actual rand num for a given time.

My main problem is that I am pretty lost on how to go about creating the X axis from 0 – 10 minutes in 3 second intervals

What I have so far:

Here's a Code Sandbox with what I've done so far so you can try it out: https://codesandbox.io/s/6wnzkz512n

The main Chart component:

import React from 'react'

import { VictoryChart, VictoryLine, VictoryAxis } from 'victory'



class Chart extends React.Component {

  constructor() {

    super()

    this.state = {

      data: 

    }

  }



  // Add a new data point every 3 seconds

  componentDidMount() {

    this.getRandNum()

    setInterval(this.getRandNum, 3000)

  }



  // get rand num from 1-5 along with current time,

  // and add it to data. not sure if this is right approach

  getRandNum = () => {

    const newData = {

      date: new Date(),

      num: Math.floor(Math.random() * 5) + 1

    }



    this.setState({

      data: [...this.state.data, newData]

    })

  }



  render() {

    return (

      <VictoryChart width={600} height={470}>

        <VictoryLine

          style={{

            data: { stroke: 'lime' }

          }}

          data={this.state.data}

          x="date"

          y="num"

        />

      </VictoryChart>

    )

  }

}

Code Sandbox with solution: https://codesandbox.io/s/989zx8v6v4

Changes:

• Add startTime in state
  


• 
  state.data.date rename as state.data.time and contains number of seconds from stat


• Initialization in componentDidMount()
  


• 
  getRandNum() calculate time difference in seconds


• 
  VictoryAxis format X axis as "m:ss"

Chart component:

    class Chart extends React.Component {

      constructor() {

        super();

        this.state = {

          data: ,

          startTime: null

        };

      }



      // Add a new data point every 3 seconds

      componentDidMount() {

        const startTime = new Date();

        const time = 0;

        const num = Math.floor(Math.random() * 5) + 1;



        this.setState({ data: [{ time, num }], startTime });

        setInterval(this.getRandNum, 3000);

      }



      // get rand num from 1-5 along with current time,

      // and add it to data. not sure if this is right approach

      getRandNum = () => {

        const actualTime = new Date();

        let num = Math.floor(Math.random() * 5) + 1;

        let time = Math.round((actualTime - this.state.startTime) / 1000);



        this.setState({

          data: [...this.state.data, { time, num }]

        });

      };



      render() {

        return (

          <VictoryChart width={600} height={470}>

            <VictoryAxis dependentAxis />

            <VictoryAxis

              tickFormat={t =>

                `${Math.floor(t / 60)}:${Math.round(t % 60)

                  .toString()

                  .padStart(2, "0")}`

              }

            />

            <VictoryLine

              style={{

                data: { stroke: "lime" }

              }}

              data={this.state.data}

              x="time"

              y="num"

            />

          </VictoryChart>

        );

      }

    }