How to format TimeTickStrategy - lightningchart

Question

I'm currently using a TimeTickStrategy on the xAxis to show data flowing in real time. However, it's formatting the data using the unix epoch as {hours:minutes:seconds}.
Below is my xAxis code:
xAxis1 = chart.getDefaultAxisX()
.setTickStrategy(AxisTickStrategies.Time, (tickStrategy) => tickStrategy.setTimeOrigin(this.originTime))
.setScrollStrategy(AxisScrollStrategies.progressive)
.setMouseInteractions(false)
.setInterval(60000 * -15, 60000) //xAxis Range(Min,Max) = (origin - 15 minutes, origin + 1 minute)
I'd like to have that formatted in the local time, but I didn't see any options for that when I was reading through the TimeTickStrategy documentation:
https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/timetickstrategy.html
Example (MST):
457050:14:51 --> 11:14:51 AM
Is there a way to do this?

Answer 1

Seems like TimeTickStrategy has no configuration options for formatting.
Maybe you can use DateTimeTickStrategy? It's a bit clumsy but it has quite extensive configuration methods. Here's some kind of an example I whipped up.
/*
* LightningChartJS example showcasing the TimeTickStrategy feature with scrolling data and axis.
*/
// Extract required parts from LightningChartJS.
const {
lightningChart,
AxisScrollStrategies,
AxisTickStrategies,
Themes,
emptyTick,
} = lcjs
// Import data-generators from 'xydata'-library.
const {
createProgressiveTraceGenerator
} = xydata
const chart = lightningChart().ChartXY({
theme: Themes.darkGold,
})
.setTitle('Scrolling TimeTickStrategy example')
.setPadding({ right: 40 })
const axisX = chart
.getDefaultAxisX()
// Enable TimeTickStrategy for X Axis.
.setTickStrategy(AxisTickStrategies.DateTime, ticks => ticks
.setGreatTickStyle(emptyTick)
.setFormattingSecond(
undefined,
{ hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true },
(x) => 'minor'
)
)
// Configure progressive ScrollStrategy.
.setScrollStrategy(AxisScrollStrategies.progressive)
// Set view to 15 seconds
.setInterval(-1 * 15 * 1000, 0)
.setAnimationScroll(false)
const axisY = chart.getDefaultAxisY()
.setAnimationScroll(false)
// Add 3 series for real-time signal monitoring.
const seriesList = new Array(3).fill(0).map((_, iSeries) =>
chart
.addLineSeries({
dataPattern: {
pattern: 'ProgressiveX',
},
})
)
const legend = chart.addLegendBox().add(chart)
// Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
.setAutoDispose({
type: 'max-width',
maxWidth: 0.30,
})
// Stream live timestamp data into series.
// Application displays timestamps as offset from when application started (starts at 00:00:00).
const timeOrigin = Date.now()
Promise.all(
seriesList.map((_) =>
createProgressiveTraceGenerator()
.setNumberOfPoints(60 * 1000)
.generate()
.toPromise(),
),
).then((data) => {
let dataAmount = 0
const pushData = () => {
const nDataPoints = 1
seriesList.forEach((series, iSeries) => {
const seriesData = data[iSeries]
const seriesPoints = []
for (let i = 0; i < nDataPoints; i += 1) {
seriesPoints.push({
// TimeTickStrategy interprets values as milliseconds (UNIX timestamp).
// Exactly same as JavaScript Date APIs.
x: Date.now() - timeOrigin,
y: seriesData[(dataAmount + i) % seriesData.length].y,
})
}
series.add(seriesPoints)
})
dataAmount += nDataPoints
requestAnimationFrame(pushData)
}
pushData()
})
<script src="https://unpkg.com/#arction/lcjs#3.4.0/dist/lcjs.iife.js"></script>
<script src="https://unpkg.com/#arction/xydata#1.2.1/dist/xydata.iife.js"></script>