lightningchart

How to format TimeTickStrategy

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}. enter image description here

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?

Solution

  • 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>