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

Parents

maxs over 3 years ago

Also, we're having a hard time trying to make colors consistent in the timeline chart... for example: we created a timeline chart showing a list of projects and project milestones over a timeline (a different color represents a particular milestone such as New Project, Investigated, Started, Working, Completed). When the chart is rendered, the colors do not remain consistent for each milestone line by line... we would like for the color for each milestone to remain consistent. Do you have any tips on forcing the colors to remain consistent?
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
Harshit Bumb (Appyzie) over 3 years ago in reply to maxs

Hi maxs,
These two ways will help you to understand the logic behind coloring of items in Google Timeline Chart.
1) By defining an array of colors in chartOptions. That way, all the items in chartRowData will iterate through this list and color list will be looped.
2) This includes the first way and in addition to that, you can use colorByRowLabel in chartOptions -> timeline parameter to group all the items in a row together and define them one color.

I hope this answers your question.

Thanks,
Harshit
- Cancel
- Up 0 Down
- Reply
- More
- Cancel
J.J. over 3 years ago in reply to Harshit Bumb (Appyzie)

I haven't tried it in our chart yet, but I believe this will give us exactly what we need. Thank you so much for the quick response!
- Cancel
- Up 0 Down
- Reply
- More
- Cancel

Harshit Bumb (Appyzie) over 3 years ago in reply to J.J.

Hi J.J. & maxs,

Oh yes. That is certainly possible in this chart. All you have to do is define a new parameter in chartColumnData i.e.

{
    type: "string",
    id: "style",
    rowDataKey: "style",
    role: "style"
}

And now at the time of iterating through the chartRowData dictionary, use this new "style" parameter to define the color of every individual bar. So now you can build a logic around it using if conditions to assign the same color to all the similar phases.

P.s. This would override any other color configuration made in the chart options.

Please find an example attached below for the same.

googleTimelineChartField(
  chartColumnData: {
    {
      type: "string",
      id: "Name",
      rowDataKey: "name"
    },
    {
      type: "string",
      id: "Title",
      rowDataKey: "title"
    },
    {
      type: "string",
      id: "style",
      rowDataKey: "style",
      role: "style"
    },
    {
      type: "date",
      id: "Start Time",
      rowDataKey: "start"
    },
    {
      type: "date",
      id: "End Time",
      rowDataKey: "end"
    }
  },
  chartRowData: a!forEach(
    items: {
      {
        name: "201",
        start: datetime(
          2019,
          1,
          1,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          6,
          00,
          00,
          00
        ),
        title: "Phase 1",
        
      },
      {
        name: "201",
        start: datetime(
          2019,
          1,
          9,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          14,
          00,
          00,
          00
        ),
        title: "Phase 2",
        
      },
      {
        name: "202",
        start: datetime(
          2019,
          1,
          4,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          14,
          00,
          00,
          00
        ),
        title: "Phase 1",
        
      },
      {
        name: "202",
        start: datetime(
          2019,
          1,
          19,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          24,
          00,
          00,
          00
        ),
        title: "Phase 2",
        
      },
      {
        name: "203",
        start: datetime(
          2019,
          1,
          2,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          6,
          00,
          00,
          00
        ),
        title: "Phase 1",
        
      },
      {
        name: "203",
        start: datetime(
          2019,
          1,
          8,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          16,
          00,
          00,
          00
        ),
        title: "Phase 2"
      },
      {
        name: "203",
        start: datetime(
          2019,
          1,
          17,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          27,
          00,
          00,
          00
        ),
        title: "Phase 3"
      },
      {
        name: "205",
        start: datetime(
          2019,
          1,
          2,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          4,
          00,
          00,
          00
        ),
        title: "Phase 1"
      },
      {
        name: "205",
        start: datetime(
          2019,
          1,
          5,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          15,
          00,
          00,
          00
        ),
        title: "Phase 2",
        
      },
      {
        name: "205",
        start: datetime(
          2019,
          1,
          16,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          22,
          00,
          00,
          00
        ),
        title: "Phase 3"
      },
      {
        name: "205",
        start: datetime(
          2019,
          1,
          24,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          30,
          00,
          00,
          00
        ),
        title: "Phase 4"
      },
      {
        name: "206",
        start: datetime(
          2019,
          1,
          3,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          10,
          00,
          00,
          00
        ),
        title: "Phase 1"
      },
      {
        name: "206",
        start: datetime(
          2019,
          1,
          14,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          24,
          00,
          00,
          00
        ),
        title: "Phase 2",
        
      },
      {
        name: "207",
        start: datetime(
          2019,
          1,
          10,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          28,
          00,
          00,
          00
        ),
        title: "Phase 1",
        
      },
      {
        name: "208",
        start: datetime(
          2019,
          1,
          1,
          02,
          00,
          00
        ),
        end: datetime(
          2019,
          1,
          15,
          00,
          00,
          00
        ),
        title: "Phase 1",
        
      },
      
    },
    expression: {
      name: fv!item.name,
      start: fv!item.start,
      end: fv!item.end,
      title: fv!item.title,
      style: if(
        fv!item.title = "Phase 1",
        "#26A69A",
        if(
          fv!item.title = "Phase 2",
          "#6AC239",
          if(
            fv!item.title = "Phase 3",
            "#C96228",
            if(
              fv!item.title = "Phase 4",
              "#FCC540",
              "#fff"
            )
          )
        )
      )
    }
  ),
  chartOptions: {
    height: 380
  }
)

I hope this answers your question.

Thanks.

Comment