Touch UI / Charts

  Specifying Default Size

Table of Contents
Touch UI / ChartsPrint||
Specifying Default Size

Charts presentation style will display as many reasonably-sized charts as possible on each device size. By default, each chart is of size “small”, which means that the chart will use 1/3 of the available space in each dimension on large screens.

The default charts for Orders page will attempt to show three charts in each dimension on large screens.

On medium-sized devices, the charts will use 1/2 of the available space.

Small charts on medium-size devices will show two in each dimension.

The smallest devices will display only one chart at a time.

Small devices only show one chart at at time.

The user is able to change the size of the charts using the context menu in the top right corner of each chart. “Large” is only available on large devices, and “Medium” is only available on moderately sized devices and tablets.

The user is able to change the size of the charts using the context menu in the top right corner of each chart.

The developer is also capable of specifying the default size for each chart by adding the keywords “medium” or “large”. Suppose that the Orders controller has manually specified charts matching those that have been automatically created. The highlighted tags below will specify the default sizes for those charts.

Data Field Tag
CustomerID pivot1-col1-sortdescbyvalue-columnstacked-top5 pivot1-medium pivot4-row1-top10-other-sortdescbyvalue-pie3d pivot4-large
EmployeeID pivot2-col1-sortdescbyvalue-area-top7 pivot5-row1-top10-other-sortdescbyvalue-column
OrderDate pivot1-row1-date-all pivot6-row1-line-date-all
RequiredDate pivot2-row1-date-all pivot7-row1-column-date-all
ShippedDate pivot3-row1-date-all pivot8-row1-area-date-all
ShipVia pivot3-col1-sortdescbyvalue-column-top5 pivot9-row1-top10-other-sortdescbyvalue-donut

Upon regenerating the app and refreshing the page, notice that the default sizes have been applied. The first chart is of “medium” size and now takes 2/3s of the screen on large devices.

The first chart has size of "medium" and takes 2/3s of the screen.

The “large” fourth chart takes the whole screen.

The fourth chart is "large" and takes the full screen