How to use Graph widgets in Connect.
There are multiple graph widgets in connect that can display your data. Follow this link to learn more about Managing your Data.
Column Graph- Shows the corresponding values to multiple items in a vertical format. Best for data sets that have multiple unique items or comparison of a single item over time.
Bar Graph- Shows a stack of values for multiple items in a horizontal format. Best for data sets that have multiple unique items or comparison of a single item over time.
Line Graph- Shows a line of data points for a single or multiple items generally over a period of time. Best for presenting the trajectory of a single item over time.
Pie Graph- Shows each item as a value or percentage as a part of a whole. Best for presenting data sets with items that comprise a whole value.
Stacked Graph- or stacked bar graph, shows each item as a value or percentage as part of a whole. Best for presenting data sets with items that comprise a whole value.
Add your desired graph widget to the App Builder canvas by clicking on the Widgets option from the left menu in app builder. Next click on the widget name to add the widget to your app canvas.
All graph widgets currently require a data connection. Click on the Data label in the right hand properties panel then select Connect to Data Source.
Select an existing data connection or create a new data connection this includes creating a manual data table using the data designer. Your data will need at least one column of numerical data. Follow this link to learn more about Managing your Data.
Now that your data is connected you can choose what data the graph is showing in the app. Connect will try to automatically assign what values make sense for the graph.
In this example changes can be made in the right-hand properties menu to X and Y Axis in a column graph and the graph will show different information.
Many graph widgets have the option of setting the minimum and maximum values and number of ticks for the best appearance of your graph.
Adjust the appearance of the graph from the properties menu on the right.
For example, with the bar graph widget, click on the Bar label. Click and drag on the Bar Thickness slider left to decrease the thickness of all bars in the graph or drag right to increase the thickness.
Some graph widget properties can be shown or hidden. Click to toggle Display Values on, to show the values of each item in the graph. For Stacked Graphs and Pi Graphs the values can be shown as percentages.
When applicable you can choose to use one color or toggle Individual Colors to give each column,or row a unique color.
Individual colors can be changed by clicking the corresponding swatch. This will open the color picker where you can choose from a list of swatches or enter hex values.
Click on the Axis label in the right-hand properties menu to adjust the style of the graphs that have an axis.
Here you can change the font, font style and padding of the titles of the graph. Titles are on the outermost vertical and horizontal axis of the graph in this case.
You can also adjust the font and font style of the Labels that are listed under each column.
Change the Axis Thickness and color properties by clicking and dragging the slider below the Axis thickness label left and right.
Toggle Tilt X Axis Labels on if your labels are lengthy, so they are easier to read.
You also can set the Background to be visible, a specific color or display a grid.
In the line graph widget properties click on the Plotline label. Here you can change the look of your plotlines in a similar way to changes to a graph axis.
Check out what Repeaters in Connect can do!
Learn more about Connecting your Data
Add in Shapes and Text or Photos in Connect to customize your app design.
Support available between 9:00am and 5:00pm (CST-06:00), Monday through Friday
