I. Overview
This tutorial showcases the ways to configure 6 types of charts that are commonly used in reports.
1) Pie chart
2) Column chart
3) Line chart
4) Combination chart
5) Bar chart
6) Gauge
| You will learn |
|---|
|
II. Page setup
1. Select [Template] > [Page Setup] and choose the Orientation as [Landscape]
2. Adjust the zoom ratio and the dashed lines indicate the page boundaries
III. Pie chart
1. Click [Insert] > [Float Element] > [Insert Chart] and choose [Pie]
2. Create a dataset [ds1]
1) Create a new DB query dataset.
2) Drag table [Sales_Volume].
3) Preview the dataset.
[Product] can be used to set chart series since it stores categorical data. [Sales_Volume] be used to set chart value since it stores numeric data.
3. Set chart data according to the picture below
Preview, and you can see a pie chart with default style settings.
4. Customize chart title using formula
5. Change the position of the legend
6. Set the label
1) Let the label to show Series (i.e. product) and Value (i.e. sales volume).
2) Set the position as [Outside Pie].
7. Customize chart color in [Server] > [Chart Predefined Color]
1) Customize 6 colors: #7fc8ea, #b5e3e6, #47bace, #00686b, #8f81b4, #625ba1.
2) Name the color scheme as [sample].
3) Refer to Predefined Style for detailed methods.
8. Set series color and inner radius
1) Select the predefined [sample] as series color.
2) Set the percentage of inner radius as 60% to realize the effect of doughnut chart.
9. Set the border styles of the chart area and color of chart background
1) For chart background, select [color] and click [More Color].
2) In the Select Color panel, click the [Custom] tab and use color code #ebf2f7.
10. Set the tooltip
1) Let the tooltip to display Series (i.e. product) and Value (i.e. sales volume).
2) Set border styles of tooltip box including line style, color and rounded corner.
3) Set the background color of tooltip box as black and set the opacity as 40.
4) Set the display position of tooltip box as [Follow Mouse].
11. Preview the doughnut chart
12. Set the label
Let the label to display Series (i.e. product) and Percentage (i.e. sales volume in percentage).
Preview.
13. Create a rose chart
Right-click to copy the doughnut chart.
Switch the chart type to [Rose Chart] directly in the right panel.
14. Preview the rose chart
IV. Column chart
1. Right-click to copy a chart and switch the chart type to [Column]
2. Set chart data
Set [Salesperson] as Category, and this means the X-Axis represents salespersons.
3. Do not show title and change the position of the legend
4. Set the series styles
1) Set series color using [sample].
2) Change Style from [Gradient] to [Default]; in other words, the color will not change gradually.
3) Set rounded corners.
5. Edit the X-Axis
1) Set a rotation angle for labels on the X-Axis.
2) The X-Axis represents salesperson so the rotation enables the names of salespersons to be fully displayed.
6. Add an alert line
1) Click [+] to add an alert line
2) Set Alert Line:
Position: Y-Axis
Value: =500
Line Style: dashed line
Color: #e5715a
3) Alert Text:
Position: Right
Font: Arial
Size: 11
Color: #e5715a
7. Preview the column chart with an alert line
8. Copy the column chart and switch to [Stacked Column]
9. Set the label
1) Let the label only displays value (i.e. sales volume) in Percentage and set the Position as [Center].
2) Set the format of percentage as #0%, and this means only preserve the integer part。
10. Set the series styles
1) Set Style as [Default].
2) Set Fixed Column Width as [Yes] and input 35.
11. Set a rotation angel for labels along X-Axis
12. Zoom out the designer and change the chart size according to the page boundaries
Preview the stacked column chart.
V. Line chart
1. Create a new dataset [ds2]
1) Create a new DB query dataset
2) Input the SQL:
SELECT Time([Time]) AS Hour,A.* FROM flow AS A |
3) Preview the dataset.
[Hour] can be used to set Category while [Inflow_rate] and [Outflow_rate] can be used to set Series.
2. Copy a chart and switch to [Line]
3. Set chart data
1) Dataset: [ds2], Category: [Hour].
2) Choose [Enable Field Name] for setting the series.
3) Click [+] to add two fields and choose [Inflow_rate] and [Outflow_rate] as Field Name.
4) Rename Series to ‘Inflow Rate’ and ‘Outflow Rate’.
4. Set chart title and the legend
5. Set series styles
1) Set the Display of Line as [Curve Line].
2) Set the Type of Marker as circle and input radius as 2.5.
6. Set the axis styles
1) Change the font size of labels along X-Axis.
2) Set a rotation angle for the labels.
7. Preview the line chart
VI. Combination chart
1. Copy the chart and switch to [Combination]
Customize the combination as line chat and an area chart.
2. Set chart data
1) Set dataset as [ds2] and choose [Enable Field Name] for setting the series.
2) Set the series:
a) Line chart: select [Inflow_rate] as Field Name and rename series as ‘Inflow Rate’.
b) Area chart: select [Outflow_rate] as Field Name and rename series as ‘Outflow Rate’.
3. Not show chart title and change the position of the legend
4. Add a Y-Axis and set the Axis Label Position as [Right]
5. Set series styles of the line chart
1) Set Color as the predefined [sample].
2) Select [Line] and set Line Style as [Vertical].
3) Scroll down the panel and click [+] to add a [Stack and Axis].
4) Set [Stack and Axis1]:
Display: Choose the first [Y Axis] for Y-Axis and keep other settings as default.
Common Condition: Series Index Equal to 1.
5) The condition let the first series in the line chart use the first Y-Axis (the left-aligned one).
6. Set series styles of the area chart
1) Select [Line] and set Line Style as [Vertical] as well.
2) Scroll down the panel and click [+] to add a [Stack and Axis].
3) Set [Stack and Axis1]:
Display: Choose [Y Axis2] for Y-Axis and keep other settings as default.
Common Condition: Series Index Equal to 1.
4) The condition let the first series in the area chart use Y-Axis2 (the right-aligned one).
7. Set axis styles
1) Add a rotation angle for labels along the X-Axis.
2) Add titles for the 2 Y-Axis respectively.
8. Preview the combination chart
VII. Bar chart
1. Copy a chart and switch to [Bar]
2. Set the chart data
3. Set chart title and the legend
4. Set the label
1) Let the labels only display Value (i.e. sales volume).
2) Set the position of labels as [Outside] the bars.
5. Set the series styles
1) Set the series color as the predefined [sample].
2) Set the border of bars as [None].
6. Preview the bar chart
VIII. Gauge
1. Copy a chart and switch to [Gauge]
2. Create an embedded dataset
3. Set chart data
4. Set chart title
5. Customize the Max Value of the plate as 300
6. Set the tooltip
7. Preview the gauge
