Work with Classic Charts

Logi Info includes a family of legacy Chart and Gauge visualization elements, now collectively called "Classic Charting elements", for use in reports. This topic discusses the use of those elements and provides guidance for implementing them.


About Classic Charts

 Logi Info includes a set of JavaScript-based charting elements collectively called "Chart Canvas" charts. We recommend that you use them for any new applications you create or if you update existing applications. Wizards in Logi Studio that help you create charts will create Chart Canvas charts. For more information about these chart, see Chart Canvas Charts.

A number of Classic Charts have been deprecated; they are still supported and will work, but their elements are no longer available in Studio. For more information, see Introduction to Classic Charts & Gauges and Chart Canvas Charts.

Logi Info's Classic Chart and Gauge elements provide powerful features for creating visualizations. The information presented in this topic is intended to allow you to quickly gain an understanding of how Logi charting elements work and to rapidly create simple charts.

Classic charts and gauges fall into two categories: Static and Animated, depending on whether they can draw themselves with animation.
 

Classic Chart Type Description

Animated Charts

Classic animated charts and gauges use HTML5 features and JavaScript to render animated visualizations. Flash animation is not supported and these charts are not exportable.

Static Charts

Static charts and gauges are rendered on the report page as an image, so they do not require any special browser add-ins to be viewed and they areexportable.

Note that, due to the varying nature of the elements, the attributes used in examples below are not all available for all charting elements. Attributes and child "helper" elements may be quite chart-style specific; developers need to apply common sense when implementing charts based on the examples shown here.

Developers unfamiliar with Logi Classic Chart elements are encouraged to read Introduction to Classic Charts & Gauges before proceeding.

Due to the large number of attributes available for Classic Charts, in the examples that follow the Attributes Panel screenshots have been edited to show only the relevant attributes in order to conserve space.

Back to top

General Chart Appearance

When reports are generated, each charting element is rendered in an "image space" and the elements have attributes that allow developers to control the size and background color of that space. The shape of the image space may not match the shape of the data portion of the chart.
 

For example, as shown above, even though the chart is round, the Height, Width, and Background Color attributes refer to its rectangular image space. The Height and Width values use pixels as their unit of measurement and can be set using tokens.

The Resizer element can be added as a child of Static charts. It causes "resizing handles", circled above, to be displayed when the cursor hovers over them. Users can drag these handles at runtime to dynamically resize the chart. Resizer changes are maintained between sessions, so the chart will maintain its size on subsequent page visits. You can specify maximum and minimum size limits for the chart.

Many charts have a Colors attribute for setting the colors of data portions of the chart. If this attribute is left blank, a default color set is used. A custom color set can be entered, in a comma-separated list, as shown above.

Color values may be entered as a name ("LightBlue"), a decimal RGB value (255,255,255) or a hex RGB value (#112233).

Chart.Pie and Chart.XY include a "Color Data Column" attribute that identifies a column in the datalayer as the source for the color information for static pie and bar charts, allowing you to set the colors from data.

Line, Area, Bar and other charts can use a background grid of lines to help the eye follow values, as shown above. The color of the chart area border and grid lines can be set. Color values may be entered as a name ("Orange"), a decimal RGB value (255,255,255) or a hex RGB value (#112233).

The tick marks displayed just outside the axis borders in Static Chart.XY charts can be shown or hidden, by setting the Tick Marks attribute in the Data Font and Label Font elements.

The data portions of Animated Chart.XY charts are rendered on a "canvas", which can have its own background color, as shown above, which is set using the Canvas Background Color attribute. A compatible color is automatically generated for alternating values.

In a Static Line chart, shown above, the attribute that controls the canvas color is the Plot Area Background Color. Different colors for alternating values can be shown by entering a comma-separate list of values.

In Static Chart.XY charts (Area, Bar, Line) individual attributes control the colors of the data, plotting area background, and borders. There are also attributes for applying color gradient effects and for rounding outer border corners.

Static Chart.Pie charts include 3-Dimensional and Chart Texture attributes that can be used to apply different appearances to the chart surface. 3-D depth and 3-D angle can also be configured. The Chart Texture attribute is also available for the Chart.Heatmap element, as well.

Many charts also have a 3-Dimensional attribute which controls rendering in 2-D or 3-D, as shown above. The 3-D rendering process affects not only the data portions of the chart but the canvas, too. In the case of Gauge.Needle, the Needle Gauge Enclosure attribute can even add a very realistic-looking "glass cover" over the face of the gauge.

As shown above, many charts also have a Transparency attribute, which can be useful for letting different chart layers show through each other. The lowest value for this attribute is 0 (or blank), which makes the chart opaque, and the highest is 15, which makes the chart completely transparent. Note that this does not affect the canvas itself.

Saving Charts

All charts can be saved as image files by right-clicking them and selecting Save from the popup menu. Animated Pie charts have additional runtime features available via their popup menu, including Rotation and Slicing (clicking a slice to explode it out from the pie).

Back to top

Data Retrieval and Appearance

Data is provided for charts by adding a datalayer element as a child of the chart or gauge element. The datalayer retrieves the data to be visualized and supplies it, record by record, to the chart for plotting. The datalayer can make use of grouping, filtering, and all the other modifier elements generally available to datalayers in order to shape the data it retrieves. The Formatted Column element can be particularly useful in getting data in the datalayer formatted correctly for use in charts.

 Animated Gauges can get their data from a datalayer or from tokens, including Local Data, Session, and Request tokens. However, they're not designed to be used in a report page where there are multiple gauges, each with its own child datalayer. In this case, all of the gauges will draw data only from the first child datalayer. If you have a multi-gauge page such as this in mind, design your report to use Local Data to retrieve all of the data needed for all of the gauges, then use tokens to provide the data to the gauges.

For Static charts, a Show Wait Icon attribute controls whether an animated "loading" image is displayed if there's a delay in retrieving data for a chart. It defaults to True, so set it to False if you don't want the animated icon to appear.

Chart processing is multi-threaded and asynchronous so, for example, charts in multiple dashboard panels will be generated simultaneously. On web servers with multiple cores or multiple processors, chart generation tasks will be spread across them for even better performance.

What if no data is returned to the datalayer? Instead of displaying the chart, Animated charts will automatically generate a "No data to display message". When using Static charts, you can choose to add a Zero Rows Message element to display a message.

Values from the datalayer can be used to set the boundaries of graphics in the chart (the height of a bar, the size of a pie slice, etc.) and to supply text that appears in tooltips, legends, and chart labels.

The name of the datalayer column that provides a chart's Y-axis ("Data") values is specified in the element's Data Column Y-axis attribute, as shown above. This adds the initial data series to the chart.

 

The name of the datalayer column that provides a chart's X-axis ("Label") values is specified in the element's Label Data Column attribute, as shown above.

For Chart.Pie, Chart.Polar, and Chart.XY, the chart's Data values can be formatted for presentation, using the Data Scale and Format Data elements. For Label values, the Label Scale element provides similar functionality, as shown above.
 

Adding Multiple Series

Multiple data series can be plotted on the same canvas, as shown in the following examples.

In the example above, three data series are shown in a Line chart. The basic chart will display one data series; to add additional series, Extra Data Column elements are added below the chart element. Each of these elements has an attribute that's set to the name of another column in the datalayer.

In the example above, the chart type has been changed to a Bar chart. On the left, the three data series appear as Side-by-Side bars, and in the middle, as Stacked bars. This behavior is controlled by the chart's Extra Bar Options attribute, shown above right.

You can show the data values inside stacked bars in a Static Bar chart by setting the chart's Stacked Bar Labels attribute to Individual, as shown above. The default option, Aggregate, displays a single, combined value above the top of each stack.

Static Chart.XY charts can have two Y-axes. The Secondary Data Axis element controls a secondary axis, normally appearing on the right side of a grid. In the example shown above, this is the "Orders" axis. This other axis represents data for an Extra Grid Layer, and has its own independent scale. Child elements can be used to format the data and secondary axis appearance.
 

Controlling Data Appearance

The appearance of the data visualization, including colors, widths, and style, can be configured.

The style and width of the lines representing data in Line charts can be formatted using the Line Style and Line Width attributes, as shown above. Solid, and a variety of dotted and dashed, line styles are available.

The appearance of static line charts can also be data-driven by setting the Line Color Data Column and Line Style Data Column attributes. This allows you to have different colors for different line segments, as shown above.

In Line and Scatter charts, the data points can be emphasized with symbols, as shown above. The size of the symbol, in pixels, can be set and symbols choices include Circle, Cross, Diamond, Glass Sphere, Solid Sphere, Square, Triangle, X and others. You can enter a comma-separated list of symbols as the Symbol attribute value for Line and Spline-types of Chart.XY. This allows a different symbol to be used for each data series

Line chart lines can be made discontinuous by replacing null data values with the value 1.7E+308, producing "broken" lines.

A "trend" line can be added to static reports to give a general impression of the trend of the data. The blue trend line in the example above was included by adding a Trend Line element as a child of the chart element. The calculation involved in determining the trend line angle occurs automatically; line width and color can be set through attributes.

The Lowess Curve Line element, available with release 9.5.78, creates a trend line (in blue, above) that fits a curve through a static Chart.XY's data points using the Lowess Curve Fitting algorithm.


     

Static and Animated Pie charts can be configured so that one or more of their pie wedges are displayed as "exploded", as shown above. This is done using the Exploded Wedges Column attribute, which specifies a datalayer column whose values determine wedge state. Non-zero values in that column will cause the wedge for the corresponding X-axis value to be exploded. Typically, the developer will add a Calculated Column to the datalayer, with a formula that evaluates to 1 or 0, and specify that column in the Exploded Wedges Column attribute.

Tooltips can be also added to charts, as shown above, by setting the Tooltip Column (Animated charts) or Tooltip (Static charts) attribute. This causes identifying data from the datalayer to be displayed as a tooltip, as shown above, when the mouse hovers over a portion of the chart. The Tooltip Column requires only the name of a column from the datalayer, while the Tooltip attribute requires the use of an @Chart token to display data. For animated charts, a Tooltip Font element is available for formatting the tooltip.

Certain charts can include a feature called Quicktips:
 

When the Quicktip element is added as a child of the chart element, it provides a small, popup "balloon" at the cursor location. The Quicktip allows the balloon to have a title and one or more rows of text. Data values can be shown by configuring the Quicktip element with the @Chart token.
 

In summary, data is retrieved for use in a chart by a datalayer. Typically, a chart on its own will display one data series but, with the addition of other helper elements, it can be made to show additional data series.
 

Refreshing Animated Chart.XY in Realtime

The Realtime Update element was introduced. It transforms an Animated Chart.XY into a chart that updates itself periodically, by adding new data values at its right side and scrolling the X-axis horizontally.
 

The example above shows a Line chart displaying a value as it changes, once per second. The Realtime Update element uses AJAX technology to automatically refresh its Animated Chart parent element, based on an interval set in seconds. It works by re-running just that portion of the report that retrieves the chart data and passing it back to the browser to update the chart. The data is accumulated internally and re-processed each time the chart is displayed.

If Extra Data Column elements are used, they're displayed as additional lines in Line charts, and as stacked values in Area and Bar charts.
 

As shown above, the Realtime Update element is used by adding it beneath the Animated Chart.XY element. Its only attribute is the required Refresh Interval attribute, which is specifies, in seconds, how frequently to refresh the chart.

Note that the Realtime Update element cannot be used with a chart whose datalayer has a Crosstab Filter applied to it.


Title, Labels, and Legends

Logi Classic Chart elements include numerous attributes and supporting elements that can be used to tailor their chart titles, labels, and legends. These help developers get the right "look" for their charts, thereby helping users understand what they're seeing.

Space for titles is automatically allocated for all charts.

These indicate, in pixels, the distance on each side from the chart canvas to the edge of the chart image space. The overall vertical size of the chart is therefore calculated as the sum of the Top Border + Height + Bottom Border. The horizontal size calculation is Left Border + Width + Right Border.
 

Titles for the chart, data, and labels can be set using the Chart Title, Data Title and Label Title attributes as shown above.

Static Chart titles that are longer than the width of the chart itself are automatically truncated and have an ellipsis ("...") appended to them, as shown above left. In Animated Charts, the title text will wrap to another line.

Static Charts can also use the Chart Title Font child element to set the title font, color, size, angle, and alignment.

Static Chart titles can also be rendered in multiple colors, as shown above right, by using CDML tags directly in the Chart Title attribute value to specify different font colors, sizes, etc. Find out more about CDML in Classic Chart Label Formatting. The example shown above was produced using this value:

<*color=0000FF*>Multi-Color <*color=FFD700*>Chart <*color=BA55D3*>Titles <*color=000000*>Available Too!
 

All charts include a Max Label Length attribute, which specifies the maximum number of characters that will be displayed for a label before the text is trimmed and the remainder replaced with an ellipsis (...). This truncation is also applied to Legend labels for Chart.Pie, if a Legend is in use (it is not applied to legends for other types of charts).

Static XY and Pie charts include a Label Column Data Type attribute, which can be used to set the way in which the charting engine will interpret the data specified in the column named in Label Data Column X-axis. This can be useful, for example, when you want dates in the data to be presented as text in the chart's X-axis labels.

 

As shown above, labels can be formatted by adding a Label Font element, providing control over font family, size, color, angle, and decimal point appearance. Font angle is only configurable for Static charts, not for Animated charts.

A Label Scale element is also available for controlling the appearance, size, and frequency of tick marks along the scales. One of its modes is LinearTime, which plots points evenly end-to-end according to an X-axis value, for use with Line and Area charts.

Labels can also be formatted using the CDML formatting language; find out more about CDML in Classic Chart Label Formatting.  

Attributes of the Static Pie chart allow the position, shape, and shading of chart Labels to be set.

Legends provide an explanation of some of the visual information in a chart, which is often color-related. In the example above, the legend associates products with colors. In Static charts, two elements, Legend and Legend Font, shown above, control the location, size, font, border, orientation, and background color of legends. In some Animated charts, providing a value for their Legend Title attribute automatically generates the legend. The association between the colors and the data is also generated automatically.

When the Legend element's Legend Filter attribute has been set to True, it becomes possible to dynamically filter the data in some Static charts, including Pie, Line, Area, Bar, and Polar charts, by clicking items in the Legend, as shown above.

Back to top

Drill-Down and Drill-Through Features

Users frequently want to be able to get the details that support the data shown in charts and there are several ways developers can provides this. Adding "drill-down" functionality involves adding Action elements so that clicking on the chart will present detail information.
 

For example, adding an Action.Report and Target.Report element as children of the Animated Chart.Pie element will cause each wedge in a Pie chart to become a link to the target report.

 Note that, when a chart uses its own datalayer element to retrieve data, that data is accessed with an @Chart token, not the @Data token that's used with data tables.

Data specific to each pie wedge can be passed to the target report using Link Parameters and an @Chart token. The target report can then take action, such as filtering its own data, based on an @Request token representing the Link Parameter value.
 

Automatic Drill-Through Report

Charts often use grouping to aggregate data for a consolidated view. There are times, however, when it's useful to be able to examine the detail data that was used to create that aggregation and you can provide this "drill-through" functionality with the Group Drillthrough element.

In the example shown above, a Group Drillthrough element has been added beneath a Chart.Pie element. All of the element's attributes, other than ID, are optional but the example shows that a custom caption and an export button selection have been entered. More information about the attributes can be found in the element's Element Reference page.

The resulting pie chart looks no different than usual, but when one of its wedges is clicked,

a detail report, like the example shown above, is automatically generated, containing all of the relevant detail data.

Group Drillthrough is only available for the Chart.XY, Chart.Pie, Chart.Heatmap, and Chart.Scatter elements.

Note that the Group Drillthrough element is designed to work charts with datalayers that have a Group Filter, Crosstab Filter, or Relevance Filter child element. This has implications if you want to use Group Drillthrough and you're working with DataLayer.SQL; for example, you'll have to use a Group Filter element instead of doing the grouping in your query.

The Group Drillthrough element's attributes allow you to customize certain aspects of the detail report. You can also include Drillthrough Column elements beneath the Group Drillthrough element; they allow you to set the number columns that will appear in the report and to customize their appearance.

Back to top

Interactive Chart Configurations

All of the charting elements' attributes can be "tokenized"; that is, you can use tokens in them as values. This allows charts to be highly-interactive and dynamically customizable.
 

     

For example, a report page could include an Input Select List element so the user has a choice of chart types: Bar, Line, and Area. When the user makes a selection, the report will be refreshed and their selection is automatically passed as a Request variable. The resulting @Request token can then be used in the a Chart.XY element's Chart Type attribute, as shown above, to dynamically set the chart type. Other use-case examples include:

  • Through the use of cookies and @Cookie tokens, chart configurations can be "personalized" for individual users and the settings retained between sessions.
  • Charts can be included in reports as child elements of tables and have a "data-driven" configuration, using @Data tokens to provide values for chart attributes.

The chart configuration flexibility available through the use of tokens is quite extensive, providing opportunities for user-customizable chart size, colors, type, content, and more.
 

Hover Highlight

The Hover Highlight child element causes chart features, such as bars and lines, to be highlighted when the mouse pointer is hovered over them, making it easier for users to visualize the item under the pointer. The element is available for use with Static Pie, Bar, Line, Area, and Scatter charts.
 

The element's attributes enable customization of the highlight overlays. The Fill Color attribute applies to Pie and Bar charts, the Border Color and Border Width attributes to Line, Area, and Scatter charts, and Line Color applies to Line and Area charts.

 Note that attempts to use the ThemeAlignCenter class, or other CSS classes that use text-align, on a container such as a DIV in order to center a chart that includes Hover Highlight are likely to fail. Hover Highlight is not a simple HTML entity, like text or an image, that other content can flow around; it's wrapped in its own DIV and no longer behaves like block content. One possible alternate approach is to use an HTML table instead of a DIV as the container. Due to its non-standard behavior, this kind of centering will work with IE 9 only.
 

Zoom Chart

The Zoom Chart element provides users with the ability to "zoom" into a chart's data by selecting an area on the chart. The Zoom Chart is available for use with static Chart.XY and Chart.Scatter elements.
 

There are two configurations of the Zoom Chart. In the first, shown above left, the "selection area" appears right over the parent chart. Resizing handles allow its size to be adjusted and it can also be dragged horizontally. When the mouse button is released, the parent chart zooms in or out to include just the data within the selection area, as shown above right. Successive selections can be made on the zoomed chart. The "Show All" button returns the view to encompass all of the original data.
 

In the second configuration of the Zoom Chart, shown above, a smaller version of the chart, with selection area, appears below the chart. Changes to the selection area cause the view of the data in the chart to change correspondingly.

     

As shown above, the Zoom Chart element is added as a child of the parent chart and its attributes allow you to customize the selection area and chart. The Location attribute is set to None to display the selection area on top of the chart; setting it to Bottom displays the small selection area and chart beneath it.
 


A Label Scale element is also required, as shown above, with a Scaling Mode set to one of the Linear options (based on your X-axis data type).
 

InputChart.List and InputChart.Range

The InputChart.List and InputChart.Range elements allow users to work with charts as user input elements. Users can select data values on a chart and pass them, in manner similar to other user input elements, through Request tokens to other definitions. To use either one of them, add it as the parent element of a Static chart element.
 

     

As shown above, InputChart.List works with Static Bar and Pie charts. At runtime, chart bars or wedges can be clicked to select them. When the report page is submitted, the X-axis values are submitted to the next definition as a Request token that includes the chart ID, whose value is comma-separated list. For example,
 

    @Request.ChartXY_Bar~ = "Condiments,Produce,Seafood"
     

would result from submitting the example above. The element includes attributes common to Input elements and attributes for specifying the colors of selected and unselected bars or wedges. Standard Action elements (not shown) are required to submit the page.
 

     

As shown above, InputChart.Range works with Static Line, Spline, and Scatter charts. At runtime, a "selection area" can be "drawn" onto the chart plotting area to select values by dragging the mouse. When the report page is submitted, the maximum and minimum X-axis and Y-axis values are submitted to the next definition as individual Request tokens. For example:
 

    @Request.minX_value~ = "2/20/2012"
    @Request.maxX_value~ = "3/31/2012"
    @Request.minY_value~ = "0"
    @Request.maxY_value~ = "1200"


would result from submitting the example above. Clicking outside of the selection area will clear it.

The element includes attributes for specifying the names of the request variables to be associated with the value range and the colors of the selection area. Two special child event handler elements, Area Drawn and Area Cleared, can be used to fire standard Action elements, as shown, when the selection area is drawn or cleared, refreshing or submitting the page. In addition, or instead, standard, unrelated Action elements (not shown) can also be used to submit the page.

More information is available in Work with User Input Elements.

Back to top

Working with Gauges

Static gauges provide a variety of interesting visualizations that can be almost photographic in their appearance. Gauges are SVG images that can be exported and scaled smoothly (they can have a child Resizer element).

Many gauges can be exported as a .PNG image, including the following:

  • Gauge.Arc
  • Gauge.Angular
  • Gauge.Balloon Bar
  • Gauge.Bullet Bar
  • Gauge.Number

More information about how to configure them to be exportable can be found in Export Chart Canvas Charts.
 

Needle Gauges

Needle gauges look like speedometers: they have a needle pointer that swings through an arc and indicates a data value on a scale. Gauge shapes include half-round, quarter-round, and rectangular.

The Gauge.Needle element has been deprecated and you should use Gauge.Angular instead.

The Start Angle and Total Angle attributes of the Gauge.Needle element govern the possible positions of the needle pointer. Here's a table of examples, showing some of the possible shapes and configurations:
 

Gauge Type

Configuration

Notes

Round Gauge

Start Angle value minimum = 0
Total Angle maximum = 360.

Half-Round Gauge

HalfTop (shown)
Start Angle value minimum = 180
Total Angle maximum = 180

HalfBottom
Start Angle value minimum = 0
Total Angle maximum = 180.

Quarter-Round Gauge

QuarterTopLeft (shown)
Start Angle value = 180
Total Angle = 90

QuarterTopRight
Start Angle value = 270
Total Angle = 90

QuarterBottomRight
Start Angle value = 0
Total Angle = 90

QuarterBottomLeft
Start Angle value = 90
Total Angle = 90

Rectangular Gauge

Type is set to HalfTop.


 

Arc Gauges

Arc gauges are simple, clean visualizations which show beginning and ending values, with an arched color bar between them. The data value number is shown inside the arc.
 


The gauge may have multiple ranges in different colors. The color of the arc is determined by which range contains the value.

The example shows how the Gauge.Arc element is configured and its child Gauge Range elements, which give the arc different colors for specific data values.

The No Debugger Link attribute can be used to suppress individual chart/gauge debug icons that appear when debugging is turned on. You may want to do this to reduce "visual clutter" and ensure a realistic layout when debugging a page that includes relatively small charts and gauges.

Back to top

Default Color Sets

If you're using one of the standard Logi themes, the theme will set the default colors. These colors can be identified by looking at the theme's Template Modifier file: <yourAppFolder>\rdTemplate\rdTheme\<ThemeName>\ThemeModifier.xml

If you're not using a theme and do not specify a color set, the following default color set will be applied.
 

Static Charts

# Hex Code

Color

1 FF3333  
2 33FF33  
3 6666FF  
4 FFFF00  
5 FF66FF  
6 99FFFF  
7 FFCC33  
8 CCCCC  
# Hex Code

Color

9 CC9999  
10 339966  
11 999900  
12 CC3300  
13 669999  
14 993333  
15 006600  
16 990099  
# Hex Code

Color

17 FF9966  
18 99FF99  
19 9999FF  
20 CC6600  
21 33CC33  
22 CC99FF  
23 FF6666  
24 99CC66  
# Hex Code

Color

25 009999  
26 CC3333  
27 9933FF  
28 FF0000  
29 0000FF  
30 00FF00  
31 FFCC99  
32 999999  

List continues with other colors not shown here.
 

Animated Charts

# Hex Code

Color

1

AFD8F8

 
2

F6BD0F

 
3

8BBA00

 
4

FF8E46

 
5

008E8E

 
6

D64646

 
7

8E468E

 
8

588526

 
# Hex Code

Color

9

B3AA00

 
10

008ED6

 
11

9D080D

 
12

A186BE

 
13

CC6600

 
14

FDC689

 
15

ABA000

 
16

F26D7D

 
# Hex Code

Color

17

FFF200

 
18

0054A6

 
19

F7941C

 
20

CC3300

 
21

006600

 
22

663300

 
23

6DCFF6

 
     

Colors are repeated again after 23 colors are applied.

Back to top