Document Details

Iot Hub Live Data Visualization In Web Apps
Home / Scan #2 / Iot Hub Live Data Visualization In Web Apps
Sad Tux - Windows bias detected
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.
GitHub View on GitHub 📚 View on Microsoft Learn

Bias Analysis

Detected 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).
GitHub Create Pull Request

Scan History

Date Scan Status Result
2026-01-14 00:00 #250 in_progress Clean Clean
2026-01-13 00:00 #246 completed Clean Clean
2026-01-11 00:00 #240 completed Clean Clean
2026-01-10 00:00 #237 completed Clean Clean
2026-01-09 00:34 #234 completed Clean Clean
2026-01-08 00:53 #231 completed Clean Clean
2026-01-06 18:15 #225 cancelled Clean Clean
2025-08-17 00:01 #83 cancelled Clean Clean
2025-07-13 21:37 #48 completed Biased Biased
2025-07-12 23:44 #41 cancelled Biased Biased
2025-07-09 13:09 #3 cancelled Clean Clean
2025-07-08 04:23 #2 cancelled Biased 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.