Selecting Series Style Options for Graphs in OnePager for Version 8.0
Introduction
Illustrations used in this article are from OnePager Pro Add-in and Standalone using data from Microsoft Project, however, Graphs & Data Cells features, functions, controls, and editing apply equally to other OnePager Add-in and Standalone editions that import from data sources like Microsoft Excel, Smartsheet, Oracle Primavera P6, Planisware Enterprise, Asana, and Wrike. At present Microsoft Project for the Web (Planner) source plans do not provide time-series data that can be processed and displayed by the Graphs & Data Cells feature of OnePager.
This article and the articles linked from here describe OnePager’s Graphs & Data Cells feature which provides the capabilities to show graphs of time-series data (e.g., Cost data) in graphic forms along with your Gantt/Timeline Charts. Additionally, the Graphs & Data Cells feature also provides the capability to show time-series data (e.g., cost data) imported from your source plan in tabular forms.
The purpose of this article is to describe the options available with the Series Style dropdown and how these options relate to the selection of Graph Type when the Panel selected is in Graph mode.
Overview
The Series Style dropdown is found in the Template Properties and Chart Properties form’s Graph/Data Cells tab when the selected Panel is in Graph mode below the Graph Type dropdown. The Graph Type control and the Series Style control are closely related. That is, the selection of a Graph Type option determines the options available in the Series Style dropdown. The relationship is as follows:
- 1) When the Graph Type selection is Line Graph or Smooth Line Graph, clicking the Series Style dropdown accesses the Line Graph Format form for the Panel and Series selected in the Graph/Data Cells tab.
- 2) When the Graph Type is Area Graph, Column Graph, or Smooth Area Graph, clicking the Series Style dropdown access the Standard OnePager Color Chooser form.
The relationships discussed above are summarized in this table:
-04222026.png)
The article sections below discuss the two Series Style options and provide examples.
Series Style Options for Line Graphs and Smooth Line Graphs
The Line Graph and Smooth Line Graph type, when selected in a Graph mode Panel and Series, sets the Series Style dropdown control to provide the Line Graph Format form as shown in the series of steps and illustrations below:
First, access the Chart Properties form at the Graphs/Data Cells tab and click the Panel #1 checkbox ON to enable Panel #1 which automatically enables Series A as shown here:
-04222026.png)
With the Line Graph Type selected, next click the Series Style dropdown to access the Line Graph Format: Panel #1, Series A form as shown below:
-04222026.png)
The illustration above shows the Line Graph Format: Panel #1, Series A form. The form is configured with the default Green color, and default Width and Dash type. The Data Point Style is disabled as the default.
The Line Graph Format: Panel #1, Series A form and all similar forms for all Series and Panels associated with Line Graphs and Smooth Line Graphs have two control groups as discussed below.
Line Graph Format: Panel #n, Series x Form – Line Style Control Group
The Line Style control group has three controls for Color, Width, and Dash type. Each is expanded in the sub-sections below.
Clicking the Color dropdown accesses the Standard OnePager Color Chooser form as shown here:
-04222026.png)
The Width of the Line Graph or Smooth Line Graph in the Graph area can be edited by using the Width control to increase the Width to the desired value. In the illustration below, the Color is changed to Red and the Width is increased to 6.0:
-04222026.png)
There are five (5) Dash Types available in the Dash dropdown list as shown below:
-04222026.png)
Using these three edited changes in the Line Style control group, we can now click OK on the Line Graph Format: Panel #1, Series A form and when this action is taken the Chart Properties form’s Graphs/Data tab Panel #1 sub-tab for Series A is updated to look like this:
-04222026.png)
Clicking the OK or Apply buttons on the above Chart Properties form creates the Cost Line Graph in the Graph area for Panel #1 with the edits made to the Line Graph in the Line Graph Format: Panel#1, Series A form which looks like this:
-04222026.png)
Line Graph Format: Panel #n, Series x Form – Data Point Style Control Group
Further enhancements can be made to the above Graph area by highlighting the individual data points along the Line Graph representing the imported data. This is done by using the controls in the Line Graph Format: Panel #1, Series A’s Data Point Style control group. This control group contains controls for the Shape of the Data Point, its Color, and its Width. These controls are enabled by checking the Show data points checkbox to ON as illustrated below:
-04222026.png)
When these edits are applied to the Graph area for Panel #1, Series A, the Graph area looks like this:
-04222026.png)
When the Line Graph Width is the same as the Data Point Shape Width, it may be difficult to distinguish the Data Point Shapes. Increasing the Data Point Shape Width is recommended as long as the precision of the Data Point Shape’s location is not compromised.
It requires close examination of the Graph area shown above to pick out the Data Points for each Quarter using the default settings in the Data Point Style control group of the Line Graph Format: Panel#1, Series A form. To better emphasize the Data Points, the form can be used to make edits in the Data Point Style control group as suggested below:
-04222026.png)
In the edited form above, there were three changes made. First, the Shape dropdown was clicked to access the Shape Chooser form where the Diamond shape was selected as shown below:
-04222026.png)
For more information on the Shape Chooser form and the availability of Dynamic Shapes and Emojis, please see the links listed in the table below:
| Using the Dynamic Shapes and Emoji Symbols |
| Gallery of Dynamic Shapes and Emoji Symbols |
Next, as seen above, the Color dropdown was clicked to access the Standard OnePager Color Chooser form and the Black color was selected. An example of accessing the Standard OnePager Color Chooser is given above in the previous sub-section.
Last, the Width control is edited to a value of 10.0 so that the selected Shape is larger with respect to the enlarged Red Color Line Graph.
Caution: Making the Width of the Data Point Shape too large may compromise the accuracy of the position of the Data Point with respect to the timeline. This is typically an important consideration when the timeline intervals are Days or shorter.
When these control edits are applied to the Graph area, it looks like this:
-04222026.png)
As a note, OnePager automatically updates the Graph Legend with the properties of the Line Graph and the Data Point properties.
The illustrations and examples used in this sub-section are for the Line Graph Type. The Series Style controls discussed above also apply to the Smooth Line Graph Type.
Series Style Options for Area Graphs, Column Graphs, and Smooth Area Graphs
The Area Graph, Column Graph, and Smooth Area Graph types, when selected in a Graph mode Panel and Series sets the Series Style dropdown control to provide the Standard OnePager Color Chooser form as shown in the Series of illustrations below:
First, access the Chart Properties form at the Graphs/Data Cells tab and click the Panel #1 checkbox ON to enable Panel #1 which automatically enables Series A as shown here:
-04222026.png)
With the Area Graph Type selected, next click the Series Style dropdown which accesses the Standard Color Chooser form as shown below:
-04222026.png)
The illustration above shows the Standard OnePager Color Chooser form. The form is configured with the default Green color.
The Standard OnePager Color Chooser form when accessed for Area Graphs, Column Graphs, and Smooth Area Graphs provides the same editing capability to change the Color of these Graph types. In the example above, where the Area Graph’s Color is the default Green, the Graph area looks like this:
-04222026.png)
Suppose you want to change the Color of the Area Graph to Blue. Simply access the Chart Properties form at the Graphs/Data Cells tab, navigate to Panel #1 and Series A in this case. Click the Series Style dropdown for Series A to access the Standard OnePager Color Chooser form and click the desired Blue color as shown here:
-04222026.png)
Selecting a Color in the Standard OnePager Color Chooser form closes the form and updates the Color shown in the Series Style window. To apply the new Color to the Graph area Panel and Series, either click OK or Apply on the Chart Properties form. When this action is taken, the Graph area looks like this for Panel #1, Series A:
-04222026.png)
As a note, OnePager automatically updates the Graph Legend with the properties of the Area Graph.
The illustrations and examples used in this sub-section are for the Area Graph Type. The Series Style controls discussed above also apply to the Column Graph Type, and the Smooth Area Graph Type.
Series Style Options for Vertically and Horizontally Pivoted Graphs
Before reading this sub-section, if you haven’t had an opportunity to go through or review the Wiki Articles covering Vertical and Horizontal Pivoting, these articles are linked in the table below:
When Graphs, for example Line Graphs, are Vertically Pivoted, the capability to edit the properties of the Graph in terms of Line Color, Line Width, Line Dash Type, Data Point Shape, Data Point Color, and Data Point Width is provided by the Graph Vertical/Horizontal Pivoting – Panel #n, Series x form’s Graph Series Style column and cells as shown below:
-04222026.png)
Each cell in the Graph Series Style column can be individually left-clicked to access that cell’s Line Graph Format: Panel #1, Series A form where you are able to make any or all of the six edits to the selected Pivoted Line Graph’s properties. When the edits are completed, click the OK button on the Line Graph Format: Panel #1, Series A form and on the Graph Vertical/Horizontal Pivoting – Panel #n, Series x form and the edits are applied to the Vertically Pivoted Line Graph as shown in the illustrations to follow.
The OnePager controls illustrated just above are typical for Vertically Pivoted Graphs as well as Horizontally Pivoted Graphs. As a reminder, the table below summarizes which Graph Types may be Vertically or Horizontally Pivoted:
-04212025.png)
Vertically Pivoted Line Graph Editing Example
To complete the example for the Line Graph discussed above, suppose we start with a simple non-Pivoted Line Graph shown below:
-04222026.png)
Further, suppose we want to present a Chart with a Graph area that shows the above Cost Line Graph Vertically Pivoted by Resource Names. This is done by accessing the Chart Properties form at the Graphs/Data Cells tab, clicking the Pivot Series button to access the Graph Vertical Pivoting – Panel #1, Series A form and following the steps shown below:
-04222026.png)
Clicking the Pivot Series A button (Step 1) accesses the Graph Vertical Pivoting – Panel #1, Series A form. Since the Graph Type is a Line Graph, only the Vertical Pivot tab is shown in the form (Step 2). Click the Pivot vertically with field checkbox to ON (Step 3) and select the Resource Names field from the dropdown list (Step 4). When this last step is completed, OnePager automatically builds the required Conditional Formatting rules to support the Vertical Pivoting action and the Graph Vertical Pivoting – Panel #1, Series A form is updated to look like this:
-04222026.png)
Before applying these Conditional Formatting Rules to the Graph area by clicking the OK button on the form, suppose we want to highlight the Line Graph associated with the Prime resource by increasing its Width considerable and changing its Dash type to Dash-dot-dot. This is done by left-clicking the Prime’s Graph Series Style cell to open the Line Graph Format: Panel #1, Series A form as shown below:
-04222026.png)
At this point, we can make edits to the Prime’s Line Graph Format: Panel #1, Series A form to make that Pivoted Line Graph more visible. For example, let’s make the following edits:
-04222026.png)
Applying these edits to the Graph Vertical Pivoting – Panel #1, Series A form, the form is updated to look like this:
-04222026.png)
When the OK button is clicked on the above form, and on the Chart Properties form, the Vertically Pivoted Line Graph based on Resource Names looks like this:
-04222026.png)
In the illustration above, the Data Points are set to the same Width as the Line Graph and as a result they don’t stand out too well. This can be remedied by either changing the Color of the Data Points or making their Width very much bigger. In the illustration below both options were taken to change the Color of the Data Points for the Prime Line Graph to Black and increase the Data Point’s Width to 20.0. Doing these two edits causes the Graph area to look like this:
-04222026.png)
As a note, OnePager automatically updates the Graph Legend with the properties of the Prime Line Graph.
Caution When Editing Vertically Pivoted Graphs
The approach and sequence of steps outlined in the sub-section above is the preferred sequence. That is, edits to the Vertically Pivoted Graphs can only be made to the Conditional Formatting Rules created by OnePager. After the Conditional Formatting Rules are applied and the Vertically Pivoted Graph is rendered in the Graph area Panel, the Chart Properties form’s Graph/Data Cells tab’s Series Style dropdown is essentially inoperative. Therefore, to make any subsequent edits after the Vertically Pivoted Graph is rendered, it is necessary to access the Graph Vertical Pivoting form for the Panel and Series and edit the individual Vertically Pivoted Graph elements through their individual Conditional Formatting Rule.
Horizontally Pivoted Column Graph Editing Example
OnePager supports both Vertical and only Horizontal Pivoting for Column Graphs so the example for Horizontally Pivoted Graph editing of properties involves the Column Graph Type.
Using the same data and original Line Graph, let’s start at the point where we began the previous example. This is done by changing the Graph Type to Column Graph in the Chart Properties form at the Graphs/Data Cells tab, clicking the Pivot Series button to access what will become the Graph Horizontal Pivoting – Panel #1, Series A form and following the steps shown below:
-04222026.png)
Clicking the Pivot Series A button (Step 1) accesses the Graph Horizontal Pivoting – Panel #1, Series A form. Since the Graph Type is a Column Graph, there are both Vertical and Horizontal Pivot tab is shown in the form. Select the Horizontal Pivot tab (Step 2). Then click the Pivot horizontally with field checkbox to ON (Step 3) and select the Resource Names field from the dropdown list (Step 4). When this last step is done, OnePager automatically builds the required Conditional Formatting Rules to support the Horizontal Pivoting action and the Graph Horizontal Pivoting – Panel #1, Series A form is updated to look like this:
-04222026.png)
At this point, the available property edit option is to change the Prime’s Color which we’ll do to Black. When this is done, the Graph Horizontal Pivoting – Panel #1, Series A’s Prime Conditional Formatting Rule looks like this:
-04222026.png)
When the OK button is clicked on the above form, and on the Chart Properties form, the Horizontally Pivoted Column Graph based on Resource Names looks like this:
-04222026.png)
As a note, OnePager automatically updates the Graph Legend with the properties of the Prime Column Graph.
Caution When Editing Horizontally Pivoted Graphs
The approach and sequence of steps outlined in the sub-section above is the preferred sequence. That is, edits to the Horizontally Pivoted Graphs can only be made to the Conditional Formatting Rules created by OnePager. After the Conditional Formatting Rules are applied and the Horizontally Pivoted Graph is rendered in the Graph area Panel, the Chart Properties form’s Graph/Data Cells tab’s Series Style dropdown is essentially inoperative. Therefore, to make any subsequent edits after the Horizontally Pivoted Graph is rendered, it is necessary to access the Graph Horizontal Pivoting form for the Panel and Series and edit the individual Horizontally Pivoted Graph elements through their individual Conditional Formatting Rule.
Summary
This article focuses on the Series Style dropdown control found in the Template Properties and Chart Properties form’s Graphs/Data Cells tab in Graph mode. The Series Style dropdown provides editing for Line Graphs and Smooth Line Graphs with respect to their Line Color, Line Width, Line Dash Type, Data Point Shape, Data Point Color, and Data Point Width. For all other simple Graph Types, the Series Style dropdown supports editing of Color Only. OnePager supports these same capabilities for Vertically and Horizontally Pivoted Graphs mentioned previously.
Related Links
Links to Detailed Articles on Creating and Editing Graphs & Data Cells
The articles listed in the tables below provide detailed information on how to create and edit graphs & data cells using the OnePager Chart Editor. Illustrations use OnePager Pro, but the features’ work the same in OnePager Express and OnePager Bundle.
Links to Feature Overviews
| Cost and Work Graphs | Data Cells | Pivoted Graphs |
Links to Introductory Graphs & Data Cells Articles
| Getting Started (Portal) | Using Graphs & Data Cells in OnePager |
Links to Detailed Graphs & Data Cell Articles
Links to Articles Supporting the Graphs & Data Cells Feature
| Using Hover Boxes in the Chart & Graphs | Graphs & Data Cells Tab |
| Using Presentation Mode with OnePager | Gallery of Graph Types and Series Styles |
Other Related Links
(7.3.19-80)