Sunday, March 18, 2012

Configuring a Chart in Web Site Factory Project

Charts are great at telling a story when numbers fail to impress. Ad hoc charts can be created by end users of your web application. You can also incorporate a chart that requires no effort on the user part.

Activate the Project Designer and choose Controllers tab. Add a new view to the Orders data controller.

Adding a new view to 'Orders' data controller

Enter the following properties in the view properties.

Property Value
Id chart1
Type Chart
Command command1
Label Sales Chart
Header Text Sales of orders by quarter

Click OK button to save the new view.

Right-click the new view chart1 and choose New Data Field option.
'New Data Field' option in the context menu of the data controller view

Set Field Name property of the new data field to OrderID and click OK button to save the new field.

Repeat this procedure one more time and add OrderDate data field to the view.

Right-click the node Orders / Views / chart1 and choose Show All Data Fields option.

'Show All Data Fields' option in the context menu of the data controller view

Note that the right-most column Chart shows the value of None for both fields.

Data fields of a chart view in Project Designer

Change the properties of both data fields as follows.

Data Field Property Value
OrderID Chart Bar (Cylinder)
OrderID Σ (Aggregate) Count
OrderDate Chart X, Quarters
OrderDate Format MMM yy

These property values will result in chart presenting a breakdown of order count by order date quarters.

Chart view data fields configured to display a total count of orders broken down by order date quarters

Click Browse button on the designer toolbar to the open the application in your default web browser.

Navigate to Orders page and select Sales Chart option form the view selector.

View selector displayed in a web application created with Code On Time

The chart view will be displayed in the main area of the data view on the page.

Chart view in a master data view of a Code On Time web application

Navigate to the Customers page, select  a customer, and choose Sales Chart option in the view selector of the child view on the tab Orders. The chart view of orders linked to the selected customer will be rendered.

Chart view in a child data view of a Code On Time web application

Let’s say you want to have this chart view on the application home page.

Activate Pages tab on the Project Explorer and select the node Home / container2. Right-click the node and choose New Data View option from the context menu.

'New Data View' option in the context menu of a container in Project Explorer

Set Controller property to Orders, set View property to chart1.

Select the Show Pager option. Unselect all other check boxes under Presentation.

Click OK to save the new data view.

Click Browse button on the designer tool bar. The application home page will load with the chart displayed at the bottom of the second container.

Chart data view displayed on the home page of an application created with Code On Time


Anonymous said...

How can I display all data field in X(not main area of data)?

Customer Service said...

Set the type of chart to "Custom". Generate the app. Open the chart user control in Visual Studio and customize it the way you like.

You can find more about Code OnTime Generator, Data Aquarium Framework, and other great products here.

© 2010 Code OnTime LLC. Intelligent code generation software for ASP.NET. Visit us at