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:
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:
2019 AppMarket Award Winner - Best Use of the Integration SDK
GeoChart has stopped working. I guess some libs got updated and the calls are not valid anymore.
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!
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 } )
Hi ,
Please see J.J. reply comment, this is the issue we are trying to resolve. Can you offer any advice? Thank you for your help, we really enjoy this plug-in!
In our chart each row has a different number of columns depending on whether each phase of a project has dates entered for the phase. Each row represents a project and each column a phase of the project.e.g. Project A has Phases: 1,2,3,4,5 Project B has 2,3,4 and Project C has 1,2,3Is there a way or plans for a way to make all 1's the same color, all 2's the same color, etc.?
The iteration of colors in charOptions isn't working to keep each phase it's own color since each row has a different number of columns.
Please advise, thank you!
The native Appian Charts are extremely basic and do not offer the styling and formatting configuration that the Google Charts provide. The Appian Charts also consume a lot of screen real estate compared to the Google Charts. For example: The Google Charts Table chart allows for full background color styling for individual cells and header row where the Appian Table Chart does not.
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
Hi maxs,You can create these charts using Appian's native capabilities. I was wondering about why you require these charts in Google Charts Component?
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?
Will you be adding additional charts to the plugin? EX: Table Charts, Guages, etc?