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
Charts
Saturday, January 24, 2015PrintSubscribe
Charts Everywhere

Every IT project involves collection of data. Development teams put a lot of thought into database design, middleware programming, business rules. Analysis of data is always somewhere a few milestones away on the project timeline. Sure the charts can make your app look good, but one needs data to feed the charts. Therefore the data analysis and charts will only become a feature of a project if it survives the initial developments stages.

Users Love Charts

Why do users love charts? The charts can tell the story that the raw data cannot.

For example, a typical list of orders hides a treasure trove of information that can be unlocked if data is pivoted, sorted, counted, and summed.  Consider the collection of charts in the screenshot below.

Charts view style in a Touch UI app created with Code On Time app generator.

These charts are derived from the orders stored in the Northwind database. The master-detail form with order data is shown next.

Master-detail form view in a Touch UI app created with Code On Time app generator.

Data fields Order Date, Employee Last Name, Ship Via Company Name, and Ship Country can truly illuminate the business processes within the Northwind mail order company.

For example, we can answer the following questions:

  • Which countries are the main contributors to the sales?
  • Which employee is the most productive?
  • How much are shippers utilized to fulfill orders?
  • Are sales getting better over time?
  • Which employee is contributing the most to the expense of fulfilling orders?
  • How do sales compare year over year?
  • Which month can be expected to be the busiest?

The charts in the screenshot answer the questions.

Charts in the app with Touch UI created with Code On Time.

Charts Are Created Automatically

Application framework has a built-in ability to recognize what data can be analyzed. “Lookup” and “date” fields are tagged to produce various charts without any need for programming.

If the compatible fields are detected than the “Charts” view style becomes available to end users. Charts are literally everywhere!

Sample chart displayed in the user interface of an app with Touch UI.

Developers can tag the fields for charting by default.  A typical “chart” tag in a data controller XML file will cause the chart above to become available when “Charts” view style is activated.

<dataField fieldName="ShipVia" aliasFieldName="ShipViaCompanyName" 
tag="pivot1-row-pie3d"/>

The server-side code of application will pivot the data and package it in the fashion suitable for chart presentation. Application produces multiple pivots while reading the same set of records from the database.  A single request to the server will retrieve all pivots for the charts displayed when “Charts” view style is activated.

The built-in ability to pivot data can be utilized to create custom charts and data presenters.

Responsive Presentation of Charts

Charts are responsive. Users will be able to interact with charts on any device. The small form factor will cause a simple list of charts to be displayed. The height of the charts is computed based on the available width and the height of the display.

Responsive charts are displayed in a window with small form factor in a Touch UI app.

Application will try to fit as many charts as possible on screen without requiring user to scroll horizontally to see the entire set of charts.

Wide displays will allow Touch UI to render multiple charts without the need for scrolling.

Activating “Charts” View Style

The option to activate “Charts” view style is visible on the sidebar as shown in the illustration above. The sidebar may not be visible on all screen sizes.

Context menu provides “Charts” option in the list of data presentation styles. A single touch or click will show the available charts.

Context menu includes an option to activate Charts view style in an app with Touch UI.   Charts view style in an app with Touch UI created with Code On Time app generator.

Shaping The data In The Charts

Users shape the data set rendered in the “Charts” style with the help of Quick Find, Adaptive Filters, and Advanced Search.

For example, a user can specify a criteria for “deep search” that requires data to match the ship country to France and Italy and have associated line items with products in categories that include “Confections” and “Seafood”.

Advanced Search screen in an app with Touch UI.

Here is the result set rendered in the “List” style. User can access “Charts” view style by touching or clicking the context menu button on the right side of the toolbar.

Activating context menu in a Touch UI application.

Here is the set of charts reflecting the “deep search” criteria that required searching in orders and related order details.

Charts view style shows data produced by deep search of orders and linked order details in Touch UI application.

This screenshot shows charts for orders shipped to Canada, USA, and UK and placed by employees Buchanan and Fuller.

Compact set of charts rendered in Charts view style in an app with Touch UI.

User may activate responsive grid view style to see the data behind the charts.

Responsive grid view style in a Touch UI app created with Code On Time.

Wider window will show charts distributed in three columns.

Responsive Charts view style displayed three charts side-by-side in an app with Touch UI.

Friday, June 28, 2013PrintSubscribe
“Data-” Attributes, Chart, and Import Processor Enhancements

Code On Time release 7.0.10.0 includes the following features and enhancements:

  • Legacy attributes with the namespace "factory:*" previously used in the page markup were replaced with "data-" attributes to ensure compatibility with the upcoming Mobile Client Library, Cloud On Time, and SaaS Integration feature in Unlimited edition.
     
  • Chart views will retain the height after the first rendering.
     
  • Chart views will render with the correct width and height in FireFox.
     
  • Import processor allows overriding error reporting and handling.
     
  • Fixed the issue with the Login page title not being assigned correctly.
     
  • Fixed closed "placeholder" spans in Main.master.
     
  • Fixed the bug in lookups with the style “Auto Complete” that was freezing actions in data views.

Mobile Client Library and 2nd Generation Datasheet View are planned for the next release.

Mobile feature will be based on the latest jQuery Mobile 1.3.

Next release is also expected to include SaaS Integration  feature to enable integration of Web Site Factory, Web App Factory, and Azure Factory apps with any hosting platforms without the need to create native apps. This will dramatically increase ability to create a “cloud” solution from any existing web app created with Code On Time.

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.