Pre loader

Xy Chart With Date in X axis and Numeric Value in Y axis

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1
0

I am facing a little hurdle in plotting the date value to the chart.

How to add the date to chart x axis and numeric value to the y axis?
Please provide a example to add the date in x axis and numeric value in the y axis.

Please provide a example with one series in the y axis.

I have a requirement to plot the patient vital signs, the date value in x axis and vital signs in y axis.
x – Date when the vital sign is captured
y1, y2, y3, y4, y5 – BP, Heart rate & other vital signs

The model data looks like below.

{“x”:”29-Nov-2022 04:37″,”y1″:”119″,”y2″:”80″,”y3″:”15″,”y4″:”23.6″,”y5″:”86″},
{“x”:”29-Nov-2022 04:38″,”y1″:”119″,”y2″:”80″,”y3″:”15″,”y4″:”23.6″,”y5″:”87″},
{“x”:”29-Nov-2022 04:39″,”y1″:”119″,”y2″:”80″,”y3″:”15″,”y4″:”23.6″,”y5″:”86″}

Version
scichart 2.2.2417
  • You must to post comments
0
0

Hi good morning Sriram,

This was actually quite easy. SciChart.js expects dates in unix timestamp format / 1000. The reason for the /1000 is higher precision.

Say you have input data like this:

  // Given some data in DD MMM YYYY hh:mm:ss format
  const rawData = [
    { date: "01 JAN 2022 22:00:00", value: 178 },
    { date: "01 JAN 2022 23:00:00", value: 132 },
    { date: "02 JAN 2022 00:00:00", value: 165 },
    { date: "02 JAN 2022 01:00:00", value: 172 },
    { date: "02 JAN 2022 02:00:00", value: 189 },
    { date: "02 JAN 2022 03:00:00", value: 180 },
  ];

You can conver this to xValues, yValues as follows:

// converts dateString in format 'DD MMM YYYY hh:mm:ss' to scichart format
const convertToSciChartFormat = (dateString) => {
  // Date.parse returns number of milliseconds since 1/1/1970
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse
  const date = Date.parse(dateString);
  // SciChart dates are unix time format / 1000 for precision reasons
  return date / 1000;
};

  // Convert this data to format scichart expects. We do this for performance & precision reasons
  const xValues = rawData.map(row => convertToSciChartFormat(row.date));
  const yValues = rawData.map(row => row.value);

Now SciChart can accept the data:

  // Add a series to the chart
  sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
    strokeThickness: 3,
    stroke: "#50C7E0",
  }));

I’ve created a full example for you on Github. Check it out here.

Note that if your string representation of the date differs from mine you may need slightly different logic in convertToSciChartFormat() but the principle remains the same.

Hope this helps!

Best regards,
Andrew

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies