Charts

One component draws every chart DomUI can draw: PlotlyGraph, a wrapper around the Plotly javascript library. What kind of chart it is - a line, a bar chart, a pie, a sunburst, a gauge - is decided by the traces in the dataset it is given, not by the component.

• The three pieces
• The data comes in a second request
• Which chart to reach for

The three pieces

PlotlyGraph.initialize(this);                    // Once per page

PlotlyGraph graph = new PlotlyGraph();
graph.setSource(dc -> {
    PlotlyDataSet ds = new PlotlyDataSet();
    PlTimeSeriesTrace sales = ds.addTimeSeries("Sales");
    // ...fill it from the database...
    ds.title("Sales over time");
    return ds;
});
cp.add(graph);

The data comes in a second request

This is the thing to understand about the component. The page does not carry the chart's data. The graph renders as an empty box, the browser then asks the server for the dataset, and the IPlotlyDataSource is called then - in a request of its own, with the page it belongs to no longer active:

Two consequences, and both matter:

• the datasource is handed a QDataContext of its own and must use it. It cannot use the page's shared context, and it must not touch the page's components or fields - it is not running inside the page;
• a slow query does not make the page slow to appear. The screen is there, with an empty box where the chart will be.

Which chart to reach for

More than one trace in a dataset means more than one series on the same chart - two lines, or a stacked bar chart when the dataset's barMode says so.