Code On Time: Application Builder

Sunday, March 8, 2015Print Subscribe

When using a date as a row in a chart, it is necessary to form groups for each date value. Otherwise, a row will be created for each date. This excess of rows will render the chart useless:

Data Field	Tag
OrderDate	pivot1-row1-line

The data behind the chart looks like the following:

Instead of listing each date as a unique value, the dates should be placed into buckets in order to provide a clearer view of the data. For example, let’s group the dates by quarter. Add the “quarter” keyword to calculate the quarter of each date.

Data Field	Tag
OrderDate	pivot1-row1-line-quarter

The chart is now easier to read.

The data for the chart looks as follows:

However, notice that we have lost information about the year. To solve this problem, we need to group the dates by year first, and then by quarter.

Data Field	Tag
OrderDate	pivot1-row1-line-year pivot1-row2-quarter

The chart now displays quarters per year.

The data is shown here:

However, what happens when the data is filtered to produce a different subset of data? The chart may become useless again.

The single row is displayed below.

In order to solve this problem, an automatic grouping function can be used. By specifying a group of “date”, the server will make several attempts with various groups. The chart with a number of rows closest to 25 will be selected and displayed to the user.

Data Field	Tag
OrderDate	pivot1-row1-line-date

The function has decided to use year/month/week as the most optimal solution for the currently applied filter.

The data can be seen below.

When the filter is cleared and all data from the Orders table is displayed, the group mode will try to maintain the number of rows. The function has elected on using year/month.

The new data can be seen here:

A full list of available groups is displayed below.

Keyword	Description	Example Value
date	An automatic function that will attempt several combinations of groups and select the result that has a number of rows closest to 25.
timeofday	Takes the hours, minutes, and second of the date.	12:30:45
minute	Takes the minute from the date.	30
halfhour	All dates with minutes less than 30 will be grouped into the hour group. All dates above 30 will be grouped into the half-hour group.	1:30
hour	The hour will be used as the value.	1:00
day	Uses the day of the month.	31
dayofweek	Uses the day of the week. The value will be formatted according to the current culture.	Saturday
dayofyear	The day of the year.	156
weekofmonth	The week of the month. The value is derived from the first letter of the word “Week” in the current culture’s language, plus the number.	W3
week	The week of the year.	W16
month	The month of the year. The values will be formatted according to the current culture.	January
quarter	The quarter in the year. The value is derived from the first letter of the word “Quarter” in the current culture’s language, plus the number.	Q1
year	The year.	2015

Labels: Application Builder, Charts, Touch UI, Tutorials, Web Application Generator

Sunday, March 8, 2015Print Subscribe

Map Chart Type

The “map” chart type displays a map using the Google Maps API. It accepts values in the form of addresses and renders them as pins on the map. This chart type can be useful for displaying values associated with regions or locations. However, it may be more beneficial to use Maps presentation style to allow for data interaction or Geo Chart Type instead.

The map below shows the location of customers by country.

Data Field	Tag
Country	pivot1-row1-map

The data for the map is displayed below.

Clicking on a data point will reveal the value.

The type of map can be specified with the “maptype” property. The default value is “hybrid”. The other options are “normal”, “terrain”, or “satellite”. The example below shows the “terrain” map type.

Data Field	Tag
Country	pivot1-row1-map pivot1-maptype:"terrain"

The switcher for map type is disabled by default. The switcher can be enabled by adding the “usemaptypecontrol” keyword. It will appear in the top-right corner.

Data Field	Tag
Country	pivot1-row1-map pivot1-usemaptypecontrol

By default, the user cannot use the scroll wheel to zoom. This functionality can be enabled by adding the “enablescrollwheel” keyword.

Data Field	Tag
Country	pivot1-row1-map pivot1-enablescrollwheel

Labels: Application Builder, ASP.NET, Charts, Touch UI, User Interface, Web Application Generator

Saturday, March 7, 2015Print Subscribe

Pie Chart Type

The “pie” chart type is rendered as a circle. Each data point is displayed as a slice out of the circle. This chart type is useful to show the size of values relative to one another. One example may be the number of orders made by each employee – the largest slice of the pie is taken by the employee who made the most orders.

To use “column” chart type, add the keyword “column” to any “pivot-” tag, and make sure that it is separated with hyphens (-).

Data Field	Tag
EmployeeID	pivot1-row1-pie

The data for the chart can be seen below.

If the slice is large enough, the percentage value is displayed. Hovering over or clicking on a slice will reveal the data.

If there are too many slices, the chart may become unreadable to the users. Use “topX”, sort the row values, and enable “Other” row to ensure that only the largest X number of slices are displayed, and the rest are collapsed.

Data Field	Tag
EmployeeID	pivot1-row1-pie-top5-other-sortbyvalue

The sorted top five rows and “Other” row can be seen in the data below.

The pie can also be rendered as a 3D pie by using the “pie3d” chart type instead.

Data Field	Tag
EmployeeID	pivot1-row1-pie3d

The chart can also be rendered with a hole in the center by specifying the “donut” chart type.

Data Field	Tag
EmployeeID	pivot1-row1-donut

Labels: Application Builder, ASP.NET, Charts, Features, Touch UI, Tutorials, Web Application Generator