Tutorial 3: Switch from Pie to Column.
So Pie Charts are so last year, lets switch it up to a Column Chart:
1 - Import the required visualization:
import { Column } from "@hpcc-js/chart";
2 - Instantiate and render the visualisation:
var widget = new Column() // Create new instance of Column
.target("placeholder") // Nominate target on web page
.columns(["Subject", "Result"]) // Set "Columns"
.data([ // Set "Data"
["English", 45],
["Irish", 28],
["Math", 98],
["Geography", 48],
["Science", 82]
])
.render() // Render
;
Note 1: The only difference between this example and the previous one is the change from "Pie" to "Column" this demonstrates one of the key features of the @hpcc-js visualization framework - the ability to switch easily between visualisations for a single data "shape".
Note 2: To discover all the available "published properties" for the Column
Widget see: Dermatology-Column and enable the "Properties" view.
https://unpkg.com/getlibs