Tutorial 6: HPCC Platform Roxie Data + Column Chart

Fetching data from a HPCC Platform Roxie Query and rendering it in a Visualization:

1 - Create an empty Column chart and render it:

var columnChart = new Column()
    .target("placeholder")
    .columns(["Location", "male"])
    .yAxisTitle("male")
    .render()
    ;

2 - Attach to an existing Query:

var query = Query.attach({ baseUrl: "https://play.hpccsystems.com:18002" }, "roxie", "ie_pop");

3 - Submit a request to the Roxie service (returns a Promise):

query.submit({
    pop_type: popType  //  male, female, total
}).then(response => {
    ...
});

4 - Map the rows to a data array:

var data = response.ie_population.map(function (row) { return [row.location, row.total]; });

5 - Update the Column chart with the mapped data:

columnChart
    .columns(["Location", popType])
    .yAxisTitle(popType)
    .data(data)
    .render()
    ;