Tutorial 3: Column Chart

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.