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
  • in reply to vineetl132

    Hello, you can try the following code

    googleComboChartField(
label: "",
chartColumnData: {
{
type: "string",
id: "Week",
rowDataKey: "Week",

},
{
type: "number",
id: "AppTransaction",
rowDataKey: "AppTransaction"
},
{
type: "string",
id: "htmlTooltip",
rowDataKey: "htmlTooltip",
role: "tooltip"
},
{
type: "number",
id: "Coin",
rowDataKey: "Coin"
},
{
type: "number",
id: "CreditCard",
rowDataKey: "CreditCard"
},
{
type: "number",
id: "Refund",
rowDataKey: "Refund"
},
{
type: "number",
id: "Total",
rowDataKey: "Total"
}
},
chartRowData: {
{
Week: "Jan 26, 20",
AppTransaction: 100,
Coin: 200,
CreditCard: 300,
Refund: 400,
Total: 1000
},
{
Week: "Feb 02, 20",
AppTransaction: 150,
Coin: 250,
CreditCard: 350,
Refund: 450,
Total: 1200
},
{
Week: "Feb 09, 20",
AppTransaction: 200,
Coin: 300,
CreditCard: 400,
Refund: 500,
Total: 1400
},
{
Week: "Feb 16, 20",
AppTransaction: 700,
Coin: 800,
CreditCard: 900,
Refund: 1000,
Total: 3400
},
{
Week: "Feb 23, 20",
AppTransaction: 1000,
Coin: 2000,
CreditCard: 3000,
Refund: 4000,
Total: 10000
}
},
chartOptions: {
vAxis: {
format: "$###,###",
title: "Rooms"
},
hAxis: {
title: "Weeks"
},
seriesType: "line",
series: {
1: {
labelInLegend: "Week"
},
2: {
labelInLegend: "AppTransaction"
},
3: {
labelInLegend: "Coin"
},
4: {
labelInLegend: "CreditCard"
},
5: {
labelInLegend: "Refund",
type: "bars",
color: "#D3D3D3"
},
6: {
label: "Total"
}
},
height: 500,
legend: {
position: "top",
textStyle: {
color: "blue",
fontSize: 20,
bold: true(),
italic: true(),
fontName: "Test",
alignment: "center"
}
},

}
)

  • Hello,

    We are using combochart for one report, But we are not able to view the legend name in the report.

    Can you pls let us know if we are missing anything here:

    googleComboChartField(
    label: "",
    chartColumnData: {
    {type: "string", id: "Week", rowDataKey:"Week", },
    {type: "number", id: "AppTransaction", rowDataKey:"AppTransaction"},
    {type: "string", id: "htmlTooltip", rowDataKey: "htmlTooltip", role: "tooltip"},
    {type: "number", id: "Coin", rowDataKey:"Coin" },
    {type: "number", id: "CreditCard", rowDataKey:"CreditCard"},
    {type: "number", id: "Refund", rowDataKey:"Refund"},
    {type: "number", id: "Total", rowDataKey:"Total"}
    },
    chartRowData: {
    {Week:"Jan 26, 20", AppTransaction:100, Coin:200, CreditCard: 300, Refund: 400, Total: 1000},
    {Week:"Feb 02, 20", AppTransaction:150, Coin:250, CreditCard: 350, Refund: 450, Total: 1200},
    {Week:"Feb 09, 20", AppTransaction:200, Coin:300, CreditCard: 400, Refund: 500, Total: 1400},
    {Week:"Feb 16, 20", AppTransaction:700, Coin:800, CreditCard: 900, Refund: 1000, Total: 3400},
    {Week:"Feb 23, 20", AppTransaction:1000, Coin:2000, CreditCard: 3000, Refund: 4000, Total: 10000}
    },
    chartOptions: {
    vAxis: {format: "$###,###", title: "Rooms"},
    hAxis: {title: "Weeks"},
    seriesType: "line",
    series: {5: {type: "bars", color: "#D3D3D3"}},
    height:500,

    legend:{position: "top", textStyle: {color: "blue", fontSize: 20, bold: true(), italic: true(), fontName: "Test", alignment: "center"}},

    }
    )

  • in reply to Jose H.

    Hi Jose,

    The straight answer to this question is NO. You cannot define the shapes dynamically instead you can either define shapes for all the data points of the chart or for all the data points of a series of that chart. The flexibility to define shapes at individual data point level is not really possible as of now.

    Thanks,

    Harshit

  • in reply to Chandra Sekhar Gattu

    Hi chandrasekharg0001,

    Yes, this is because Google dropped a new update for Google Charts recently and in that update, if you are having any blank key parameter in chartOptions, then, the plug-in will start giving you an error. And this is not only with the hAxis but any key which is present in chartOptions and does not have any value will cause error. Therefore I request you to please remove any unused parameters from chartOptions. 

    Thanks

    Harshit

  • We are using ComboChartField from this Plugin, Everything was working fine earlier, We are seeing an issue with the below Code. When i Comment hAxis:{} then the component is rendering without any error.

    googleComboChartField(
    label:"Chart",
    labelPosition: "ABOVE",
    height:"TALL",
    chartColumnData: {
    { type: "string", id: "Month", rowDataKey:"Month" },
    { type: "number", id: "Bolivia", rowDataKey:"Bolivia"},
    { type: "number", id: "Ecuador", rowDataKey:"Ecuador"},
    { type: "number", id: "PapuaNewGuinea", rowDataKey:"PapuaNewGuinea" },
    { type: "number", id: "Rwanda", rowDataKey:"Rwanda"},
    { type: "number", id: "Madagascar", rowDataKey:"Madagascar"},
    { type: "number", id: "Average", rowDataKey:"Average"}
    },
    chartRowData: {
    {Month:"2004/05",Bolivia:165,Ecuador:938,PapuaNewGuinea:522,Rwanda:998,Madagascar:450,Average:614.6},
    {Month:"2005/06", Bolivia:135,Ecuador:1120,PapuaNewGuinea:599,Rwanda:1268,Madagascar:288,Average:682},
    {Month:"2006/07", Bolivia:157, Ecuador:1167, PapuaNewGuinea:587,Rwanda:807,Madagascar:397,Average:623},
    {Month:"2007/08",Bolivia:139,Ecuador:1110,PapuaNewGuinea:615,Rwanda:968, Madagascar:215,Average:609.4},
    { Month:"2008/09", Bolivia:136,Ecuador:691,PapuaNewGuinea:629,Rwanda:1026,Madagascar:366,Average:569.6}
    },
    chartOptions: {
    title : "Monthly Coffee Production by Country",
    vAxis: {title: "Cups"},
    hAxis: {},
    seriesType: "bars",
    series: {5: {type: "line"}},
    height:500,
    annotations: {Bolivia: {style: "point"}}
    }
    )

  • Is there a way to set the shape dynamically? For example, if my value is 12 make make it a circle, if it's 14, make it a triangle and so on. I've seen examples of using multiple shapes on the chart, but they are always hardcoded

  • Hi,

    Can you please share an example on how to provide custom tooltip in a timeline chart in Appian interface object? What kind of dictionary has to be provided?

    Example given under the description for chartColumnData is not having the attribute details required for tooltip. Thanks in advance. 

    chartColumnData (List of Dictionary): (REQUIRED) Provide chart columns as a list of dictionary. Each specified column should be in the format {type: "DATA_TYPE",id: "COLUMN LABEL", rowDataKey:"COLUMN_DATA_KEY"}. rowDataKey should be an unique key. Columns in the Timeline chart: (1) Row label of type string, (2) OPTIONAL Bar Label of type string, (3) OPTIONAL Tooltip of type string i.e text to display when the user hovers over the data point associated with the row, (4) Start of type number or date, (5) End of type number or date. Example of chartColumnData- {{type: "string",id: "Position",rowDataKey: "position"},{type: "string",id: "Name",rowDataKey: "name"},{type: "date",id: "Start Time",rowDataKey: "start"},{type: "date",id: "End Time",rowDataKey: "end"}} 

    Regards.

    Hitesh

  • in reply to Jose H.

    Hi Jose,
    The row and column value obtained in onSelection of the chart can help you to navigate to the original data set that is clicked. The row value will tell you the index of the dictionary, and the column value will tell you the series. Other than this, the plug-in does not have anything for capturing the selection made on the chart.

    To answer your second question, the Google Charts does not provide any mark like Appian's Bar chart.

    Thanks

    -Harshit

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

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