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

  • a!localVariables(
    local!download: false,
    {
    a!columnsLayout(
    columns: {
    a!columnLayout(
    contents: {
    googleBubbleChartField(
    label: "Pie Chart",
    labelPosition: "ADJACENT",
    chartColumnData: {
    { type: "string", id: "ID", rowDataKey: "id" },
    {
    type: "number",
    id: "Life Expectancy",
    rowDataKey: "lifeExpectancy"
    },
    {
    type: "number",
    id: "Fertility Rate",
    rowDataKey: "fertilityRate"
    },
    {
    type: "string",
    id: "Region",
    rowDataKey: "region"
    },
    {
    type: "number",
    id: "Population",
    rowDataKey: "population"
    }
    },
    chartRowData: {
    {
    id: "CAN",
    lifeExpectancy: 80.66,
    fertilityRate: 1.67,
    region: "North America",
    population: 33739900
    },
    {
    id: "DEU",
    lifeExpectancy: 79.84,
    fertilityRate: 1.36,
    region: "Europe",
    population: 81902307
    },
    {
    id: "DNK",
    lifeExpectancy: 78.6,
    fertilityRate: 1.84,
    region: "Europe",
    population: 5523095
    },

    },
    chartOptions: {
    hAxis: { title: "Life Expectancy" },
    vAxis: { title: "Fertility Rate" },
    bubble: {
    textStyle: {
    fontSize: 12,
    fontName: "Times-Roman",
    color: "green",
    bold: true,
    italic: true
    }
    }
    },
    exportChartType: "PDF",
    exportChartValue: local!download,
    exportChartSaveInto: local!download
    ),
    googleBubbleChartField(
    label: "Pie Chart",
    labelPosition: "ADJACENT",
    chartColumnData: {
    { type: "string", id: "ID", rowDataKey: "id" },
    {
    type: "number",
    id: "Life Expectancy",
    rowDataKey: "lifeExpectancy"
    },
    {
    type: "number",
    id: "Fertility Rate",
    rowDataKey: "fertilityRate"
    },
    {
    type: "string",
    id: "Region",
    rowDataKey: "region"
    },
    {
    type: "number",
    id: "Population",
    rowDataKey: "population"
    }
    },
    chartRowData: {
    {
    id: "CAN",
    lifeExpectancy: 80.66,
    fertilityRate: 1.67,
    region: "North America",
    population: 33739900
    },
    {
    id: "DEU",
    lifeExpectancy: 79.84,
    fertilityRate: 1.36,
    region: "Europe",
    population: 81902307
    },
    {
    id: "DNK",
    lifeExpectancy: 78.6,
    fertilityRate: 1.84,
    region: "Europe",
    population: 5523095
    },

    },
    chartOptions: {
    hAxis: { title: "Life Expectancy" },
    vAxis: { title: "Fertility Rate" },
    bubble: {
    textStyle: {
    fontSize: 12,
    fontName: "Times-Roman",
    color: "green",
    bold: true,
    italic: true
    }
    }
    },
    exportChartType: "PDF",
    exportChartValue: local!download,
    exportChartSaveInto: local!download
    ),

    }
    )
    }
    ),
    a!buttonLayout(
    primaryButtons: {
    a!buttonWidget(
    label: "download",
    submit: true(),
    saveInto: { a!save(local!download, true()), }
    )
    }
    ),

    }
    )

  • how can i download multiple charts in single image , there is any solution 

  • Release Notes - v1.3.2
    • Vulnerability fixes

  • Hi, is this plugin available and up to date for Appian 21.2 & 21.3 as well? Thanks

  • Does the data used on these charts plugins some way used by google? or does google access to the data on charts

  • Hi, Thanks for the plugin, the "Markers" display mode is not working for us in Google geo chart, the "region" works though. Anything that I could be missing?

  • in reply to PhilB

    Hi,

    Timeline chart works fine for us. It looks like we will need the code snippet that you're using in order to help you with the problem.

    Thanks

  • I'm using the timeline chart from this component, and I'm seeing a lot of 403 Forbidden responses in the browser console. The component appears to be doing a POST to https://<environment>/suite/rest/a/logging/latest/csp/report, with a JSON body, but it's evidently not permitted for some reason. Any thoughts as to what the issue might be?

    I'm using Appian 20.3 on Cloud and have installed the latest version of the component (1.3.1).

  • in reply to mikec

    Hi mikec,

    Thanks for reaching out. Most of the charts in the plug-in are interactive and can perform same operations as that of Appian's saveInto. Meaning, you can perform any save operation. Also talking about the download ability, yes it is present in the component. Still if you are not able to download the chart in any format, that is probably because the google chrome is suppressing the download. In the current implementation, you won't be able to use this functionality because google has suspended the way of downloading a file which we were using. I am adding a screenshot below for you reference.

    Thanks,
    Harshit

  • Are any of the charts interactive where if you clicked for example a slice of a pie it can retrieve the data for that slice?  Return it in a list view?  Also, I see in some of the charts an ability to download as PDF. Is that in this smart service as well?  Thanks!!

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