Carousel Pixel Chart

Version Description

Application Scenario

Pixel Chart, is a new type of carousel charts  added in Extended Chart - Guage in the Extend Chart plugin of V 4.3. Such chart is suitable for the large-screen display, which can be used to display multiple percentage data records in a carousel way, and monitor the changes of the percentage data records in real-time. For example, the chart can be used to monitor the CPU and the memory usage in real-time. The following figure shows the effect.

Function Description

You can set the data carousel and the timed refresh. 

You can set Title, Label, Graph, and Background in Style.

You can customizethe carousel interval (minimum value: 4s).

The the negative percentage can be displayed without the highlighted pixel graphics. 

Plugin Installation

You can download the Extended Chart plugin.

For details about how to install the plugin in the designer, see Designer Plugin Management.

For details about how to install the plugin on the server, see Server Plugin Management.

Chart Entry

Pixel Chart is added in Extend Chart - Gauge. You can insert one to a report.

Data

The percentage calculation logic is as follows: Indicator Value/Target Value. When Target Value is set to Auto, only one target value can be involved in the calculation by default.

Style

In Style,Graph settings are mainly described here. You can customize the pixel display format.

Section Configuration

You can set pixel colors here. The pixel colors varies according to different percentage ranges.

Auto: The default section configuration includes three section ranges, as shown in the following figure.

Custom: You can customize up to six scetion range, but need to customize the upper/lower limit and the color for each section range, as shown in the following figure.

You can set the pixel quantity and interval here.

Number of Points Per Row: This parameter specifies the number of pixels in a row. You can only select a value form the drop-down list.

Pixel Fill: You can set the effect of filling a component by pixels.

Horizontal Gap/Vertical Gap: This parameter specifies the distance between pixels. You can enter a value manually.

When Pixel Fill is set to One-way Fill, the pixel proportion remains unchanged, and the component will be filled by pixels horizontally or vertically according to the component width and height, as shown in the following figure.

When Pixel Fill is set to Two-way Fill, the component will be filled by pixels horizontally and vertically, as shown in the following figure.

Animation

Two pixel loading animation effects are available, as shown in the following figure.

In Order

Out of Order

Special Effect

You can set Timed Refresh, Carousel Interval, and Carousel Linkage in Special Effect, as shown in the following figure.

Data Preparation

Create a general report with a built-in dataset. To simulate real-time memory changes, three data records are set in the dataset. You can enable the timed refresh to monitor memory changes in actual scenarios, as shown in the following figure.

Chart Insertion

Merge required cells and insert a carousel pixel chart, as shown in the following figure.

Data Binding

Bind the data to the chart, as shown in the following figure.

Section Configuration

Customize the ranges and the colors of the corresponding pixels, and set Unidirectional Fill to One-way Fill, as shown in the following figure.

Effect Display

Save the report and click Pagination Preview. The following figure shows the preview effect.

Note: 

The extend chart cannot be displayed on mobile terminals.

For details, you can download the template Carousel Pixel Chart.cpt