This example shows how to set up a pump chart with some configuration options. It renders the ideal pump performance curve and system curves. The equations for the pump and system curves are quadratic equations defined by the parameters provided in the options; where:
$$P(q) = H_{\text{max}} \times \left[ 1 - \left( \frac{q}{Q_{\text{max}}} \right)^{2} \right]$$
$$S(q) = H_{\text{static}} + k_{\text{fric}}q^{2}$$
Pumpchart 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.
If speed is not provided in the state variable, then Pumpchart will estimate the speed of the pump at that state. If power is provided in the state variable, then Pumpchart will calculate the output power and efficiency of the pump based on the head gain and flow rate. All units are assumed to be those provided within the options when initializing Pumpchart.
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.10.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: {
maxFlow: 3000,
maxHead: 35,
},
system: {
static: 5,
friction: 2e-6,
},
},
speed: {
max: 60, // Max pump speed (rpm)
operation: 45, // 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() * 2500;
const head = Math.random() * 25;
const power = flow * head / 2000;
pumpchart.plot({ flow: flow, head: head, power: power }, { 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.