JavaScript Chart Empty Points

In this blog entry, we look at the ShieldUI empty point feature. 

The Shield UI charting component has full support for empty, or null points. Null points are commonly declared in the underlying datasource as follows:

1 2 3 4 5 6 7

dataSeries: [      {          collectionAlias: "Weekly Report",          seriesType: 'area',          data: [233, 123, 345, 34, null, 56, 23]      } ]

One can choose how this null value from the underlying datasource is interpreted. The value can either be skipped, resulting in a gap in the graph. Or, the two adjacent points can be joined together, creating the visual effect as though there is a valid data entry. This is handled by enabling the drawNullValues property.

JavaScript Chart Types

At this blog entry, we look at the chart types available in the ShieldUI Charting component.
Some of these types are shown below:



The Chart component supports the following fully customizable types of series:

• area
• bar
• donut
• line
• pie
• polararea
• polarbar
• polarline
• polarscatter
• polarspline
• polarsplinearea
• rangearea
• rangebar
• rangesplinearea
• scatter
• spline
• splinearea
• steparea
• stepline
• sparkline

The type of series is determined through the seriesType setting.

The bar series type can be a standard vertical bar, or an inverted one. The inverted layout is achieved by inverting the chart itself, as demonstrated in the code snippet below:

1 2 3

{     isInverted: true }

Additional customization opitons per series type are available here.

JavaScript Chart Axis

In this blog entry we look at the ShieldUI Cart X Axis options and settings.
AxisX is the horizontal x axis, which hosts the categories or data entries found in the datasource of the control. The possible types of x axis can be found here.
The X axis supports normal numeric values, datetime entries, as well as categorical values.
Values along the x axis can be restricted by setting min and max values.
One can easily customize the text along the axis, change its color, tick text step or styling. Additional details are available here.
Each axis, including the x axis, supports a title to provide further information. The title is fully customizable.
All properties of the x axis can be found here.
An editable example of the axis is available here.

JavaScript Chart Animation

In this blog entry we look at the ShieldUI Chart animation options.

The Shield UI Chart offers animations, which improve the visual effects and impact of visualization applications.

There are two locations for specifying animations:
1. The chart section:

1 2 3

applyAnimation: {     duration: 1300 }

This setting allows you to specify the duration for the animation, in milliseconds. This is applicable for all animations, such as axis rendering, but not series drawing. The animation for the series is set as shown in the next section.

2. Animation can be applied for individual chart types through the seriesSettings tag, as shown below:

1 2 3 4 5 6 7

seriesSettings: {     area: {         applyAnimation: {             duration: 2000                    }     } }

This setting affects the rendering speed of each series of such type.
This setting is demonstrated in the following example.

Fast JavaScript Grid

Web applications nowadays tend to get more and more complex and involve both very sophisticated appearance and large amounts of data. Data can involve thousands or even millions of records fetched from the datasource and available for display. Such a large quantity can severely hurt the performance and the responsiveness of the application.

The ShieldUI javascript grid control offers a few possible ways to meet this challange.

Paging

The first option is to use paging. This allows rendering only a subset of the available data and breaking it into portions, or pages. The pager element, rendered at the bottom of the control is fully customizable. It looks as demonstrated below:

Virtualization

In addition to the paging mechanism, the ShieldUI grid offers virtualization. The virtualization mechanism allows the visual appearance that all data is loaded into the control, by showing a vertical scroll bar. This gives the end user the ability to quickly navigate between record sets and manipulate all the data. Behind the scenes, the grid control only loads enough records to populate the records visible on the current scroll. In this manner, working with even one million records is not a problem. To see this feature in action, refer to this example, as well as this presentation, which virtualizes remote data.

Hierarchy

A hierarchical view allows rendering of sub-tables or views for each record. The nested sub-records are usually related to the master record. A sample layout looks like this:

A hierarchy can be further combined with paging for each grid and sub-grid, to optimize performance.