Skip to main content
SimilarExport ZIP
100%

Sample MegaChart

✓ Published0🌍 Public
GGordonSmith
Last edited Jan 29, 2016
Created on Jan 29, 2016

The HPCC MegaChart example displays Irish population data across multiple counties, with columns for location, males, females, and total population. A selector above the chart lets users switch between different visualization types. The code loads the HPCC visualization library and its composite MegaChart module from a CDN, then instantiates a MegaChart widget bound to a placeholder div. The widget receives its dataset and column configuration through chained method calls, with `.render()` triggering the display.

AI-generated description

HPCC Mega Chart

Similar vizzes

Loading thumbnail…

Column Chart

This column chart displays Irish population data broken down by county and gender, with interactive click alerts showing the selected column and row values. The example uses the HPCC Systems visualization library, loading the `Column` chart module via `require(["src/chart/Column"])` and binding data through the `.columns()` and `.data()` methods. It renders through the `.target()` method into a full-height placeholder div, with click events handled by the `.on("click", ...)` callback. The chart visualizes census figures for males, females, and total population across all Irish counties.

GGordonSmith
79% match
Loading thumbnail…

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.

GGordonSmith
72% match
Loading thumbnail…

Roxie Column Chart

This example shows population data for Irish counties in an interactive column chart. A dropdown menu allows selection of male, female, or total population figures. The visualization uses the HPCC Platform's Roxie query service, fetching data via the `Query.attach` and `query.submit` APIs from `@hpcc-js/comms`. The retrieved rows are mapped into a data array and rendered using the `Column` chart component from `@hpcc-js/chart`.

GGordonSmith
72% match
Loading thumbnail…

Multi Chart

This example shows a multi chart interface that lets users switch between twelve chart types—including Area, Bar, Bubble, Column, Pie, and Radar—for the same five-subject score dataset. A dropdown menu triggers a re-render, clearing the previous chart and instantiating a new widget from the `@hpcc-js/chart` package via dynamic property access. The code uses `d3Select` from `d3-selection` to clear the placeholder, then applies columns and data to the selected chart constructor before calling `.render()`. The default view is a Column chart.

GGordonSmith
66% match
Loading thumbnail…

Workunit Irish Choropleth

This example visualizes the gender population imbalance across Irish counties as a choropleth map. It shows the percentage difference between females and males for each region using a diverging color palette, with the Republic of Ireland layered alongside Northern Ireland. The map is built with the `@hpcc-js/map` library’s `Layered`, `TopoJSONChoropleth`, and `topoJsonFolder` components, using a Mercator projection. Population data comes from a HPCC Platform workunit fetched via `Workunit.attach` and `fetchResults`, with colors balanced around zero using explicit min/max values.

GGordonSmith
64% match
Loading thumbnail…

Pie Chart

This example demonstrates a basic pie chart visualization using the `@hpcc-js/chart` library, specifically the `Pie` widget. It displays subject results across five categories—English, Irish, Math, Geography, and Science—with the chart rendering the data as proportional slices. The code instantiates the `Pie` widget, targets the `placeholder` div, and supplies data through the `columns` and `data` methods, which define the spreadsheet-like structure. The visualization is rendered entirely in the browser via `render()`, with styling handled by the included CSS.

GGordonSmith
64% match
Loading thumbnail…

LayoutChart

This example demonstrates a dashboard combining multiple interactive visualizations in a single resizable, draggable view using the `DockPanel` layout. It shows bar, pie, line, and hex bin charts alongside a layered map and a data table. The map layers several choropleth and thematic overlays—including countries, states, counties, GeoHash cells, a graticule, and a heat layer—using the `@hpcc-js/map` library. The code leverages APIs such as `ChoroplethCountries`, `GeoHash`, and `Layered`, with sample data derived from exam results and geographic counts.

GGordonSmith
64% match
Loading thumbnail…

Dashy Generated Dashboard 1

This dashboard presents a multi-panel view of people and account data, combining a US state choropleth, a gender bubble chart, a customer table, and an account summary line chart. It uses the HPCC-js composite, marshaller, and map libraries, with a RoxieRequest and WUResult fetching data from a remote ECL server. Linked selections filter results across panels, while a resizable layout arranges the widgets.

GGordonSmith
61% match