App Designer - Analytical Charts

Owned by Vaishnavi Sridhar (Unlicensed)
Last updated: Nov 12, 2018

Canvas Technology provides the ability to design interactive charts using simple configurations and JavaScript class. Apart from supporting a gallery of chart types, Canvas enables you to switch from one chart type to another dynamically. Canvas Framework uses Fusion Charts as its default chart library. However, you can use any other 3rd-party chart libraries.

At a high-level, Charts in Canvas Framework are of the following categories:

  • Single-Series Charts – These are simple charts that are rendered with a single y-axis. For example, you can plot the deposits for each month in a year using a single-series chart. A sample single-series chart is shown in the following screen shot:

  • Multi-Series Charts – These charts enable you to plot data for multiple datasets. For example, you can plot the deposits in each month for the last two years using a multi-series chart. A sample multi-series chart is shown in the following chart:

  • Proportional Charts - These Charts enable you to present the data as proportions. For example, in gauge chart, the data will be presented in different colored proportions.


Chart Types

The various chart types available in Canvas Framework are as follows:

Single-Series Charts

  1. Bar Chart – In a Bar Chart, the numeric values are plotted along the x-axis and the data plot labels are plotted along the y-axis.
  2. Column Chart – Column Chart is like an inverted Bar Chart, where the numeric values are plotted along the y-axis and the data plot labels are plotted along the x-axis.
  3. Line Chart – Line Chart is represented by a series of data points that are connected with a straight line. Line charts can be used to visualize data that changes over time.
  4. Area Chart – Area Chart is similar to Line Chart, but the difference is Area Chart fills the area between the line and the threshold.
  5. Stacked Area / Bar / Column Chart – Stacked charts are similar to multi-series charts, but the difference is that these charts plot datasets on top of each other, instead of the clustered side-by-side placement adopted by multi-series charts.


Multi-Series Charts

  1. MS Area Chart – Multi-Series Area Chart is similar to Area Chart, but capable of plotting multiple columns of data.
  2. MS Bar Chart – Multi-Series Bar is similar to Bar Chart, but capable of plotting multiple columns of data.
  3. MS Column Chart – Multi-Series Column Chart is similar to Column Chart, but capable of plotting multiple columns of data.
  4. MS Line Chart – Multi-Series Line Chart is similar to Line Chart, but capable of plotting multiple columns of data.
  5. MS-DY Combo Chart – Multi-Series Dual Y Combo Chart is combination chart similar to multi-series charts that enable you to plot multiple datasets on the same chart. The advantage with using combination charts is that you can also plot multiple chart types on the same chart. Multi-Series Dual Y Combo Chart can have dual y-axes.
  6. MS-SY Combo Chart – Multi-Series Single Y Combo Chart is combination chart similar to multi-series charts that enable you to plot multiple datasets on the same chart. The advantage with using combination charts is that you can also plot multiple chart types on the same chart. Multi-Series Single Y Combo Chart can have single y-axis.


Proportional Charts

  1. Angular Gauge – Angular gauges are similar to speedometer or the fuel gauge of a car. These types of charts use a radial scale to display the data range and a dial to indicate the data value.
  2. Linear Gauge – A linear gauge uses a horizontal scale to display the data range along with a fully configurable single or multiple data pointers to indicate the data value on the scale.
  3. Funnel- In a Funnel Chart, the data is streamlined. A funnel chart consists of multiple segments, each segment representing a data point. For example, if you use a funnel chart to display the procurement expenditure, the first funnel slice will represent the "Total Spend". Thereafter, each segment (like "Managed Spend", "Addressed Spend", "Negotiated Savings" etc.) will be represented by subsequent funnel slices, each slice filtering the data provided to the previous slice. The last slice bears the value that is the final result of the entire procedure (e.g., "Realized Savings" in this scenario).
  4. Pyramid - Pyramid Chart consists of various segments, each representing a data point. Pyramid Chart can be used for comparison of data, e.g. sales data of a product for a year. The height of the pyramid segment, with respect to the entire pyramid, depicts the value for a specific data point.
  5. Pie - Pie charts can be rotated by pressing the left mouse button, on a pie slice, and dragging the chart. Additionally, data plots can be sliced out to highlight important data.
  6. Doughnut -Doughnut Chart is a circular chart with a blank center that is divided into sectors where the arc length of each sector, its central angle, and its area are proportional to the quantity it represents. This chart has a blank center that can be used to render additional information about the chart.


Chart Dimensions (2D and 3D)

Charts can be rendered in 2D or 3D formats. However, for the following chart types the 2D/3D format is not applicable:

  • Angular Gauge
  • Area Chart
  • Line Chart
  • Linear Gauge
  • MS-DY Combo Chart
  • MS Area Chart
  • MS Line Chart
  • Stacked Area Chart

In the following sections, let's see configuration of a Single Series and Multi Series chart type in App Designer: