Workunit Column Chart
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 descriptionTutorial 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()
;