Skip to content
Epiglossary

Charts in dashboards

Kinetic

Application Studio has no general-purpose chart component for dashboard grids. Two workarounds are in use. One builds a chart image URL on the server and shows it in a Website widget. The other uses Epicor Data Discovery’s chart widget, where your release still has it.

Option 1: a chart image from an Epicor Function

Section titled “Option 1: a chart image from an Epicor Function”

An Epicor Function takes the grid’s rows, totals them, and returns the URL of a chart image from a chart-rendering web service. A Website widget on the dashboard displays that URL.

1. Data views

Section titled “1. Data views”

Create two views with no server schema:

  • XX_Chart, with a column URL, which the Website widget will display
  • XX_ChartOptions, for the user’s choices, such as ChartType

Data View designer for a chart view with Server Schema ERP, no BAQ and no columns

2. Layout

Section titled “2. Layout”

  1. Add a panel card with a column in it, then drag the Website widget from Toolbox > Widgets into the column. Set its URL to {XX_Chart.URL}.

    A Chart panel card holding a Website widget whose URL property is bound to the chart view URL column, with a Populate Chart button in the card header

  2. Add a combo box bound to XX_ChartOptions.ChartType with a static display/value list (see Combo boxes), e.g. display Pie / value p, display Vertical bar / value bvs. The values are the chart service’s chart-type codes.

    The combo box List editor with Vertical Bar, Pie, Line without Axes and Horizontal Bar entries, Vertical Bar storing the value bvs

  3. Add a button to draw the chart.

3. The function

Section titled “3. The function”

Create a function in a library, e.g. XX_Charts.CountBy, with inputs InDS (DataSet), InTable (string), LabelCol (string), ChartType (string) and output OutURL (string):

// Count the rows per distinct value of LabelCol and build a chart image URL.
var counts = new Dictionary<string, int>();


foreach (DataRow r in InDS.Tables[InTable].Rows)
{
    var key = Convert.ToString(r[LabelCol]);
    counts[key] = counts.TryGetValue(key, out var n) ? n + 1 : 1;
}


OutURL = "https://image-charts.com/chart"
    + "?cht=" + Uri.EscapeDataString(ChartType)
    + "&chs=700x400"
    + "&chd=a:" + string.Join(",", counts.Values)
    + "&chl=" + string.Join("|", counts.Keys.Select(Uri.EscapeDataString));

cht is the chart type, chs the size, chd the data series and chl the labels. The chart service’s documentation (linked below) lists many more options: axes, legends, colors. Some chart types label their axes with different parameters than a pie chart does.

4. The event

Section titled “4. The event”

Create an event on the button’s On Click with:

Button click event: a Control On Click trigger followed by rest-erp and row-update

  1. rest-erp:

    • Service Name empty, Service Operation CountBy
    • Call Options > ERP Functions Library XX_Charts
    • Method Parameters: InTable = Rows, LabelCol = the BAQ column to group by (e.g. Customer_State), ChartType = {XX_ChartOptions.ChartType}
    • ERP Rest Arguments > Request Parameters: Parameter Path InDS, Parameter Name Rows (same as InTable), View Name the view your grid is bound to, and under Dataset the same view as Dataset Id

    rest-erp Call Options with the function library name in ERP Functions Library

  2. row-update setting XX_Chart.URL to "{actionResult.OutURL}".

    row-update Columns entry with Ep Binding set to the chart view URL column

Click the button in preview and the chart appears in the Website widget.

Dashboard in preview with a Customers By State grid, a Chart Type combo, a Populate Chart button and the rendered pie chart in the Website widget

To redraw automatically instead of on a button, trigger the event from DataView > Row Changed or DataTable > Column Changed on the relevant view, though some triggers on views filled by grids have proved unreliable for this.

Option 2: Data Discovery chart widget

Section titled “Option 2: Data Discovery chart widget”

If you have Epicor Data Discovery (EDD), its chart widget can be placed on a dashboard directly.

  1. Build an exploration view in Data Discovery.

    A Data Discovery exploration showing Customers by State as a pie chart, with a Sales Rep filter panel

  2. On the dashboard, add a panel card, a column, and the Data Discovery Chart widget.

    Toolbox Widgets tab listing Data Discovery Card, Data Discovery Chart and Website widget, with the chart dropped into a panel card column

  3. Open the widget’s Pub Sub Setup and add a filter:

    • Subscriber: the column in the exploration’s data to filter on
    • Publisher: the screen field that supplies the value

    Data Discovery Chart widget properties with the Guided Setup and Pub Sub Setup buttons

    Subscriber Setup panel with one row: Subscriber Sales Rep, Condition equals, Publisher CallContextBpmData.Character01

  4. To filter from an input field, bind the field to a scratch view, then add an event on DataTable > Column Changed for that column with a row-update that copies the value into the publisher field.

    Event with trigger Type DataTable, Hook Column Changed on the filter field column, followed by a row-update

A publisher bound to a grid’s view publishes the selected row’s value, so there’s no way to get back to “all”. Publishing from a separate field (for example a CallContextBpmData column you set with row-update) avoids that.

Dashboard in preview with a Sales Rep Code filter, a customer grid and the Data Discovery pie chart of customers by state

Sources

This page is written in our own words. It was informed by: