This example shows how to set up a pump chart with some configuration options. The pump performance curve and system curves are defined by a string function defition using q as the flow variable; e.g. 10-q^2 will generate the function \(h(q)=10-q^{2}\). It uses the plot() method to plot a single data point at a time, and getElement() to append it onto the HTML page. When hovering over any data point or axis label, a tooltip will be displayed with more information.
See below for the output of this example which plots 100 random data points.
Follow these steps to create a new webpack project and install the psychart dependency to run this example.
# Create and open project folder
mkdir Pump_Curve_demo
cd Pump_Curve_demo
# Initialize project and install dependencies
npm init -y
npm pkg set type="module"
npm i psychart@0.8.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" defer></script>
</head>
<body></body>
</html>
import { Pumpchart } from 'psychart';
// Define timestamps
const now = Date.now();
const onehr = 60 * 60 * 1000;
const in1hr = now + onehr
const nData = 100;
// Create a custom pump chart
const pumpchart = new Pumpchart({
curve: { // Define performance curves as a function of `q` (flow rate)
pump: '30-(q/100)^2',
system: '5+(q/75)^2',
},
speed: {
max: 60, // Max pump speed (rpm)
operation: 55, // Operational speed (rpm)
steps: [15, 30, 45], // Minor pump curves (rpm)
},
units: {
flow: 'gpm',
head: 'psi',
power: 'kW',
speed: 'rpm',
},
timestamp: { // Set the start and ending timestamps for colorizing data
start: now,
stop: in1hr,
}
});
// Plot `nData` number of data points
for (let t = now; t < in1hr; t += onehr / nData) {
const flow = Math.random() * 300;
const head = Math.random() * 20;
pumpchart.plot({ flow: flow, head: head }, { timestamp: t });
}
// Append pumpchart to the document <body>
document.body.append(pumpchart.getElement());
In the base project directory Pump_Curve_demo/, run the following command. If changes are made in the source files, the demo will automatically be recompiled. Press CTRL+C to stop running.
npx webpack --mode development --watch
Open the index.html file in any web browser of your choice! You should see a page similar to the one below.