Trends and signals
Control Chart <smart-control-chart>
ControlChart is a Shewhart control chart for statistical process control.
<smart-control-chart> · 17 properties, 6 methods, 1 events · source/modules/smart.controlchart.js
Usage in JavaScript
The component is a custom element: its properties are set on the element, its events are DOM CustomEvents with the data in event.detail, and its methods are called on the element. The properties can also be written as attributes in kebab case (precision-digits="1").
const controlChart = document.querySelector('smart-control-chart');
controlChart.type = 'xbar-r';
controlChart.addEventListener('violation', (event) => console.log(event.detail));
controlChart.chart();
Properties
| Property | Type, default | Description |
|---|---|---|
type | 'xbar-r' | 'xbar-s' | 'i-mr' | 'p' | 'np' | 'c' | 'u' | Sets or retrieves which chart is drawn. The shape of data follows from it: an array of subgroups (arrays of readings) for xbar-r and xbar-s, an array of individual readings for i-mr, and an array of counts for the attribute charts, defectives per sample for p and np, defects per unit for c and u.xbar-r xbar-s i-mr p np c u |
data | array | Sets or retrieves the measurements, in the format expected by type. Assign a new array to update the component; an array modified in place is deep-equal to the current one and does not trigger a redraw. A missing reading (null, an empty string) and, on an X-bar chart, a subgroup with fewer than two readings are left off the chart; the sample numbers on the axis and in the violation list stay those of data. |
sampleSize | number | null | Sets or retrieves the sample size for the p, np and u charts, as one number or as an array with one entry per sample when the size varies. With unequal sample sizes the limits of a p chart differ from sample to sample and are drawn as steps. |
baselineCount | number | Sets or retrieves the number of initial points used to establish the control limits. 0 uses every point. In practice, limits are established from a baseline phase and then held, because a chart that recomputes its limits on every new point cannot signal a shift. |
limits | object | Sets or retrieves held limits for the primary chart as { center, ucl, lcl, sigma }, which replace the computed limits. Set by freezeLimits, or by an application that established limits in a qualification run and monitors against them. The secondary chart keeps its computed limits. |
ruleSet | string | null | Sets or retrieves the run rules to test: nelson (eight rules), westernElectric (four rules), both, none, or an array of rule names as listed by Smart.Industrial.spc.ruleNames. Rules are identified by name because the numbering differs between sources. On an attribute chart with unequal samples there is no single sigma, so only the limit test is applied, point by point against the limits of that point. |
showSecondary | boolean | Determines whether the matching R, S or moving range chart is drawn below the primary chart. Its own points beyond its own limits count as violations too: variation out of control is as much a signal as a shifted mean. |
showZones | boolean | Determines whether the one, two and three sigma zones on either side of the centre line are shaded, so that the zone of a point can be read from the chart. |
specLimits | object | Sets or retrieves the specification limits as { lsl, usl, target }. They are drawn on the primary chart in their own line style, labelled USL and LSL, and used for the capability readout. They are not used for the control limits or the run rules: control limits describe what the process does, and specification limits describe what the customer requires. |
showCapability | boolean | Determines whether Cp, Cpk, Pp, Ppk and the expected defect rate are shown under the chart. Requires specLimits and a variables chart; capability indices are not defined for attribute charts and are not shown for them. |
showStats | boolean | Determines whether the header, chart type, centre line, limits, subgroup size, baseline or held state, and the in-control status, is shown. |
showViolations | boolean | Determines whether the points that violate a rule are listed as text under the chart, each with the rules it violates. The list is what a screen reader and a report receive; the marks on the canvas show the same information graphically. |
label | string | Sets or retrieves the name of the characteristic being charted, shown in the header and in the accessible name. |
unit | string | Sets or retrieves the engineering unit, shown beside the centre line value. |
precisionDigits | number | Sets or retrieves how many decimal places the limits, ticks and annotations are printed with. |
markerSize | number | Sets or retrieves the radius of a point marker in pixels. An offending point is drawn larger, in the limit colour, with a ring. |
lineWidth | number | Sets or retrieves the width of the trace in pixels. |
Methods
| Method | Description |
|---|---|
chart() | Returns the computed primary chart as { type, points, center, ucl, lcl, sigma, n, secondary, held }, as returned by Smart.Industrial.spc, with held limits applied. ucl and lcl are arrays when the sample size varies. |
violations() | Returns which points on the primary chart break which rules, as [{ index, point, rules }]: index is the position in data of the sample or subgroup that broke the rule, point its position on the chart. They differ when the chart leaves a missing reading or an incomplete subgroup out. A point that breaks nothing is not in the list. |
secondaryViolations() | Returns the points on the secondary chart, the range, standard deviation or moving range, that lie beyond its own limits, as [{ index, point, rules }]. index is the position in data; a moving range belongs to the later of its two readings. |
capability() | Returns the process capability against the specification limits as { n, mean, sigmaWithin, sigmaOverall, cp, cpk, pp, ppk, ppm }, or null without specification limits or for an attribute chart. Sigma within is the estimate the chart is built on: S-bar / c4 for xbar-s, R-bar / d2 for xbar-r and the average moving range / d2 for i-mr. |
freezeLimits() | Holds the limits currently shown by the chart, so that data arriving after this point is judged against them instead of changing them. Sets the limits property and returns it. |
invalidate() | Redraws the plots on the next animation frame, so that many changes between two frames cost one draw. |
Events
The data of an event is in event.detail. violation reports a change in the set of points that break the selected rules, computed from data. A redraw alone raises nothing.
| Event | Description and detail |
|---|---|
violation | This event is triggered when the set of offending points changes, after new data, new limits or a different rule set, and not on every redraw. It fires with a count of zero when the chart returns to control.violations any[] The offending points as [{ index, point, rules, chart }], where index is the position in data, point the position on the chart, and chart is 'secondary' for a point on the range, S or moving range chart.count number How many points are out of control. |
Types
type ControlChartType
'xbar-r' | 'xbar-s' | 'i-mr' | 'p' | 'np' | 'c' | 'u'
CSS variables
The component declares 9 CSS variables; the CSS page shows how to set them.
--smart-control-chart-height --smart-control-chart-secondary-share --smart-control-chart-plot-background --smart-control-chart-grid-color --smart-control-chart-center-color --smart-control-chart-limit-color --smart-control-chart-spec-color --smart-control-chart-zone-color --smart-control-chart-zone-alternate-color