Charts

(Pro & Premium Only)

In Web Designer Premium and Designer Pro X, the Chart widgets offer 8 different templates allowing you to create 4 different looks for each template. Choose from column, bar, area, line, and pie charts and quickly populate and customize each chart widget with your own data. 

Follow the step-by-step guide below to learn how to use the widgets and see examples from the other chart widgets available. 


Find the charts widgets in the Content Catalog under Components > Print & Web Components > Charts.

Column Chart

Here is an example of a simple column chart which is easy to create and demonstrates all the features of the other Chart Widgets.

If you roll your mouse over the columns you will see the values displayed in a popup.   
1


Import the Column Chart widget from the Content Catalog.  

 
2


The placeholder is displayed in your web page document. Double click the placeholder to edit the widget. The program displays the widget editing instructions on the right and the editing settings themselves appear on the left.

 
3
Begin by choosing from one of the four themes - use the Text Tool to enter your values. Then add a title followed by a value for the y axis.
4
Use the CSV (Comma-Separated Values) field to enter your data. The top line describes the categories that will form the x axis - running along the bottom of the chart. The next lines of data each describe the values making up the various categories. Each value must by separated by a comma.

It is not possible to change the style of the text or alter the colors of the chart, but you can add as many rows and columns as you like. 
5

You can preview your chart at any time by clicking the Preview Page button. When you have finished editing the widget, go to 'File' > 'Save and Close' to save the widget. 

6
You can edit and update the widget contents at any time by double clicking on the placeholder. You can also resize the widget by clicking on the placeholder with the Selector Tool - then hold down your left mouse button on one of the selection handles and drag to resize the widget as required.

Stacked Column Chart

To create a Stacked Column Chart follow the steps for the Column Chart above.

Bar Chart

To create a Bar Chart follow the steps for the Column Chart. 

Stacked Bar Chart

To create a Stacked Bar Chart follow the steps for the Column Chart.

Area Chart

To create an Area Chart follow the steps for the Column Chart.

Stacked Area Chart

To create a Stacked Area Chart follow the steps for the Column Chart. 

Line Chart

To create a Line Chart follow the steps for the Column Chart.

Pie Chart

To create a Pie Chart follow the steps for the Column Chart. Bear in mind that the Pie Chart is simpler than the other charts in that you do not have the Categories value for the CSV's.