All examples By author By category About

GordonSmith
Full window Github gist

Tutorial 4: Multi Chart

Tutorial 4: Multi Chart.

Building on the Pie Chart and Column Chart tutorials, lets step it up some more and let the user decide which chart to use.

1 - Import the entire chart package:

import * as hpccChart from "@hpcc-js/chart";

2 - Instantiate and render the visualisation base on a variable chartName:

new hpccChart[chartName]()          //  Create new instance of Widget
    .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
    ;