Team Chart documentation

Introduction

Team Chart is a performance plugin used to manage flow chart without creating a boring HTML table presentation.

WP-Team-Display

 

TEAM CHART INSTALL

1.1 Install

Our component is Joomla 3.x compatible. All the features and 3rd party integrations are included in all memberships.
In order to install our component you have to download the extension .zip file and use standard Joomla installer.

image7

 

Then click on Browse > Upload and Install button, component, modules and plugins will be installed activated by default.

 

1.2 Update & automatic updater

In order to update the extension you can install a new version over the old one by downloading the ZIP file from JoomUnited or use the automatic updater (recommended).

teamchart-update

 

The automatic updater, which push the update notification, is embedded in the Joomla extension you've installed. So you'll get notified like any other extension in the dashboard or using the menu: Extension > Manage > Update menu.

 

Login to your account to update

You need to login to your JoomUnited account to update all your JoomUnited Joomla extensions. In order to login access the main configuration of the component then click on the Live update tab. At the bottom, you'll find a login button. 

image10

 

Enter your JoomUnited credentials, the same you use to login here @ www.joomunited.com

image11

 

The button will turn orange, congrats! you can now update all the JoomUnited extensions on this website! If your membership is expired you'll get a renew link and a text that explain that.

image12

 

Note: one single login will allow you to update all the JoomUnited extensions (regarding your membership). Login won't expire unless you disconnect it.

 

II. TEAM CHART COMMON USE

2.1 Manage flow chart from editor

The main idea of Team Chart display is to set everything from your WYSIWYG editor. Team Chart display works on every Joomla WYSIWYG editor. For example you can use it in posts and pages.
When Team Chart display is installed you have a button displayed upon your editor. 

editor-button

 

If you already have a flow chart in your editor, click on it, then on the editor button will re-open the previous flow chart.

re-open-flow-chart

2.2 Start a new flow chart

In order to create a new flow chart, from the lightbox: add a name then click on Add new chart (the big left blue button).

new-flow-chart

 

On the left side of your interface, the existing flow chart will be listed.

flow-chart-list


2.3 Select a theme

3 themes are available and they can be selected or changed whenever you want. Theme selection won’t change the edition interface on admin side, only the frontend display.

themes

III. TEAM CHART EDITION

3.1 Add a person

To add the first person you have to select an image first, use the button Upload or choose picture

picture-selection

 

You can then upload new image. Then select an image and clickon the Insert image button to add this picture like any other Joomla image.

add-person

 

You have the opportunity to crop your image using a specific tool for example if you want to center the image on the person face. Click on the green arrow to do that.

crop-link

Then, you’ll be able to crop and save the image.

crop-interface

 

3.2 Add information

On the public part there are some information displayed like the name, the position in the company and a description. Name and position are displayed on global view, description in detailed lightbox view.

person-information-display


On the admin part just add some of those information, the name is mandatory, and click on “add a person” to save it.

person-information-edition

Note: on the flat theme you have additional fields with social networks links.

social-information

 

 

3.3 Organize the flow chart

Once you’ve added a person, he will appear on the center part of your flow chart, then you start organizing the hierarchy. You have to use drag’n drop to organize the people.

When you start dragging a person some arrow will appear to move that person. Put the photo on a new zone to move them vertically or horizontally.

flow-chart-hierarchy

 

3.4 Edit an existing person

When you’ve added a person they are registered in your database in order to be re-used. On the bottom right column you’ll see those person appear with an Add button. Select another flow chart, click on it to add again this person.

re-insert-person

Person are “transferable” through flow charts!. To edit or remove information of an existing person, click on the pencil/trash icons over the photo.

edit-person

IV. TEAM CHART ON FRONTEND

4.1 Add a flow chart in editor

Finally, to display a flow chart on frontend, click on the Insert chart top right button. Save your page/post and you’re done!

insert-flow-chart

Then, your Team Chart display flow chart is materialized in your editor.

editor-button

 

4.2 Themes overview

Default theme

default-theme

 

Flat and Circle theme

flat-and-circle

 

Natura theme

nature-theme-lightbox