Last updated on July 12, 2019

Create Data Visualization card

This article provides the instructions to creating data visualization type cards. Data visualization type cards such as the Progress bar and Donut themes allow you to display customized progress charts, while the Line theme allows you to import data from external spreadsheets and display customized graphs.

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


Important

  • 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.
  • For more information on the basic functionality of creating a card and types of available cards, please refer to the Create a card article.

Create 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.


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 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 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.

    • 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.