Configuring Charts

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Friday, September 7, 2012PrintSubscribe
Configuring Charts

Let’s create a chart that will graphically present orders broken down by quarter.

Creating the View

Start the Project Designer. In the Project Explorer, activate the Controllers tab. Right-click on Orders / Views node, and press New View.

New View context menu option for Views node of the Orders controller in the Project Explorer.

Give this view the following properties:

Property Value
Id OrdersByQuarter
Type Chart
Label Orders By Quarter

Press OK to save the view.

A chart requires at least two fields. One field will represent the values, and the other will form the x-axis of the chart that will group values by a certain criteria. A chart may have more than one field representing values.

For example, to display a chart of orders grouped by quarter, the OrderID field will represent values and OrderDate will represent the x-axis.

In the Project Explorer, expand the Orders / Fields node. Using Ctrl key, select OrderID and OrderDate fields, and drag them onto Orders / Views / OrdersByQuarter view node.

Dragging 'OrderID' and 'OrderDate' field nodes onto 'OrdersByQuarter' view node.

This will create two data fields. Double-click Orders / Views / OrdersByQuarter / OrderID data field node.

'OrderID' data field in 'OrdersByQuarter' view node of Orders controller.

Assign the following values:

Property Value
Aggregate Count
Chart Bar (Cylinder)

Press OK to save the data field. Double-click Orders / Views / OrdersByQuarter / OrderDate data field node.

'OrderDate' data field in 'OrdersByQuarter' view node of Orders controller.

Assign these values:

Property Value
Data Format String MMM yyy
Chart X, Quarter

Press OK to save.

Viewing the Results

On the Project Designer toolbar, press Browse.

Navigate to the Order Manager page. Select a customer from the first data view. Use the View Selector in the top right corner of Orders data view to switch to Orders By Quarter view.

Using the View Selector to change the view to 'Orders By Date'.

The chart will be displayed, showing the number of orders in each quarter filtered by the selected customer.

Orders By Date chart displayed in the Orders data view.

If you select another customer, the orders will change to reflect the new selection.

Selecting a different customer will change the filtering options for the chart.