Supported Visualizations¶
The ChartFactor Toolkit supports several types of widgets and visualizations that can be used for different purposes. Each visualization is represented by an Aktive object. They are divided in modules according to their function. This means that in order to use a specific visualization, we need to include its module first.
The visualizations ecosystem is supported through 6 modules:
- Standard (cft-standard-charts.min.js)
- Tables (cft-tables-charts.min.js)
- Geo and Geo V2 (cft-geo-charts.min.js)
- Geo GL (cft-geogl-charts.min.js)
- Networks (cft-network-charts.min.js)
- Interactive (cft-interactive-charts.min.js)
Some modules and specific visualizations are based in third-party libraries which take care of the final rendering after data and options have been set through the Aktive object. For example: Standard's visualizations are based on Echarts, Ag-grid is used in the Tables module, and the Time Slider was built using D3.
The way to tell the ChartFactor Toolkit what type of visualization to use is through the .graph(“Widget Name”) function or through its shortcut if available. We can check if a given visualization is included by using cf.getSupportedVisualizations().
The following table shows the current supported widgets:
| Widget Name | Module | Shortcut | Type | Data configuration |
|---|---|---|---|---|
| Area Line | Standard | .arealine() | canvas | Attrs: 0-1 Time: 1 Metr: 1+ |
| Bars | Standard | .bars() | canvas | Attrs: 1+ Metr: 1+ |
| Bars and Line | Standard | .barsline() | canvas | Attrs: 1 Metr: 2+ |
| Box Plot | Standard | none | canvas | Attrs: 0-1 Metr: 1 |
| Custom Chart | Standard | none | html | None |
| Data List | Tables | none | html/css | Any field |
| Disk | Standard | .disk() | canvas | Attrs: 1 Metr: 1+ |
| Donut | Standard | .donut() | canvas | Attrs: 0-1 Metr: 1+ |
| Interaction Manager | Interactive | .imanager() | html | None |
| Field Selector | Interactive | none | html | None |
| Floating Bubbles | Standard | none | canvas | Attrs: 1 Metr: 1 |
| Gauge | Standard | none | canvas | Metr: Up to 3 |
| Geo Map (markers) | Geo | none | html/css | Attrs: 2+ |
| Geo Map (shapes) | Geo | none | html/css | Attrs: 1 Metr: 1+ |
| Geo Map GL | GeoGL | none | webgl | Layer-specific |
| Group Legend | Standard | none | canvas | Attrs: 1 Metr: 1+ |
| Heat Map | Standard | none | canvas | Attrs: 2 Metr: 1+ |
| Histogram | Standard | none | canvas | Metr: 1 |
| KPI | Standard | none | html | Metr: 1 or 2 |
| Markup | Text | none | html | None |
| Markdown | Text | none | html | None |
| Multigroup Trend | Standard | none | canvas | Attr: 1+ Time: 1 |
| Multimetric Area Line | Standard | none | canvas | Metr: 1+ Time: 1 |
| Multimetric Bars | Standard | none | canvas | Attrs: 0-1 Metr: 1+ |
| Multimetric Floating Bubbles | Standard | none | canvas | Attrs: 1 Metr: 1+ |
| Multimetric Trend | Standard | none | canvas | Metr: 1+ Time: 1 |
| Network | Networks | none | canvas | Attrs: 2+ |
| Packed Bubbles | Standard | none | canvas | Attrs: 1 Metr: 1 |
| Pie | Standard | .pie() | canvas | Attrs: 0-1 Metr: 1+ |
| Pivot Table | Tables | .pivot() | html | Rows: 1+ Metr: 1 + |
| Radar | Standard | .radar() | canvas | Attrs: 1 Metr: 2+ |
| Range Filter | Interactive | none | html | Metr: 1+ |
| Raw Data Table | Tables | .rdt() | html/css | Any field |
| Sankey | Standard | none | canvas | Attrs: 2+ Metr: 1 |
| Scatter Plot | Standard | .scatter() | canvas | Attrs: 0+ Metr: 2+ |
| Slicer | Tables | .slicer() | html/css | Attrs: 1 Metr: 1+ |
| Sunburst | Standard | none | canvas | Attrs: 2+ Metr: 1+ |
| Text Search | Interactive | none | html | None |
| Time Range Filter | Standard | none | canvas | Time: 1 Metr: 1 |
| Time Range Picker | Interactive | none | html/css | Time: 1 |
| Time Slider | Interactive | none | html/css | Time: 1 |
| Tree | Standard | none | canvas | Rows: 1+ Metr: 1+ |
| Tree Map | Standard | .treemap() | canvas | Attrs: 1 Metr: 1+ |
| Tree Map 2D | Standard | none | canvas | Attrs: 2 Metr: 1+ |
| Trend | Standard | .trend() | canvas | Attrs: 0-1 Time: 1 Metr: 1+ |
| Vector Map | Standard | none | canvas | Attrs: 1 Metr: 1+ |
| Word Cloud | Standard | none | canvas | Attrs: 1 Metr: 1+ |