Use the Charts app to create interactive Awesome Table charts and dashboards to help you analyze and drill down into your data.
2
What is the Charts app?
The Charts app lets you create:
- one-dimensional charts, from a single column in your spreadsheet: for example, to create survey summaries or consumer research
- two-dimensional charts, from multiple columns in your spreadsheet: for example, to display business KPIs such as revenue and profits
Create charts with the Charts app
In the Awesome Table editor:
- In the sidebar, open the App configuration section.
- Select Charts under Visualization type.
- Click Update app to apply your changes. Your data is presented as a chart.
Choosing the Charts app in the Awesome Table editor
By default, the Charts app applies the best chart to display the data from your spreadsheet, depending on the:
- datatype
- number of rows (which may be affected by a filter)
To create customized analytics dashboards, select from various keywords to define the type of chart and then apply Awesome Table filters so you can further drill down and analyze your data.
Datasheet containing keywords for charts
Learn more about keywords.
Keywords for one-dimensional charts
The following keywords display your data as distribution charts. These charts are based on the number of occurrences of identical values in the column in which you apply the keyword.
These charts are used to display data with a simple configuration (one column only). For example, to display a DonutChart chart, Awesome Table counts the number of occurrences of values displayed in your column.
| Keyword | Description |
|---|---|
|
This keyword is applied automatically on all columns with dates in the Charts app. You don't need to add this keyword chart to your spreadsheet. This is the only keyword available for dates. |
|
|
Displays the sum of all numbers in a column. |
|
|
Displays data as a pie chart. The chart is based on the number of occurrences of identical values in a column. |
|
|
Displays a pie chart with a hole in the center. The chart is based on the number of occurrences of identical values in a column. |
|
|
Displays data as a three-dimensional pie chart. The chart is based on the number of occurrences of identical values in a column. |
|
|
Displays responses as a cloud of words. The size of the words is proportional to the number of occurrences in the column. |
|
|
Displays all the results based on the number of occurrences. |
|
| BITopResults |
Displays a table with the top 15 values ranked by the number of occurrences. |
Examples of one-dimensional charts
Below is an example of a dashboard showing the handling of support tickets.
The table below shows the keywords used for each chart.
| Charts | Keywords |
|---|---|
| Daily Tickets | Timestamp |
|
Plan |
|
|
Status |
|
|
Was the issue resolved? |
|
|
Ticket Category |
|
|
Day of Week |
|
|
Category WordCloud |
|
|
Customer Satisfaction |
Keywords for two-dimensional charts
The following keywords are used to create charts that display the exact values from multiple columns in your spreadsheet.
For example, to display an area chart with two data series, write the corresponding columns you want to display next to your keyword. In this example: BarChart(B,C)
You can add as many series of data as you want, as long as you add the list of columns in the keyword cell between parenthesis and separated by a comma.
| Keyword | Description |
|---|---|
| AreaChart |
Displays quantitative data from one or more series with lines and colored areas. The areas overlap, enabling easy comparison between series. |
| StackedAreaChart |
Displays quantitative data from one or more series with lines and colored areas. The areas stack on top of each other, making it easy to analyse a trend on the combined series. |
| SteppedAreaChart |
Displays an area chart where points are connected by horizontal and vertical series segments, looking like steps of a staircase, instead of straight-line segments. |
| 100StackedAreaChart |
Displays an area chart that:
|
| 100StackedSteppedAreaChart |
Displays an area chart that:
|
| BarChart |
Displays data in horizontal bars using exact numbers, not value occurrences. |
| StackedBarChart |
Displays a bar chart that:
|
| 100StackedBarChart |
Displays a bar chart that:
|
| BubbleChart |
Displays a dataset with two to four dimensions: X and Y coordinates, color and size. |
| WaterfallChart |
Shows an opening and closing value overlaid on top of a total variance. |
| ColumnChart |
Displays a series of data with rectangular vertical columns with heights proportional to the values they represent. This chart uses exact numbers, not value occurrences. |
| StackedColumnChart |
Displays a column chart that:
|
| 100StackedColumnChart |
Displays a column chart that:
|
| ComboChart |
Creates a personalised mix of several charts. Each series can be assigned a different marker type (area chart, stepped area chart, line chart or column chart). |
| Histogram |
Groups numeric data into blocks displayed as segmented columns. |
| LineChart |
Displays information as a series of data points called markers, connected by a straight line segment. |
| SmoothLineChart |
Displays information as a series of data points called markers, connected by a curved line segment. |
| ScatterChart |
Shows how much one variable is affected by another using a coordinate-based visualization. |
Examples of two-dimensional charts
The table below shows the keywords used for each chart.
| Charts | Keywords |
|---|---|
| Yearly sales | AreaChart |
|
Sales per region |
|
|
Company profit |
|
|
Yearly business activity |
|
|
Overall costs per service |
|
|
Yearly number of customers |
Other keywords
You can use the keyword Hidden in the Charts app.
| Keyword | Description | App type |
|---|---|---|
| Hidden | Hides a column from your data presentation. | Charts, Org Chart, Maps, Geochart, Gantt, Table, Cards |
Customization parameters
You can use the following customization parameters ("roles" in Google terminology) with all the different types of chart:
- style
- trendlines
- annotation
- tooltip
- scope
- interval
- emphasis
- certainty
- annotationText
Below is an example of a BarChart with the cusomization parameter annotation - the values are displayed in the bars.
Learn more: What Roles Are Available?
Settings in the Chart app
Use the Animate charts on change setting to create an animation on your charts each time you open your view, change a filter, etc.
Advanced options in the Chart app
There are some advanced options you can apply using JSON in the template sheet.
Here are an AreaChart and a 100StackedAreaChart without advanced options:
Datasheet:
To add advanced options, open your template sheet and add them in the header.
Use chartOptions(All) to modify all the charts in your spreadsheet. To hide the legend in all our charts, we added: {"legend":{"position":"none"}}
Template sheet:
Here are a ColumnChart and a BarChart without advanced options:
Data sheet:
In this example, we used the customization parameter annotation on the BarChart to display labels in the bars instead of Google Chart's default annotations. This is available only in charts that support annotations.
To add advanced options, open your template sheet and add them in the header.
- We added chartOptions(E) to modify our BarChart. To customize the style of the label text on the annotations in the bars we added:
{"annotations": {"textStyle": {"fontName": "Times-Roman","fontSize": "18","bold": "true","italic": "true"}}}
- We added chartOptions(A) to modify our ColumnChart. To change the color of the columns, we added:
{"colors":["gold","silver","#cd7f32","#688AB3"]}
Template sheet:
Learn more: Configuration options