How to use the @hpcc-js/layout.FlexGrid function in @hpcc-js/layout

To help you get started, we’ve selected a few @hpcc-js/layout examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github hpcc-systems / Visualization / demos / gallery / samples / layout / FlexGrid.js View on Github external
import { Bar, Column, Step } from "@hpcc-js/chart";
import { FlexGrid } from "@hpcc-js/layout";

const columns = ["Category", "Value-1", "Value-2"];
const data = [
    ["A", 34, 21],
    ["B", 55, 34],
    ["C", 54, 90],
    ["D", 80, 153],
    ["E", 86, 92],
    ["F", 144, 233]
];

new FlexGrid()
    .widgets([
        new Bar().columns(columns).data(data),
        new Column().columns(columns).data(data),
        new Step().columns(columns).data(data)
    ])
    .target("target")
    .itemMinHeight(50)
    .itemMinWidth(111)
    .flexBasis("38%")
    .widgetsFlexGrow([1,9,1])
    .render()
    ;
github hpcc-systems / Visualization / demos / gallery / samples / chart / dataMeta / PieColumn.js View on Github external
["F", 144]
];
const pie = new Pie()
    .columns(columns)
    .data(data)
    .showSeriesPercentage(true)
    .dataMeta({sum: 1000})
    ;
const column = new Column()
    .columns(columns)
    .data(data)
    .showValue(true)
    .showValueAsPercent("series")
    .dataMeta({sum: 1000})
    ;
new FlexGrid()
    .widgets([
        pie,
        column
    ])
    .target("target")
    .render()
    ;