Tutorial 2: Pie Chart

Tutorial 2: A simple "2D" Chart.

Similar to the Hello World tutorial, but now we introduce some data:

1 - Import the required visualization:

import { Pie } from "@hpcc-js/chart";

2 - Instantiate and render the visualisation:

var widget = new Pie()              //  Create new instance of Pie
    .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
    ;

Think of the above pattern as a "spreadsheet" of data, with the "columns" being row 0 and the "data" being the rest of the spreadsheet.

Note 1: The reason for two distinct methods "columns" + "data", is to faciliate the initial render of a chart (with known columns), while the data payload could arrive at any later time (think dynamic dashboard). Note 2: To discover all the available "published properties" for the Pie Widget see: Dermatology-Pie and enable the "Properties" view.