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
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"}},
})
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
thanks Harshit.
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
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
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.
-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?