CODEWITHSUNDEEP
javascriptlightningchart
Gracie williams
Gracie williams

Reputation: 1145

Custom DateTime in X axis in Lightningchart JS

I have X and axis like this , Its 15 seconds chart.

["2020-05-22 14:20:22", "173.9"]
["2020-05-22 14:20:40", "175.3"]
["2020-05-22 14:20:58", "172.4"]

I tried to add like below

for(var key in json)
{

    var xTime = stringToDate(json[key][0]);
    var yVal  =  parseFloat(json[key][1]);
    series.add({ x: timer, y: yVal})

}

function stringToDate(s)  {
  s = s.split(/[-: ]/);
  return new Date(s[0], s[1]-1, s[2], s[3], s[4], s[5]);
}

But chart is rendering with weird values in x axis

enter image description here

Upvotes: 1

Views: 833

Answers (1)

Snekw
Snekw

Reputation: 2620

The DateTime axis for LightningChart JS expectes to receive the data as millisecond values. It doesn't support Date objects directly. So if you have times as Date objects then you would need to call getTime() method to get the time as milliseconds. This data can then be displayed by in the chart as time when using a AxisTickStrategies.DateTime on the axis that has the time values. If you want to have the DateTime axis tick strategy by default when adding a series to chart you can use defaultAxisXTickStrategy or defaultAxisYTickStrategy if the time is on the Y axis.

When you are displaying the current time or close to current time you will need to use a origin for the values and add the times as offsets from that origin time.

const dateOrigin = new Date()
const chart = lightningChart().ChartXY({
    defaultAxisXTickStrategy: AxisTickStrategies.DateTime(dateOrigin)
})

const series = chart.addLineSeries()
const xTime = new Date(new Date().getTime() + 100000000)
const yVal = 1
series.add({ x: xTime.getTime() - dateOrigin.getTime(), y: yVal})

See a working example below.

const {
    lightningChart,
    AxisTickStrategies
} = lcjs

// Create a XY Chart.
const dateOrigin = new Date()
const chart = lightningChart().ChartXY({
    defaultAxisXTickStrategy: AxisTickStrategies.DateTime(dateOrigin)
})

const series = chart.addLineSeries()
series.setCursorInterpolationEnabled(false)

const data = [
    ["2020-05-22 14:20:22", "173.9"],
    ["2020-05-22 14:20:40", "175.3"],
    ["2020-05-22 14:20:58", "172.4"]
]

function stringToDate(s)  {
  s = s.split(/[-: ]/);
  return new Date(s[0], s[1]-1, s[2], s[3], s[4], s[5]);
}

for(var key in data)
{
    var xTime = stringToDate(data[key][0]);
    var yVal  =  parseFloat(data[key][1]);
    series.add({ x: xTime.getTime() - dateOrigin.getTime(), y: yVal})
}
<script src="https://unpkg.com/@arction/[email protected]/dist/lcjs.iife.js"></script>

Upvotes: 2

Related Questions