Pie chart

About 5 min read

TwPieChart · Category: Charts

Settings

These settings are in the properties panel on the right while the widget is selected. The default value is the value the widget has when it is first added to a page.

Pie

Setting	Type	Default	Description
Series seriesConfigJson	Series configuration	[ { "id": "pie-series-1", "name": "Series 1", "tagName": "", "logInfoId": 0, "logIntervalMs": null, "unit": "", "color": "", "enabled": true } ]	Define the series shown on the chart. Each series can have its own tag, log variable, axis and appearance settings.
Slice Mode pieSliceMode	Selection	series	Totals by Series makes one slice per series from the sum of its values in the range; Totals by Time Bucket makes one slice per time bucket with all series added together. Options: series Totals by Series, timeBucket Totals by Time Bucket
History Range Minutes timeRangeMinutes	Number	60	Length of the rolling time range in Relative range mode, in minutes (default 60). Not used in Calendar range mode.
Range Mode rangeMode	Selection	relative	Relative loads the last Time Range Minutes up to now (rolling window, default). Calendar loads a calendar period (Calendar Period, Calendar Offset) in the browser time zone, e.g. this year from 1 January; the current period ends now and moves to the new month or year by itself on refresh and in live mode. The calendar menu of the toolbar switches the range at runtime without saving it. Options: relative Relative, calendar Calendar
Maximum Point Count maxPoints	Number	50	Sets the automatic sample time: the time range is split into about this many samples (at least 2, default 50).
Live Refresh Interval ms refreshIntervalMs	Number	0	Reloads the data at this interval in milliseconds, at least 1000; 0 turns automatic refresh off.
Render Type renderType	Selection	canvas	Canvas is faster with many points; SVG stays sharp when zoomed or printed. Options: canvas, svg
Title Position titlePosition	Selection	top	Places the widget title above or below the chart. Options: top Top, bottom Bottom
Title Gap (px) titleGap	Number	8	Space between the title and the chart in pixels, at most 80.
Range Presets rangePresetsJson	Multi-line text	[ { "label": "1h", "minutes": 60, "enabled": true }, { "label": "6h", "minutes": 360, "enabled": true }, { "label": "24h", "minutes": 1440, "enabled": true } ]	Quick range buttons of the toolbar as a JSON list; each item has label, minutes and enabled. Empty uses 1h, 6h and 24h.
Data Source dataSourceMode	Selection	historySample	History Sample shows sampled history values; Consumption Diff Sum shows the consumption (difference) of counter tags per time bucket. Options: historySample History Sample, consumptionDiffSum Consumption Diff Sum
Time Bucket pieTimeBucketUnit	Selection	auto	Bucket length for Totals by Time Bucket; in Consumption Diff Sum mode it also sets the sample time. Auto picks hour to year from the range length. Options: hour Hourly, day Daily, week Weekly, month Monthly, quarter Quarterly, year Yearly, auto Auto
Calendar Period calendarPeriod	Selection	year	Period in Calendar range mode: day, week (from Monday), month, quarter or year (default year). Options: day Day, week Week, month Month, quarter Quarter, year Year
Navigation Step Minutes historyStepMinutes	Number	60	How far the back and forward toolbar buttons move the time range, in minutes (default 60). In Calendar range mode they move one calendar period.
Sample By (sec, 0=Auto) sampleBySeconds	Number	0	Length of one sample interval in seconds. 0 calculates it from the time range and the maximum point count (or the time bucket).
Title Align titleAlign	Selection	center	Horizontal alignment of the title. Options: left Left, center Center, right Right
Sample Value Type sampleValueType	Selection	2	How the values in each sample interval are combined: minimum, maximum, average, sum or count. Options: 0 Minimum, 1 Maximum, 2 Average, 3 Sum, 4 Count
Calendar Offset calendarOffset	Number	0	Which period in Calendar range mode: 0 is the current period, -1 the previous one (e.g. last month or last year), -2 the one before; positive values count as 0.

Appearance

Setting	Type	Default	Description
Show Legend showLegend	Checkbox	On	Shows the legend with the slice names.
Show Toolbar showToolbar	Checkbox	On	Shows the toolbar with the range presets, navigation and refresh buttons.
Show Labels showLabels	Checkbox	On	Writes the name and percentage next to each slice.
Show Tooltip showTooltip	Checkbox	On	Shows the name and value of a slice when the pointer rests on it.
Show Settings Button showSettingsButton	Checkbox	On	Shows the settings button in the toolbar; users can change chart settings at runtime, and the changes are not saved to the page.
Inner Radius (%) innerRadiusPercent	Number	0	Size of the hole in the middle, 0–85%; 0 draws a full pie, larger values a donut.

Other settings

Setting	Type	Default	Description
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, seriesConfigJson, maxPoints, timeRangeMinutes, rangeMode, calendarPeriod, calendarOffset, historyStepMinutes, dataSourceMode, pieSliceMode, pieTimeBucketUnit, sampleValueType, sampleBySeconds, rangePresetsJson, refreshIntervalMs, showLegend, showTooltip, showLabels, showToolbar, showSettingsButton, innerRadiusPercent, titlePosition, titleAlign, titleGap, renderType

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Bindings (Rules). These sections are described on the Page Editor page.