Chart Canvas Charts

Logi Info includes a fast, JavasScript-based family of charting elements that offers a number of improvements over the legacy Static and Animated chart elements. The Chart Canvas charts are discussed in this topic.
 

 

Using the Chart Wizard

The fastest and easiest way to create a Chart Canvas chart is to use the Chart Wizard in Logi Studio. Here's how:  

     
  1. As shown above, in a definition in Logi Studio, select an element like Body or a Division, and either click the Chart or Gauge item in the main menu's Wizards tab, or right-click the element and select Element Wizards, and then select Add a Chart or Gauge from the secondary menu.
 


     
  1. A series of dialog boxes, shown above, will be displayed. These all relate to the retrieval of the data. Make appropriate selections for your application and click Next to move to the next dialog box. As you do, you'll see the wizard adding elements to your definition.





  2. Based on the data, the wizard will make an educated guess about appropriate chart types and will display a preview chart in the next dialog box. You can select other chart types from the options across the top, and select other data columns and analysis options. When the chart is just the way you want it, click Next.

    The Max Rows option at the bottom of the dialog box controls the maximum number of rows that will be retained in the chart's datalayer.





  3. Finally, you'll be asked if you want to add "resizer handles" to the chart. These allow the user to resize the chart at runtime by dragging the handles. Click Next to exit the wizard.


When you exit the wizard, it'll finish inserting all the configured elements for the chart into your report definition, as shown above. Preview your application and you should see your new chart.

Back to top

Chart Canvas Chart Basics

The Chart Canvas chart elements are based on a library written entirely in HTML5 and JavaScript, and work very well in all modern desktop and mobile device browsers. No client-side technology, such as Flash or Java, is required. These elements provide a wide range of features and the flexibility to customize them to your requirements. Many desirable features, including animations and quicktips, are enabled by default, making it very easy to create great-looking charts quickly. In addition, these charts are exportable in reports.

By default, Chart Canvas charts are rendered by the browser using SVG technology. For browsers that do not support SVG, primarily IE 7 & 8, charts are rendered with VML.

The PDF export engine was changed to Gecko-based technology and Chart Canvas charts are now exported as SVG objects rather than as images. This results in Chart Canvas charts exported to PDF having extremely high resolution - they can be zoomed or printed with high-quality at any resolution.

When exporting Chart Canvas charts to PDF, the Chart Canvas element must have Height and Width attribute values set. The legacy Static and Animated charts available in earlier versions of Logi Info have been deprecated. Developers should use Chart Canvas Charts for all new projects.

Chart Canvas charts are used by default for Super Elements, such as the Analysis Grid, in all new applications. Logi applications that are upgraded to v12 will use the classic static charts for their Super Elements. To force upgraded apps to use Chart Canvas charts, add the constant rdFavorChartCanvas = True to your _Settings definition.

Documentation

Information about Chart Canvas charts is provided on DevNet with a separate set of topics in the User Guide:

These topics provide guidance in all aspects of using the Chart Canvas-related elements.
 

Chart Geography

The following image explains many of the terms used to describe a typical Chart Canvas chart:
 

The background color, line properties, and transparency of the areas and lines shown can all be controlled by setting attributes. Additional major and minor tick marks, and grid lines can be added. The spacing, style, and format of all the items shown can also be configured.

Back to top

Manual Chart Quick Start

Chart Canvas charts are incredibly easy to use! All you need to do to create a chart manually is to add two chart elements, set two attributes, and include a datalayer.
 

  No other chart element attributes need be set - everything else will be done automatically for you.
 

The resulting chart will be automatically-sized and styled, and will include hover-highlighting and quicktips, as shown above. Now let's dig into the elements we used, and others in the Chart Canvas family.

Back to top

The Chart Canvas Element

The Chart Canvas element is the parent, or "container", for all of the other elements used in these charts. As such, its attributes specify the size and appearance of the overall chart, the canvas, and the plot area. Here are its attributes:
 

AttributeDescription
Alternate Text Specifies text to be displayed when the browser's options are set to not display images. The text is also used by browsers that convert text to speech or Braille output.
Animation Duration Sets the duration of chart animations, in milliseconds. To disable animation, enter a 0 value.
Auto Quicktip Enables the display of Quicktips, with automatically determined information, when the mouse is hovered over data points. To create customized Quicktips, add a Quicktip element under the Series element.
Background Color Sets the canvas background color. Enter a color by name, decimal RGB value, or hex RGB value. Prefix hex values with the pound sign, e.g. #112233.
Background Color Transparency Specifies the transparency of the canvas background color. The lowest value of 0 specifies that the background is opaque, with no transparency. At the other end of the scale, 15 specifies a completely transparent background. Use medium-level transparency to allow different chart layers to show through each other.
Border Color Sets the canvas border line color. Enter a color by name, decimal RGB value, or hex RGB value. Prefix hex values with the pound sign, e.g. #112233.
Border Color Transparency Specifies the transparency of the canvas border line color. The lowest value of 0 specifies that the border line is opaque, with no transparency. At the other end of the scale, 15 specifies a completely transparent line. Use medium-level transparency to allow different chart layers to show through each other.
Border Radius Sets the amount of rounding for canvas border line corners, in pixels.
Border Thickness Sets the canvas border line thickness, in pixels. The default value is 0, for no border.
Caption Specifies the text for the chart main title. Line feeds may be used in this attribute. In Logi Studio, open the Attribute Zoom window for this attribute and use the Enter key while typing text to introduce line feeds where desired. The text will appear on different lines when the chart is drawn.
Class Specifies the Cascading Style Sheet class used by the element. When set, this class will also be used by all child elements that don't have their own class. The class should be defined in the report's style sheet file or theme.
Height Specifies the height of the canvas, in pixels. If left blank, a height will be determined automatically. Must be set to a value in order to export chart to PDF.
No Data Caption Specifies text to be shown in the plot area when no data is received in the chart's datalayers.
No Debugger Link
Specifies whether or not individual chart debug icons will appear when debugging is turned on. You may want to suppress them to reduce "visual clutter" and ensure a realistic layout when debugging a page. Default: False
Orientation Allows swapping of the X- and Y-axes. The default value is Vertical, meaning data points are plotted on the Y-axis and labels are listed across the X-axis.
Plot Background Color Sets the plot area background color. Enter a color by name, decimal RGB value, or hex RGB value. Prefix hex values with the pound sign, e.g. #112233.
Plot Background Color Transparency Specifies the transparency of the plot background area color. The lowest value of 0 specifies that the border line is opaque, with no transparency. At the other end of the scale, 15 specifies a completely transparent line. Use medium-level transparency to allow different chart layers to show through each other.
Plot Background Image Specifies the complete URL of an image to be displayed in the chart plot area (a chart "background" image). Use CSS, rather than this attribute, to specify a background image for the entire canvas.
Plot Border Color Sets the plot area border line color. Enter a color by name, decimal RGB value, or hex RGB value. Prefix hex values with the pound sign, e.g. #112233.
Plot Border Color Transparency Specifies the transparency of the plot area border line color. The lowest value of 0 specifies that the border line is opaque, with no transparency. At the other end of the scale, 15 specifies a completely transparent line. Use medium-level transparency to allow different chart layers to show through each other.
Plot Border Thickness Sets the plot area border line thickness, in pixels. The default value is 0, for no border.
Polar Set to True to transform Cartesian charts (e.g. Area, Bar, Line, and Spline) into the Polar/Radial coordinate system, producing a "Polar Chart". The default value is False.
Spacing Bottom Sets the space between the bottom edge of the chart content (including the plot area and labels) and the bottom border of the chart, in pixels. The default value is 15 pixels.
Spacing Left Sets the space between the left edge of the chart content (including the plot area and labels) and the left border of the chart, in pixels. The default value is 10 pixels.
Spacing Right Sets the space between the right edge of the chart content (including the plot area and any labels) and the right border of the chart, in pixels. The default value is 10 pixels.
Spacing Top Sets the space between the top edge of the chart content (including the plot area and any captions) and the top border of the chart, in pixels. The default value is 10 pixels.
SubCaption Specifies a subcaption for the chart, which normally appears below the chart caption. Line feeds may be used in this attribute. In Logi Studio, open the Attribute Zoom window for this attribute and use the Enter key while typing text to introduce line feeds where desired. The text will appear on different lines when the chart is drawn.
Width Specifies the width of the canvas. By default, the unit of measure is pixels, but you may type in a value and the percent sign to indicate a percentage of its container. If left blank, a width will be determined automatically. Must be set to a value in order to export chart to PDF.


It's recommended that you set a unique element ID for charts if there will be more than one chart in a definition.
 

Getting Data

The example shown earlier used a datalayer beneath the Chart Canvas element, which makes the data retrieved available to all of its other child elements.
 

However, as shown above, instead of using a common datalayer, you can use individual datalayers beneath the child elements, where appropriate, to give them their own data.

 Do not mix these two arrangements. Either use a single datalayer as a child of the Chart Canvas element OR a datalayer as a child of each Series element. Do not use a datalayer as a child of the Chart Canvas element AND a datalayer as a child of one or more Series elements.  

As shown in the example above, when using Chart Canvas charts as the child of an element that has its own datalayer, such as a DataTable or Google Map, you must use @Chart tokens, not @Data tokens, in any elements used to condition the chart's datalayer.

 Due to order-of-operations differences, datalayers that have the Handle Quotes Inside Tokens attribute set to True will not process quotes as expected when used underneath Chart Canvas elements. In this scenario, we recommend that you use the datalayer under Local Data and link it to a datalayer for the chart.

 When DataLayer.MDX is used as a child of Chart Canvas, only one Series element may be used. The datalayer cannot be used as the child of a Series element.

Back to top

Chart Canvas Child Elements

The Chart Canvas element also uses the following child elements to generate, control, and format the canvas and charts. Click the element link for more information.
 

ElementDescription
X-Axis and Y-Axis Elements for Chart Canvas ChartsSpecifies properties of axis lines, grid lines, tick marks, and label fonts.
Caption Style and SubCaption StyleSpecifies Caption and SubCaption font-related and positioning attributes.
No Data Caption StyleSpecifies font-related properties for the No Data Caption.
Crosstab Filter with Chart Canvas Charts"Pivots" and groups the data for easier comparison.
Input Selection for Chart Canvas ChartsProvides the ability to select chart areas or points with the mouse.
CCC LegendSpecifies Legend border, background, location, and other properties.
The ResizerAdds "resizing handles" to the bottom and right sides of the canvas.
The Trend Line for Chart Canvas ChartsGenerates a line on the chart indicating the "trend" of the data.
The Zoom Control for Chart Canvas ChartsAllows the user to "zoom" into the canvas, magnifying a portion of it.
Series.Area Adds this data visualization to the canvas.
Series.Area RangeAdds this data visualization to the canvas.
Series.Area SplineAdds this data visualization to the canvas.
Series.Area Spline RangeAdds this data visualization to the canvas.
Series.BarAdds this data visualization to the canvas.
Series.Bar RangeAdds this data visualization to the canvas.
Series.BubbleAdds this data visualization to the canvas.
Series.FunnelAdds this visualization to the canvas.
Series.HeatmapAdds this visualization to the canvas.
Series.LineAdds this data visualization to the canvas.
Series.PieAdds this data visualization to the canvas.
Series.PyramidAdds this data visualization to the canvas.
Series.ScatterAdds this data visualization to the canvas.
Series.SplineAdds this data visualization to the canvas.
Series.WaterfallAdds this data visualization to the canvas.
Series.WhiskersAdds this data visualization to the canvas.

   Note that there is no "Series.Polar" element. To produce a Polar chart, set the Chart Canvas element's Polar attribute to True, which converts Cartesian series (Area, Line, Bar, etc.) to the Polar/Radial coordinate system.

 

Back to top

Default Colors

If no colors are specified for a Series and no theme has been applied, the following colors will be used, in left-to-right order:
 

 

#2F7ED8

#0D233A

#8BBC21

#910000

#1AADCE

#492970

#F28F43

#77A1E5

#C42525

#A6C96A


If more than ten colors are needed, colors will be re-used, starting from the left again.

Back to top

Refreshing Chart Data

Chart visualizations can be updated by refreshing their data using two methods:

  • The Refresh Series Timer element is discussed in the documentation for individual Series elements.
  • The Logi JavaScript API for Chart Canvas Charts is a JavaScript library that developers can use to load data into Chart Canvas Charts, updating the visualizations whenever desired.

Back to top