Gauge chart dashboard 2 - Editor
This example shows linear gauge charts on a dashboard with real-time data.
const lcjs = require('@lightningchart/lcjs')
const { lightningChart, Themes, AxisScrollStrategies, AxisTickStrategies, emptyFill, emptyLine } = lcjs
// Create HTML elements for the dashboard layout
const exampleContainer = document.getElementById('chart') || document.body
if (exampleContainer === document.body) {
exampleContainer.style.width = '100vw'
exampleContainer.style.height = '100vh'
exampleContainer.style.margin = '0px'
}
exampleContainer.style.display = 'flex'
exampleContainer.style.flexDirection = 'row'
const gaugeLayout = document.createElement('div')
exampleContainer.append(gaugeLayout)
gaugeLayout.style.width = '20%'
gaugeLayout.style.height = '100%'
const xyContainer = document.createElement('div')
exampleContainer.append(xyContainer)
xyContainer.style.width = '80%'
xyContainer.style.height = '100%'
// Initialize LightningChart JS
const lc = lightningChart()
const gaugeChartArray = []
const lineSeriesArray = []
// Create XY chart for line series
const xyChart = lc
.ChartXY({
legend: { visible: false },
container: xyContainer,
// theme: Themes.darkGold
})
.setTitle('')
.setCursor((cursor) => cursor.setTickMarkerXVisible(false))
xyChart
.getDefaultAxisX()
.setTickStrategy(AxisTickStrategies.Empty)
.setThickness(0)
.setStrokeStyle(emptyLine)
.setScrollStrategy(AxisScrollStrategies.scrolling)
.setInterval({ start: 0, end: 10_000, stopAxisAfter: false })
xyChart.getDefaultAxisY().dispose()
// Create dashboard rows
for (let iCh = 0; iCh < 4; iCh++) {
const axisY = xyChart
.addAxisY({ iStack: 4 - iCh })
.setMargins(5, 5)
.setInterval({ start: 0, end: 100 })
const lineSeries = xyChart.addLineSeries({ axisY }).setMaxSampleCount(10_000)
lineSeriesArray.push(lineSeries)
const gaugeContainer = document.createElement('div')
gaugeLayout.append(gaugeContainer)
gaugeContainer.style.height = '25%'
const theme = xyChart.getTheme()
const colorBad = theme.examples.badGoodColorPalette[0]
const colorNeutral = theme.examples.badGoodColorPalette[1]
const colorGood = theme.examples.badGoodColorPalette[2]
const gauge = lc
.LinearGauge({
container: gaugeContainer,
// theme: Themes.darkGold,
})
.setTitle('')
.setBarThickness(30)
.setTickFormatter((value) => value.toFixed(0))
if (iCh <= 1) {
// No interpolation
gauge.setColorInterpolation(false).setRanges([
{ start: 0, color: colorBad },
{ start: 33.3, color: colorNeutral },
{ start: 66.6, end: 100, color: colorGood },
])
} else {
// Interpolated gauge
gauge.setColorInterpolation(true).setRanges([
{ start: 0, color: colorBad },
{ start: 50, color: colorNeutral },
{ start: 100, color: colorGood },
])
}
gaugeChartArray.push(gauge)
}
// Generate random real-time data
const prevValues = lineSeriesArray.map((_) => Math.random() * 100)
setInterval(() => {
const currentTime = performance.now()
for (let iCh = 0; iCh < 4; iCh++) {
const prev = prevValues[iCh]
const currentValue = Math.max(Math.min(prev + 5 * (Math.random() * 2 - 1), 100), 0)
prevValues[iCh] = currentValue
lineSeriesArray[iCh].appendJSON({ x: currentTime, y: currentValue })
if (!cursorTarget) gaugeChartArray[iCh].setValueAnimation(true).setValue(currentValue)
}
}, 1000 / 60)
// Custom interaction; when showing cursor in main XY chart, also show pointed values in each gauge
let cursorTarget
xyChart.addEventListener('cursortargetchange', (event) => {
if (event.hits && event.hits.length > 0) {
event.hits.forEach((hit) => {
const i = lineSeriesArray.indexOf(hit.series)
const gauge = gaugeChartArray[i]
gauge.setValueAnimation(false).setValue(hit.y)
})
cursorTarget = event
} else {
cursorTarget = undefined
}
})
This example shows linear gauge charts on a dashboard with real-time data.