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″}
- Sriram Kannan asked 1 year ago
- You must login to post comments
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
- Andrew Burnett-Thompson answered 1 year ago
- last edited 1 year ago
- You must login to post comments
Please login first to submit.