Document Details
Iot Hub Live Data Visualization In Web Apps
❌
This page contains Windows bias
About This Page
This page is part of the Azure documentation. It contains code examples and configuration instructions for working with Azure services.
Bias Analysis
Bias Types:
⚠️
windows_first
⚠️
missing_linux_example
Summary:
The documentation assumes a Windows development environment throughout, with all command-line examples (e.g., setting environment variables, running commands) shown only in Windows CMD syntax. There are no explicit Linux or cross-platform shell equivalents provided for key steps such as setting environment variables or running the app. The instructions and screenshots reference Windows tools and patterns first, and do not offer parity for Linux or macOS users.
Recommendations:
- For every command-line example (e.g., setting environment variables, running npm commands, git commands), provide both Windows CMD and Linux/macOS (bash/zsh) equivalents, clearly labeled.
- In the 'Configure environment variables' section, add Linux/macOS export commands (e.g., export IotHubConnectionString=...) alongside the Windows set commands.
- When referencing file navigation or editors, use neutral language (e.g., 'your preferred editor') and avoid screenshots or instructions that are Windows-specific unless alternatives are also shown.
- Where App Service plans are discussed, give equal prominence to Linux hosting options, not just mentioning them as an aside.
- Add a note or table at the start of the tutorial summarizing which commands to use for Windows vs. Linux/macOS.
- Include troubleshooting steps relevant to Linux/macOS environments (e.g., checking environment variables, npm/node issues on Unix-like systems).
Create pull request
Scan History
| Date | Scan ID | Status | Bias Status |
|---|---|---|---|
| 2025-08-17 00:01 | #83 | in_progress | ✅ Clean |
| 2025-07-13 21:37 | #48 | completed | ❌ Biased |
| 2025-07-12 23:44 | #41 | in_progress | ❌ Biased |
| 2025-07-09 13:09 | #3 | cancelled | ✅ Clean |
| 2025-07-08 04:23 | #2 | cancelled | ❌ Biased |
Flagged Code Snippets
Note down the service connection string, you need it later in this tutorial.
[!INCLUDE [iot-authentication-service-connection-string.md](../../includes/iot-authentication-service-connection-string.md)]
## Download the web app from GitHub
Download or clone the web app sample from GitHub: [web-apps-node-iot-hub-data-visualization](https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git).
## Examine the web app code
On your development machine, navigate to the **web-apps-node-iot-hub-data-visualization** directory, then open the web app in your favorite editor. The following shows the file structure viewed in Visual Studio Code:
:::image type="content" source="./media/iot-hub-live-data-visualization-in-web-apps/web-app-files.png" alt-text="Screenshot that shows the web app file structure, with four files highlighted.":::
Take a moment to examine the following files:
* **server.js** is a service-side script that initializes the web socket and the Event Hubs wrapper class. It provides a callback to the Event Hubs wrapper class that the class uses to broadcast incoming messages to the web socket.
* **scripts/event-hub-reader.js** is a service-side script that connects to the IoT hub's built-in endpoint using the specified connection string and consumer group. It extracts the DeviceId and EnqueuedTimeUtc from metadata on incoming messages and then relays the message using the callback method registered by server.js.
* **public/js/chart-device-data.js** is a client-side script that listens on the web socket, keeps track of each DeviceId, and stores the last 50 points of incoming data for each device. It then binds the selected device data to the chart object.
* **public/index.html** handles the UI layout for the web page and references the necessary scripts for client-side logic.
## Configure environment variables for the web app
To read data from your IoT hub, the web app needs your IoT hub's connection string and the name of the consumer group that it should read through. It gets these strings from the process environment in the following lines in server.js:
:::code language="javascript" source="~/web-apps-node-iot-hub-data-visualization/server.js" range="7-20" highlight="1,8":::
Set the environment variables in your command window with the following commands. Replace the placeholder values with the service connection string for your IoT hub and the name of the consumer group you created previously. Don't quote the strings.