User Interface

Suppose that a chart is made for the Orders page in the sample Northwind app. This chart will show the count of orders made by each customer, sorted in descending order. The tag configuration is listed below.

The result of the tag can be seen in the screenshot.

The data for the chart can be seen below.

With such a large number of rows, it becomes difficult to read the row values. In order to fix this problem, restrict the number of rows by using the “topX” keyword, with the X value being equal to the max number of rows displayed.

The new chart now displays the column for only 5 customers.

The data reveals that only 5 rows are present.

However, it may be desirable to group the rest of the values into a single “Other” column, in order to show the relative size of the top 5 compared to the rest of the data. This can be done with the “other” keyword in combination with “topX” keyword.

The chart showing the “Other” column is displayed below.

The data reveals the sixth row combines the values of the hidden rows.

If a chart does not have a value field specified, the chart will take a count of records that fall into the row and column group. For example, if the EmployeeID data field in the Orders controller is specified as a row field, then the count of Orders will be used as the value.

The chart data shows that the count of Orders is used as the value.

In order to use a different value for the chart, a value field must be specified. Tag the data field that you wish to use with the correct pivot ID and assign it “val” plus the order for the data field. The example below will use Freight field as a value.

Notice that the values are the same! That is because the value mode of Freight is the default “count”. You must specify a value mode to manipulate the number. The example below will use the sum of Freight by using the keyword “sum”.

The correct sum can be seen in the chart and data.

The table below shows a list of the available value modes.