Agencies
Services
Graphs
Graphs is a component for displaying data in different formats. The generated graphs come from CSV files and can display in the following formats: Area, Bar, Column, Donut, Line, Pie, and Point (Scatter).
The Graphs allows you to author different types of graphs using data from a csv file.
Configuring the Basic tab
- Data Source File: Select a CSV file in the DAM to use as the data source. Example CSV file setups are displayed with their respective graphs below.
- Graph Type: Choose the graph format you want. There are 7 graph types available to choose from: Area, Bar, Column, Donut, Line, Pie, and Point.
- X label: Set the displayed X label for the graph.
- Y label: Set the displayed Y label for the graph.
- Description: Provide a detailed explanation of the graph’s purpose and key insights. This content is required and is used by screen readers to convey the graph information to users who cannot see it.
- Display description for screen reader only: When checked, the description field is hidden from view, but still reads out via scree readers.
- How do you wish to display this graph's data in a table?: Determine how the data table is shown for users.
- For screen readers only
- Button toggles view of data table
- Data table shows - no toggle button
- Toggle Button Text - Show/Hide Table: Set the displayed label for the Show Table and Hide Table buttons, respectively.
*The Data Tables in the Graph component allows users to export data to a CSV file via an "Export to CSV" button. Unlike other components that can export data; there is no enable/disable option for this functionality in the component.
Examples
Area Chart
Vertical Bar Chart
Area Chart CSV File Structure
| Fruits (x) | Value (y) | Name |
|---|---|---|
| Apples, Oranges, Bananas, Pineapples | 10,15,13,10 | Resources |
| Apples, Oranges, Bananas, Pineapples | 9,10,10,5 | Other Corporate |
| Apples, Oranges, Bananas, Pineapples | 7,9,7,4 | Sales |
| Apples, Oranges, Bananas, Pineapples | 5,6,5,1 | Manufacturing |
Bar Chart
Vertical Bar Chart
Bar Chart CSV File Structure
| Year (x) | Value (y) | Name |
|---|---|---|
| 2011, 2012, 2013, 2014 | 23, 20, 8, 16 | Resources |
| 2011, 2012, 2013, 2014 | 13, 10, 28, 15 | Sales |
| 2011, 2012, 2013, 2014 | 2, 10, 18, 10 | Manufacturing |
| 2011, 2012, 2013, 2014 | 2, 20, 18, 10 | Other Departments |
Column
This is a sample description of the bar graph.
Column Chart CSV File Structure
| Values (x) | Section (y) | Fruit (name) |
|---|---|---|
| 300, 100, 300, 30 | Resources, Sales, Other Departments, Manufacturing | Apples |
| 212, 212, 100, 200 | Resources, Sales, Other Departments, Manufacturing | Oranges |
| 150, 150, 10, 100 | Resources, Sales, Other Departments, Manufacturing | Bananas |
| 50, 150, 52, 100 | Resources, Sales, Other Departments, Manufacturing | Pineapples |
Donut (Multi)
This is a sample description of the donut graph.
Donut Chart CSV File Structure
| Fruits (x) | Value (y) | Name |
|---|---|---|
| Apples, Oranges, Bananas, Pineapples | 10,15,13,10 | Resources |
| Apples, Oranges, Bananas, Pineapples | 20,25,13,1 | Sales |
| Apples, Oranges, Bananas, Pineapples | 10,5,3,12 | Manufacturing |
| Apples, Oranges, Bananas, Pineapples | 30,15,23,13 | Other Departments |
Line
This is a sample description of the line chart.
Line Chart CSV File Structure
| Fruits (x) | Value (y) | Section (name) |
|---|---|---|
| Apples, Oranges, Bananas, Pineapples | 10,15,13,17 | Resources |
| Apples, Oranges, Bananas, Pineapples | 0,5,13,1 | Other Corporate |
| Apples, Oranges, Bananas, Pineapples | 5,15,1,10 | Sales |
| Apples, Oranges, Bananas, Pineapples | 10,10,13,10 | Manufacturing |
Pie Chart
This is a sample description of the pie chart.
Pie Chart CSV File Structure
| Section (x) | Value (y) | Name |
|---|---|---|
| Resources, Other Corporate, Sales, Manufacturing, Other Department, Accessibility Concern, HR and Administrations | 10, 15, 13, 10, 24 |
Point (Scatter) Chart
This is a sample description of the pie chart.
Point (Scatter) Chart CSV File Structure
| Section (x) | Value (y) | Name |
|---|---|---|
| Apples, Oranges, Bananas, Pineapples | 10, 15, 13, 17 | Resources |
| Apples, Oranges, Bananas, Pineapples | 0, 5, 13, 1 | Other Corporate |
| Apples, Oranges, Bananas, Pineapples | 5, 15, 1, 10 | Sales |
| Apples, Oranges, Bananas, Pineapples | 10, 10, 13, 10 | Manufacturing |