In this example, we set up Psychart with the ability to render data series from multiple streams. Two variables are required to fix the state, but data streams can be in many different formats. Psychart supports the following measurement types:
Each data series need to be assigned a unique numeric ID, which does not have to be organized or 0-indexed, and each series can support totally different styling options.
In this example, we are plotting time-series data from two rooms in a building, R1 and R2. Room R1 contains dry bulb and wet bulb sensors, and room R2 contains dry bulb and dew point sensors, all reporting in plot() function with appropriate arguments. We can set a unique numeric ID for each data series in order to connect points with a line.
Additionally, as we are using Psychart to monitor human comfort, we can render the ASHRAE standard-55 envelopes that come pre-built with Psychart. These are toggled on with the PsychartOptions object passed into the initialization of Psychart. Any number of regions can be rendered on Psychart.
We can also render a legend for Psychart. Plotted data needs the seriesName property to be considered as a true data series to be rendered in the legend.
Follow these steps to create a new webpack project and install the psychart dependency to run this example.
# Create and open project folder
mkdir Plotting_Data_demo
cd Plotting_Data_demo
# Initialize project and install dependencies
npm init -y
npm pkg set type="module"
npm i psychart@0.5.0 webpack-cli
# Create source files
touch index.html
mkdir src
touch src/index.js
# Open new files
open index.html
open src/index.js
Copy and paste the following source code blocks into the newly created files.
<html>
<head>
<script type="text/javascript" src="dist/main.js"></script>
</head>
<body></body>
</html>
import { Psychart } from 'psychart';
// Initialize Psychart.
const ps = new Psychart({
// Let's render a few ASHRAE standard-55 psychrometric
// envelopes for the current season onto our chart.
regions: ['Summer (light work)', 'Summer (sitting)', 'Summer (walking)'],
});
// Append Psychart and the legend onto the document and plot data.
window.addEventListener('load', () => {
document.body.append(ps.getElement());
plotData();
});
// Assume data comes in from room R1 as a clean CSV with the following columns:
// [0]: Unix timestamp, [1]: Dry bulb (F), and [2]: Wet bulb (F)
const R1Data = [
[1700000000000, 77, 67],
[1700001200000, 78, 66],
[1700002400000, 77, 64],
[1700003600000, 79, 65],
[1700004800000, 80, 67],
];
// Possibly the sensors in room R2 are configured differently:
// [0]: Unix timestamp, [1]: Dry bulb (F), and [2]: Dew point (F)
const R2Data = [
[1700000000000, 71, 57],
[1700001000000, 72, 58],
[1700002000000, 75, 56],
[1700003000000, 74, 54],
[1700004000000, 76, 55],
[1700005000000, 78, 55],
];
// Plot some data - this can be done dynamically
// as data is received by the client.
function plotData() {
// Knowing the start and end time of the measurements allows for gradients to be rendered properly
const startTime = 1700000000000,
endTime = 1700005000000;
for (const state of R1Data) {
// Extract the timestamp from the data table.
const timeStamp = state[0];
// Plot data onto Psychart.
ps.plot(
{
db: state[1],
other: state[2],
measurement: 'dbwb', // Shows the two measurement types are dry bulb and wet bulb
},
{
advanced: true,
line: true,
name: 'Room R1', // Need to assign a series name to connect data points and display in the legend
time: { start: startTime, end: endTime, now: timeStamp },
}
);
}
for (const state of R2Data) {
// Extract the timestamp from the data table.
const timeStamp = state[0];
// Plot data onto Psychart.
ps.plot(
{
db: state[1],
other: state[2],
measurement: 'dbdp' // Shows the two measurement types are dry bulb and dew point
},
{
advanced: true,
line: true,
name: 'Room R2', // Assign another series name to differentiate data series
time: { start: startTime, end: endTime, now: timeStamp },
gradient: 'Sunset', // Set a non-default gradient type to make it easier to visually differentiate between the two data series
}
);
}
// Plot the desired setpoint.
ps.plot(
{
db: 70,
other: 60,
measurement: 'dbwb'
},
{
name: 'Setpoint',
legend: false, // Show in the tooltip but not create a legend entry
color: '#DF1000', // Use a hex-code to define a single color instead of using a gradient
pointRadius: 8, // Enlarge the point to make it visually stand out
}
);
// Draw a warning line on the 70F wetbulb line, from 70-80F dry bulb.
ps.plot(
{
db: 80,
other: 70,
measurement: 'dbwb'
},
{
name: 'Warning',
legend: false,
color: 'FBAB10',
line: { db: 70, other: 70, measurement: 'dbwb' } // Draw a line between 2 arbitary points.
}
);
}
In the base project directory Plotting_Data_demo/, run the following commands, and then open your index.html file in any web browser of your choice! Uncomment the second line to open the project in Firefox, for example.
npx webpack --mode development # or --mode production
# firefox index.html