Last updated on August 26, 2019

Create Data Visualization (graphs & charts) card

This article provides the instructions to creating a Data Visualization card, which allows you to display customized charts and graphs, as follows:

  • Line - data changes over the same period of time for more than one series.
  • Donut - present data as pie or donut chart, where a circle is divided into sectors.
  • Bar - present categorical data in rectangular bars with heights or lengths proportional to the values that they represent.
  • Progress Bar - progress of a goal such as monetary value, time, or achievements in a bar chart.
  • Progress Donut - progress of a goal such as monetary value, time, or achievements in a pie chart.

The Data Visualization card is an Appspace supported card, which is officially created and periodically updated with new templates and features by Appspace.

Important

  • Please refer to our An Introduction to Cards and Channels guide for an in-depth introduction to the types of cards that are ideal for your signage solutions.


  • Cards are only supported on devices with the Appspace App. To ensure your device is compatible, please refer to the Supported Card Types section in the Compare device media player capabilities article.


  • Legacy devices are not supported.


Create Card

Important

  • For more information on the basic functionality of creating a card, please refer to the Create a card article.


  • If you would like to set a corporate branding theme to your cards, please refer to this article prior to creating a card: Create a card theme

Follow the instructions below to create and configure a Data Visualization card:

  1. On the Appspace console, click the Quick Actions menu on the top right and select Create Card, and proceed to step 3 below.

    Or click Library from the Appspace Menu navigation bar on the left, and proceed to step 2 below.


  2. Select the desired folder in the library, and click the ADD button, and select Create Card.


  3. Select Data Visualization from the Filter by template menu, and continue to configure the card as per the on-screen instructions.

    For detailed configuration information, click the links below.

    • Progress Bar - Use a progress bar chart to show the progress of a goal such as monetary value, time, or achievements.
    • Progress Donut - Use a progress donut chart to show the progress of a goal such as monetary value, time, or achievements.
    • Line - Line chart can also be used to compare changes over the same period of time for more than one series.
    • Donut - A pie or donut chart is a type of graph in which a circle is divided into sectors that each represent a proportion of the whole.
    • Bar - A bar chart represents categorical data with rectangular bars with heights or lengths proportional to the values that they represent.


Progress Bar

The Progress Bar chart can be used to display the current progress of a target goal, where the goal may be of monetary, time, or the achievement percentage values.

  1. Enter in the Header, Headline, Key Result, and Notes. The text editor can be used to customize the text styles.

    The Headline and Summary positions can be customized with the following options:

    • Top
    • Middle
    • Bottom
    • 50-50 Middle


    The Key Result can be customized to display the following, by entering the respective codes below:

    • Percentage = {model.progress.percent}
    • Remaining = {model.progress.remaining}
    • Goal = {model.progress.goal}
    • Current = {model.progress.current}

  2. Proceed to enter in the data for the progress bar:

    • Goal Label - Enter in the label or title of the target goal.
    • Current Label - Enter in the label or title of the current goal.
    • Remaining Label - Enter in the label or title of the remaining goal.
    • Current - Enter in the monetary, time, or percentage value of the current goal.
    • Goal - Enter in the monetary, time, or percentage value of the target goal.

  3. The following card customization can be done:

    • Select the Layout.

    • Select the Chart Options:

      • Show percentage
      • Show current
      • Show goal
      • Show animation

    • Customize Primary Color, Background color or image.

    • Upload a Logo.


  4. Click Next.

  5. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags and even upload a custom thumbnail for the content.

  6. Click the Save button.

  7. You may now create a playlist channel and add the card to it.


Progress Donut

The Donut chart can be used to display the current progress of a target goal, where the goal may be of monetary, time, or the achievement percentage values.

  1. Enter in the Header, Headline, Key Result, and Notes. The Text Editor can be used to customize the text styles.

    The Headline and Summary positions can be customized with the following options:

    • Top
    • Middle
    • Bottom
    • 50-50 Middle


    The Key Result can be customized to display the following, by entering the respective codes below:

    • Percentage = {model.progress.percent}
    • Remaining = {model.progress.remaining}
    • Goal = {model.progress.goal}
    • Current = {model.progress.current}

  2. Proceed to enter in the data for the progress bar:

    • Goal Label - Enter in the label or title of the target goal.
    • Current Label - Enter in the label or title of the current goal.
    • Remaining Label - Enter in the label or title of the remaining goal.
    • Current - Enter in the monetary, time, or percentage value of the current goal.
    • Goal - Enter in the monetary, time, or percentage value of the target goal.

  3. The following card customization options can be done:

    • Select the Layout.

    • Select the Chart Options:

      • Show percentage
      • Show current
      • Show goal
      • Show animation

    • Customize Primary Color, Background color or image.

    • Upload a Logo.


  4. Click Next.

  5. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags and even upload a custom thumbnail for the content.

  6. Click the Save button.

  7. You may now create a playlist channel and add the card to it.


Line

The Line chart can be used to compare changes over the same period of time for more than one series, or plot a graph from statistical data.

  1. Enter in the Header, Headline, Key Result, and Notes. The Text Editor can be used to customize the text styles.

    The Headline and Summary positions can be customized with the following options:

    • Top
    • Middle
    • Bottom
    • 50-50 Middle


  2. Click the Import Data button, and populate the cards table using one of the following methods:

    • Manually enter the data.
    • Copy and paste data from an external table.
    • Import data from an Excel spreadsheet (.xlsx).

    Data populated in rows represent the X Axis, and data populated in columns represent the Y Axis.


  3. Click Save once done.

  4. The following card customization options can be done:

    • Select the Layout.

    • Select the Chart Options:

      • Show as line
      • Show axis line
      • Show point
      • Show point labels
      • Show vertical labels
      • Show horizontal labels
      • Show vertical gridlines
      • Show horizontal gridlines
      • Enable animation

    • Customize Primary Color, Background color or image.

    • Upload a Logo.

  5. Click Next.

  6. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags and even upload a custom thumbnail for the content.

  7. Click the Save button.

  8. You may now create a playlist channel and add the card to it.


Donut

The donut or pie chart is a type of graph in which a circle is divided into sectors that each represent a proportion of the whole.

  1. Enter in the Header, Headline, and Notes. The Text Editor can be used to customize the text styles.

    The Notes position can be customized with the following options:

    • Top
    • Middle
    • Bottom


  2. Click the Import Data button, and populate the cards table using one of the following methods:

    • Manually enter the data.
    • Copy and paste data from an external table.
    • Import data from an Excel spreadsheet (.xlsx).

    Data populated in the first column represent the data series, and the second column represent the values. The maximum number of rows that can be added to the data series is 8.


  3. The following card customization options can be done:

    • Select the Layout.

    • Select the Chart Options:

      • Show as pie
      • Show legend
      • Show labels
      • Show labels as percentage
      • Show middle text
      • Enable animation
      • Use custom color palette - Allows you to select the color of each slice of the chart.

    • Label Style.

    • Middle Text Style.

    • Customize Custom Color Palette, Background color or image.

    • Upload a Logo.


  4. Click Next.

  5. Fill in the Title, as this is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags and even upload a custom thumbnail for the content.

  6. Click the Save button.

  7. You may now create a playlist channel and add the card to it.


Bar

A bar chart represents categorical data with rectangular bars with heights or lengths proportional to the values that they represent.

  1. Enter in the Header, Headline, and Notes. The text editor can be used to customize the text styles.

    The position of the Notes can be customized with the following options:

    • Top
    • Middle
    • Bottom


  2. Click the Import Data button, and populate the table using one of the following methods:

    • Manually enter the data.
    • Copy and paste data from an external table.
    • Import data from an Excel spreadsheet (.xlsx).

    Data populated in the first column represents the data series, and the second column represents the value. The maximum number of rows that can be added to the data series is 8.


  3. The following card customization options can be done:

    • Select the Layout.

    • Select the Chart Options:

      • Show as horizontal bar
      • Show legend
      • Show axis lines
      • Show vertical labels
      • Show horizontal labels
      • Show vertical gridlines
      • Show horizontal gridlines
      • Enable animation
      • Use custom color palette - Allows you to select the color of each slice of the chart.

    • Label style.

    • Customize Custom Color Palette, Background color or image.

    • Upload a Logo.


  4. Click Next.

  5. Fill in the Title, which is a mandatory field. Optionally, you may fill in the Article, Caption, Content Expiry, Content Tags and even upload a custom thumbnail for the content.

  6. Click the Save button.

  7. You may now create a playlist channel and add the card to it.