Information
  • Author: Xebia
  • Type: Plug-in (Component)
  • Support: This plug-in or utility is not supported by the author. The content is free to use with a licensed product, but it is made available as-is and Community supported.
  • Industry: All Industries
  • Compatible Version(s): 20.1+, 22.1
  • First Released:
  • Last Updated:
  • Cost: Free
Share
Home » AppMarket » Google Charts Component

Google Charts Component

Overview

This Component Plug-in provides the capability to display interactive charts in Appian using Google Charts.  It offers support for the following types of charts:

  • Bubble
    • Used to visualize a data set with two to four dimensions.  The first two dimensions are visualized as coordinates, the third as color and the fourth as size.
  • Calendar
    • Used to view the events in a calendar year at a glance. Specify which day, weeks or months are different, with an info window providing the additional information for that event.
  • Candlestick
    • Used to show an opening and closing value overlaid on top of a total variance. Candlestick charts are often used to show stock value behavior.
  • Combo
    • Render each series as a different marker type from the following list: line, area, bars, candlesticks, and stepped area.  It is useful to compare multiple values across one axis.
    • Example use-case: Compare deal amount vs. expected revenue by stage
  • Gantt
    • Illustrates the breakdown of a project into its component tasks
    • Helps you to identify all dependencies across all tasks and events in a single view thus helping you to identify the risks and prioritize accordingly.
  • Pie
    • Displays data in a circular graph where each slice represents a portion of the whole
  • Sankey Diagram
    • Displays the flow between different interconnected entities
    • Example use-case: Represent how the exports from different countries are imported to other countries.
  • Timeline
    • Depict how a set of resources are used over time
    • Example use-case: Represent the booking of a conference room on the timeline chart
  • Tree Map
    • Display the hierarchy in map represented by color rectangle box with the area of rectangle box indicating the scale of the measured value.
    • Example use-case: Analyzing sales with multiple categories (Asia, Europe, North America, South America, etc.) across multiple subcategories (India, China, Italy, France, Germany, USA, Mexico, etc.)
  • Word Tree
    • Depicts multiple parallel sequences of words
  • Geo
    • Map of a country, continent, or a region with areas
  • Diff
    • Highlight the differences between two charts with comparable data
  • Scatter
    • Plot points on a graph
  • Histogram
    • Groups numeric data into bins, displaying the bins as segmented columns.

Key Features & Functionality

These charts work on all Appian user interfaces and with the Appian mobile application. They are easy to configure and a sample application is provided as part of the download. The plug-in can be used to set up to provide interactive charts with drill-down capabilities and allow the event context to pass into any SAIL component(s) on the same or a different interface.

How to use the component:

  • For each supported chart type, pass the columns configuration and the row data as a dictionary to the component. For the columns supported by each Google chart, please see the documentation of the respective charts at https://developers.google.com/chart/interactive/docs/
  • The chart row data is passed as a dictionary with rowDataKey in column configuration representing the data key name. Please see the attached component examples in the sampe application of the chart to understand how this works.

2019 AppMarket Award Winner - Best Use of the Integration SDK

Anonymous

  • The charts have a "onSelection" option to save the selection from the chart. However, when testing it on the combochart it returns the row and column values. It's there a way to save the actual set of data selected? The original google charts api contains a getSelection() function, does this plugin have anything similar to return the data subset selected?

    Also, the original Appian bar charts contain little marks next to the series to indicate where the text is aligned to each bar. Is there a way to activate this on this plugin?

  • in reply to yogeshs5060

    Additionally, Stacked Bar and Column charts are already available as Appian OOB that's why we have avoided adding redundant charts.
    The purpose of making this google chart plugin is to extend already available charting capability in Appian. 

  • in reply to Jose H.

    Hi  Yes you can create stacked bar/column charts by our google combo chart field where you have to just pass the following configuration to make it stacked - 

    chartOptions: {isStacked:true}

  • is there a way to create stacked bar/column charts with this? I've started playing with it but it seems to have many fancy options, except the main 2 which are bar charts and column charts. Is there a way to simulate a stacked bar/column chart with the given options?

  • in reply to maxs

    Hi just to correct the what said - We have used Visualizations API to render the chart.

  • in reply to akhileshn3539

    The Google Chart API has two different implementations (Chart API and Visualizations API).  Are you saying you are using "Chart API"?  If so, then both the data and the chart configuration options are sent in the URL to Google, which they store on their servers for two weeks.  That would not be acceptable for clients with sensitive data.  Are you sure that this is the method you are using in this plugin?  Is chart data sent in the URL to Google with this plugin?

    Here is the explanation from Google located in the Google Charts API FAQ Support here: https://developers.google.com/chart/interactive/faq

    What is the difference between the Google Chart API and the Google Visualization API?

    The Chart API provides a simple way to create image charts of various kinds by sending a formatted URL that includes both the data and chart configuration options to a Google server. The Chart API includes a closed set of charts with various options. The Chart API datasets are limited to the size of a URL (roughly 2K).

    The Visualization API provides a way to connect charts and data sources over the web and to publish them:

    • The Visualization API provides a Javascript API to access charts.
    • Its gallery of charts includes Google-created charts, but is also open to any third party to create their own Visualization API-compliant visualizations.
    • Visualization API charts and charts can be anything that can be rendered by a browser. This includes images, Javascript, vector-graphics, Flash, etc.
    • A considerable number of Chart API charts are accessible through the Visualization API, although some of their configuration options may not be available.
    • The API also provides a documented wire protocol and a way for anyone to expose their data sources to any of the APIs visualizations.
    • The API has a defined event model that allows charts to throw and receive events and thus communicate with their host page and/or other charts on the page.

    Is Google logging all my chart data?

    The chart data included in the HTTP request is saved in temporary logs for no longer than two weeks for internal testing and debugging purposes. Of course you should understand that if your chart appears in an image tag on a public webpage, it could be crawled.

  • in reply to maxs

    We are using Google Chart API. Regarding the data privacy policies of a chart, please find the same at Google charts documentation site of the respective chart.

  • Is this using the Google Chart API or the Visualisation API?  There are two different flavors.  The Chart API sends your data to Google to render the chart and return a result.  The Visualisation API renders in the browser and does not send data to Google.  In your plugin, is a the library installed and available to be rendered in the browser?

  • in reply to maheshp460

    No special deployment steps are required. Just place the component file in the standard plugin directory (<APPIAN_HOME>/_admin/plugins/).

    Note: Please make sure you have static and dynamic content URL configured to use the custom component.

© 2024 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.