Skip to main content
100%

Workunit Column Chart

✓ Published0🌍 Public
GGordonSmith
Last edited Oct 21, 2018
Created on Jan 26, 2016

This example demonstrates a column chart that visualizes Irish population data by location, showing male, female, and total population figures. The chart is dynamically populated by connecting to an HPCC Platform Workunit and fetching its results. Using the `Column` widget from `@hpcc-js/chart` and the `Workunit` class from `@hpcc-js/comms`, the example attaches to a specific workunit, retrieves result rows via the `fetchResults()` and `fetchRows()` Promise-based API, then maps the row data into chart-compatible arrays before rendering the final visualization.

AI-generated description

Tutorial 5: HPCC Platform Workunit Data + Column Chart

Fetching data from a HPCC Platform Workunit and rendering it in a Visualization:

1 - Create an empty Column chart and render it:

var columnChart = new Column()
    .target("placeholder")
    .columns(["Location", "Males", "Females", "Total"])
    .yAxisTitle("Population")
    .render()
    ;

2 - Attach to an existing Workunit:

var wu = Workunit.attach({ baseUrl: "https://play.hpccsystems.com:18010" }, "W20160918-054119");

3 - Fetch a list of the Workunit results (returns a Promise)

wu.fetchResults().then(results => { ... });

4 - Pick the first result and fetch its content (returns a Promise)

results[0].fetchRows().then(rows => {...});

5 - Map the rows to a data array:

var data = rows.map(row => [row.location, row.males, row.females, row.total]);

6 - Update the Column chart with the mapped data:

columnChart
    .data(data)
    .render()
    ;
apache-2.0 Licensed

Similar vizzes

Loading thumbnail…

D3 Example

This stacked area chart visualizes world population changes from 1950 onward using D3.js, with data from United Nations Population Estimates. The chart maps time on the x-axis and population on the y-axis, with each country represented by a colored area layer stacked atop one another. The visualization uses an SVG rendering with a time scale for the x-axis, a linear scale for population, and a categorical color scale for countries. A legend identifies the color-coded countries, and axes include formatted labels with a custom tick formatter that converts Giga to "B" for billions. The chart is interactive in that it responds to the loaded CSV dataset, dynamically stacking areas by country and rendering population values over time. This example is part of Curran's "Splitting Charts" screencast series and is forked from prior blocks, demonstrating iterative development of data visualizations using D3.js.This example demonstrates an interactive stacked area chart visualizing world population changes over time. Built with D3.js, it renders directly to SVG, creating a clean, scalable graphic. The chart maps time (year) to the x-axis and population to the y-axis, with each country's population represented as a distinct colored layer, stacked to show the total population distribution. The visualization uses a color legend for country identification, custom axis formatting (e.g., "B" for billion), and a smooth layering approach to display population trends across multiple countries from 1950 onward. The data comes from the United Nations Population Estimates.

CCurran Kelleher
60% match