Introduction to Classic Charts & Gauges

Logi Info offers developers a rich selection of charts for data visualization. This topic enumerates one of the families of charts and gauges available, Classic Charts, describes them in general, and provides links to additional detailed information.

A number of Classic Charts have been deprecated; they are still supported and will work, but their elements are no longer available in Studio. Whenever possible use Chart Canvas Charts instead for all new development. See the gallery tables below for details.

About the Classic Charting Elements

Chart Canvas Charts were introduced in v11.2.040. The container or root element for charts in this family is the Chart Canvas element. These charts use HTML5 features and JavaScript. For more information about these charts, see Chart Canvas Charts.

We refer to charts and gauges that were existed prior to the introduction of Chart Canvas Charts as our "Classic Charts and Gauges". They 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.

Some individual charting elements are capable of producing several different types of charts. For example, Chart.XY produces Line, Bar, Area, and Spline charts. These charting elements give you the ability to adjust many aspects of your charts and, as a result, multi-type chart elements have a lot of attributes, but some of them only apply to a particular chart type and not to others.

If you're just beginning to work with Logi chart elements you'll find that it's a very iterative process and there are usually many small adjustments to be made until your charts are "just right". This is inherent in having the level of flexibility that our customers demand.

Logi Studio includes several wizards that can help you get started creating charts and gauges, but they generate Chart Canvas Charts, not Classic Charts.

Additional information that will allow developers to quickly get started creating charts is available in Work with Classic Charts.

Back to top

Gallery of Classic Chart and Gauge Elements

The following table describes the charts that are available. In the table, the element name is a link to the DevNet Element Reference page for that element and, if present, this icon is a link to a DevNet document about the chart.
 

Chart

Description

Document availableElement name: Analysis Chart

The Analysis Chart is a dynamic chart set that offers users interactive data analysis capabilities. While viewing a report in their browser, users can select chart types and chart data. Chart options include: Pie, Bar, Line, Spline, and Scatter.

Element name: Chart.Gantt

A Gantt chart is a popular type of bar chart that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project. Terminal elements and summary elements comprise the work breakdown structure of the project. Chart.Gantt is limited to 1,000 data rows and only supports one Extra Gantt Column child element.

Element name: Gauge.Angular

Gauge.Angular displays an angular gauge chart, similar to a speedometer. Upper and lower values define the bounds of the gauge, and a value indicates where the needle points. Angular gauges may have labels, tick marks, and differently-colored rings.

Document availableElement name: Gauge.Arc

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

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

Element name: Gauge.Balloon Bar and Gauge.Bullet Bar

Balloon Bar gauges show a value inside a prominent balloon box, with a pointer going into the bar. Bullet Bar gauges show a bar within a bar. These are especially good for presenting key values in an easy-to-read image.

Element name: Gauge.Bar

A single data value is plotted along a vertical thermometer scale, providing a quick at-a-glance indication of its value.

Alternate visual styles of this chart include Horizontal Thermometer, Vertical Bar, and Horizontal Bar.

Element name: Gauge.Indicator

This chart provides multi-colored signals associated with a single dataset, providing a quick at-a-glance indication of value.

Alternate visual styles of this chart include a choice of standard signal images (Rectangle, Circle, Up Triangle, or Down Triangle) or your own custom images.

Element name: Gauge.Number

Displays a value as number or text. The value automatically resizes to fit the container. The value may be displayed in different colors, typically indicating how the value compares to goals defined by the ranges.

Document availableElement name: Sparkline.Area, .Bar, .Line, .WinLoss

Sparklines are tiny charts appropriate for showing many trends at once, as a set of small timelines. They are typically drawn without axes or gridlines and are often shown inside data tables, alongside labels.

Document availableElement name: Text Cloud  

This chart creates unique visual depiction of the relative weightings of words and phrases. Greater weightings or frequencies can be denoted through color and font size.

Exporting Gauges as Images

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

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

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

Gallery of Deprecated Classic Charts

These Classic Charts are still supported and will continue to work, but their elements are no longer available in Studio. Use alternate elements as indicated.
 

Chart

Description

Element name: Animated Chart.Pie

Deprecated - use Chart Canvas instead.

This Flash-based chart "draws itself" when the page is displayed or refreshed. A pie chart (or circle graph) is a circular chart divided into sectors, illustrating relative magnitudes, frequencies, or percentages. It's named for its resemblance to a pie which has been sliced.

Alternate visual styles of this chart include exploded pie wedges and the Doughnut shape.

Element name: Animated Chart.Scatter

Deprecated - use Chart Canvas instead.

This Flash-based chart "draws itself" when the page is first displayed. A scatter chart uses Cartesian coordinates to display values for two variables from a dataset. The data is displayed as a collection of points, each having the value of one variable determining the position on the horizontal axis and the value of the other variable determining the position on the vertical axis.

Element name: Animated Chart.XY

Deprecated - use Chart Canvas instead.

This Flash-based chart "draws itself" when the page is first displayed and is capable of producing Line, Bar, and Area charts. Cartesian coordinates are used to display values for two variables from a dataset and plot them as points on the chart. These points are used to create the visual representation of the data.

Alternate visual styles of this chart include Bar, Area, and 3-Dimensional renderings.

Element name: Animated Gauge.Bar

Deprecated - use Gauge.Balloon Bar, Gauge.Bullet Bar, or Gauge.Bar instead.

This Flash-based chart "draws itself" when the page is first displayed. A single data value is plotted along a either a Horizontal Bar or a Vertical Thermometer scale, providing a quick at-a-glance indication of its value.

Element name: Animated Gauge.Needle

Deprecated - use Gauge.Angular instead.

This Flash-based chart "draws itself" when the page is first displayed. This chart resembles an automotive speedometer or tachometer and provides an eye-catching data visualization.

Alternate visual styles of this chart include Bevel and Lens.

Element name: Animated Gauge.Pyramid

Deprecated - use Chart Canvas instead.

This Flash-based chart "draws itself" when the page is first displayed. This chart provides a striking comparison of data, using the thickness of its layers to denote relative values.

An alternate visual style for this chart is the Funnel shape.

Element name: Chart.Heat Map

Deprecated - use Chart Canvas instead.

This element produces one of the most unusual charts found in Logi reporting products, with a unique arrangement of rectangles representing data and relationships using color and size. It produces an image-based chart that can be exported.

Element name: Chart.Pie

Deprecated - use Chart Canvas instead.

A pie chart (or circle graph) is a circular chart divided into sectors, illustrating relative magnitudes, frequencies, or percentages. It is named for its resemblance to a pie which has been sliced.

Alternate visual styles of this chart include 2-Dimensional, exploded pie wedges, and 2-D and 3-D doughnuts.

Element name: Chart.Polar

Deprecated - use Chart Canvas instead.

This a circular graph in which data is displayed in terms of values and angles. Also known as a "radar chart", this is an X-Y graph drawn on a circular grid, displaying value trends on the basis of angles.

Alternate visual styles of this chart include Area,Spline Area, Scatter, Bubble, Spline Line, Line, and Radar.

Element name: Chart.Scatter

Deprecated - use Chart Canvas instead.

A scatter chart uses Cartesian coordinates to display values for two variables from a dataset. The data is displayed as a collection of points, each having the value of one variable determining the position on the horizontal axis and the value of the other variable determining the position on the vertical axis.

Alternate visual styles of this chart includes point symbols that are circles, crosses, diamonds, triangles, or "X"s.

Element name: Chart.XY

Deprecated - use Chart Canvas instead.

This multi-faceted element can be used to product a wide variety of charts. Cartesian coordinates are used to display values for two variables from a dataset and plot them as points on the chart. In a Line chart, a line connects these points to create the visual representation of the data. Multiple datasets can be combined in one chart, using the same or different visual representations.

Alternate visual styles of this chart include Area, Bar, Spline, Stacked, and 3-Dimensional.

Element name: Gauge.Needle

Deprecated - use Gauge.Angular instead.

This chart resembles an automotive speedometer or tachometer and provides an eye-catching data visualization, plotting a single data value on its perimeter. Round, half-round, quarter-round, and rectangular formats are available.


Back to top