Container
Introduction
Feature Overview
A Container can be a canvas. You can put multiple charts and components into it, and arrange them as a whole.
Scenario(s)
In data analysis, you may need to arrange charts of the same type together and analyze them.
For example, you can put the charts concerning sales metrics in one container to check and manage them.
Preview
The data related to the sales presentation will be displayed in one container.
Setting Procedure
You have to prepare form data in advance.
Note:
All dashboards in apps allow using containers.
Creating a Dashboard
Create a dashboard.
Creating a Container
On the Design page, click to add a Container:
Setting the Container
1. Rename the container:
2. Hide/display the container's title.
A container's title can be hidden.
Multiple Tabs
1. Enable multiple tabs.
On the container editing page, enable Tabs to add multiple tabs. Multiple charts can be placed in each tab, which is equivalent to the combination of multiple containers.
Note:
After enabling Tabs, at most ten tabs can be added to a container, and two tabs at least.
2. Set a tab style
You can switch between different tab styles after enabling Tabs. Jodoo offers four preset styles that can be freely chosen according to design needs.
3. Set the automatic pagination.
In a container, after enabling Tabs, enable Auto Pagination and set Interval.
The effect of Auto Pagination:
Note:
1. Auto Pagination is only available on PC.
2. This is a paid feature. For details, see Understand Your Account Usage and Limits.
3. Rename/sort/delete tabs.
You can rename, sort, and delete tabs.
- Rename: Up to 20 characters can be entered.
- Sort: You can sort tabs by dragging and dropping directly.
- Delete: After a tab is deleted, the chart in it will be moved to the first tab by default and positioned after the existing charts.
Add Chart(s)/Component(s)
To add required charts/components to the container, you can either create a chart/component and drag it in, or add the existing chart/component to it.
1. Create a chart/component.
Charts/components can be added in the following ways:
- When the container is selected, you can click the chart/component on the left to add.
- When the container is not selected, you can directly drag the chart/component from the left to the container. If there are multiple tabs, the chart/component will be dragged to the selected tab.
Take creating a stats as an example: select Stats, drag it to the container, select the data source, and click OK.
For details about setting a chart, see Chart.
2. Add an existing chart/component.
To add an existing chart, select the chart and click Move to move it into the canvas.
If you enable Tabs in a container, select one certain tab to place the chart.
Note:
You can press COMMAND or CTRL, and select multiple charts to move them in batches.
Setting the Container Size
1. Size requirements
You can customize the container size
a. On PC:
- Minmum: 10/60, six grids
- Maximum: full, 150 grids
- One grid equals 15 px.
b. On Mobile:
- Minmum: full, 6*40 px.
- The height is not limited until all charts are displayed completely.
2. Size settings
a. Set the size on PC.
You can adjust the container size manually, or through Adjust Size.
b. Set the size on mobile.
3. Size rules
a. The size adjustment of the chart/component inside the container is the same as that of the default canvas outside it.
b. Adjusting the chart/component size to 1/2 or 1/3 is to adjust the container width, not the width of the whole dashboard.
Adjusting the Container Position
1. Adjust the position of the whole container.
a. On PC
When you adjust the position of a container, charts/components in the container will be adjusted along with it.
b. On mobile
2. Adjust the position of the chart/component.
a. On PC
The chart/component position in the container is adjusted as that of the default canvas is adjusted in the dashboard.
b. On mobile
Deleting a Container
You cannot delete a container with charts, components, and so on.
To delete the container, you need to delete or hide all charts or components in it first.
Demonstration
1. Container displayed on PC:
You can also configure more charts/components according to business needs.
2. Container displayed on mobile:
Notes
1. A container can be edited and deleted, but not copied.
2. An empty container is allowed to be deleted. If it is not, you need to first delete or hide the charts/components in the container.
3. A container does not allow to be hidden when it is not empty (on PC only), but the charts in it do. For details, see Hiding a Chart/Component.
4. The charts/components added to the container cannot be dragged out. You need to select the charts/components, and click 
5. A container can include charts and all other components than another container. That is, containers do not allow nesting each other.
6. In a container, the charts and the components do not have the shadow, and their titles are centered.
7. At most, 100 charts/components/tools can be added to one dashboard. This also applies to a container.
8. At most, a container can include 10 tabs.