realgraph

realtime graph data visualization library for React

npm install realgraph

Example A: Basic

import Graph from 'realgraph'

function Example() {
return (
<Graph
width={width} // Manually set graph width
height={height} // Manually set graph height
/>
)
}

Value

Time [ms]

<package /><this page />

↓ more examples ↓

Example B: Sine function

import Graph from 'realgraph'

function Example() {
return (
<Graph
getValueCallback={() => {
return Math.sin(Date.now() / 1000)
}}
max={1.1} // Maximum value in a graph
min={-1.1} // Minimum value in a graph
count={50} // Number of points in a graph at a time
interval={100} // Delay between callbacks in milliseconds
interval={100} // Delay between callbacks in milliseconds
axisXSectionCount={1} // Number of sections on X axis
axisYSectionCount={6} // Number of sections on Y axis
width={width} // Manually set graph width
height={height} // Manually set graph height
/>
)
}

Value

Time [ms]

Example C: Using own list of points

import { useEffect, useState } from 'react'
import Graph from 'realgraph'

function Example() {
// Default points
const [points, setPoints] = useState([
{ x: Date.now() - 1200, y: 10 },
{ x: Date.now() - 700, y: 30 },
{ x: Date.now() - 300, y: 80 },
])

// Adding new points in intervals
useEffect(() => {
const intervalId = setInterval(() => {
setPoints([
...points,
{
x: Date.now(),
y: 100 * Math.random(),
},
])
}, 500)
return () => {
clearInterval(intervalId)
}
})

return (
<RealGraph
points={points} // Provide points to Graph
isCallback={false} // Do not call callbacking function
isGraphMoving={true} // Graph moves in realtime
max={110} // Maximum value in a graph
min={-10} // Minumum value in a graph
/>
)
}

Value

Time [ms]

Example D: Adding points to internal Graph list of points

import { useEffect, useRef, ForwardedRef } from 'react'
import Graph from 'realgraph'

function Example() {
// Define ref
const ref: ForwardedRef<graphExportRefI | null> = useRef(null)

// Adding new points in intervals
useEffect(() => {
const intervalId = setInterval(() => {
if (ref && ref.current) {
ref.current.addPoint(100 * Math.random())
}
}, 500)

return () => {
clearInterval(intervalId)
}
})

return (
<RealGraph
ref={ref} // Pass your ref and get access to additional functions
isCallback={false} // Do not call callbacking function
isGraphMoving={true} // Graph moves in realtime
max={110} // Maximum value in a graph
min={-10} // Minumum value in a graph
/>
)
}

Value

Time [ms]

Example E: Export options

import { useRef, ForwardedRef } from 'react'
import Graph from 'realgraph'

function Example() {
const ref: ForwardedRef<graphExportRefI | null> = useRef(null)

return (
<>
<Graph
ref={ref}
width={width} // Manually set graph width
height={height} // Manually set graph height
/>

<button
onClick={() => {
if (ref && ref.current) console.log('points', ref.current.getPoints())
}}
>
Console log points
</button>

<button
onClick={() => {
if (ref && ref.current) ref.current.downloadCsv()
}}
>
Download CSV
</button>

<button
onClick={() => {
if (ref && ref.current) ref.current.downloadSvg()
}}
>
Visible graph SVG
</button>

<button
onClick={() => {
if (ref && ref.current) ref.current.downloadSvgFull()
}}
>
Full graph SVG
</button>
</>
)
}

Value

Time [ms]

Example F: Custom style

import Graph from 'realgraph'

const style = {
graphOuterContainer: {
background: 'linear-gradient(0deg, rgba(9,32,74,1) 0%, rgba(20,66,147,1) 100%)',
},
cursorCircle: {
fill: 'white',
},
cursorLineVertical: {
stroke: 'white',
strokeDasharray: '1,10',
},
cursorLineHorizontal: {
stroke: 'white',
strokeDasharray: '1,10',
},
cursorLineHorizontalText: {
fontWeight: '200',
style: {
fill: 'white',
},
},
cursorLineVerticalText: {
fontWeight: '200',
style: {
fill: 'white',
},
},
axisXTitle: {
color: 'white',
fontWeight: '200',
},
axisXText: {
color: 'white',
fontWeight: '200',
},
axisYTitle: {
color: 'white',
fontWeight: '200',
},
axisYText: {
color: 'white',
fontWeight: '200',
},
axisXSvg: {
fill: 'white',
},
axisYSvg: {
fill: 'white',
},
axisXLine: {
stroke: 'white',
},
axisYLine: {
stroke: 'white',
},
graphPath: {
stroke: 'white',
strokeWidth: '1',
},
},

function Example() {
return (
<Graph
width={width} // Manually set graph width
height={height} // Manually set graph height
style={style} // Custom style
/>
)
}

Value

Time [ms]