Dfyjkt

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>
 );