Custom DateTime in X axis in Lightningchart JS

Question

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

@Snekw Hi , Request your assistance , thanks – Gracie williams May 23 '20 at 15:28 — Gracie williams, May 23 '20 at 15:28

score 2 · Accepted Answer · answered May 28 '20 at 07:23

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/lcjs@1.3.0/dist/lcjs.iife.js"></script>

Thank you , how do you show the date too in label while hovering on line chart... and also if there is gap between two data , there is gap in between , how to avoid it ? Example is trading hours of yesterday is 6 hours and today trading hours is 6 hours , how to seamlessly show it ? — Gracie williams, May 28 '20 at 13:50
For how to show the date in the result table, I would appreciate if you post another question for that. For the gap, I don't think we have any method to do that right now. — Snekw, May 28 '20 at 13:58
ok sure , I have asked here https://stackoverflow.com/questions/62066674/how-to-show-custom-label-in-line-chart-or-scatter-chart — Gracie williams, May 28 '20 at 14:04
sir any update on my two new questions ? I am checking stackoverflow daily for your answers.. — Gracie williams, Jun 07 '20 at 04:11

Custom DateTime in X axis in Lightningchart JS

1 Answers1

Linked