Line Chart

Creating the Chart

From the WCMS content browser, click the blue “+New Content Item” button in the top right of the window and then select “Data Visualization” when prompted.  Once the new visualization has opened, click on the “Open Visualization Editor” button in the middle to begin work on your chart.

Choosing Visualization Type

The first step is to select the type of visualization you want to develop.

1. A new Visualization Editor window will open on the “Choose Visualization Type” tab.
2. On this tab, select the type of visualization you want by clicking on the icon for that type.
3. Once you select your visualization type, you will be taken directly to the next tab, “Import Data”.

Importing the Data

Note: The visualization editor has sample data that can be selected, allowing you to experiment with the various configuration options.  This example data can be loaded into the editor by clicking the hyperlinks.

1. You can Import data in one of three ways:
   1. Drag and drop a supported data file into the area marked with a document icon
   2. Select a file from your computer using the blue hyperlink.
   3. Load data from a URL by selecting “Load from URL” (Note that if you select Load from URL, you can also check “Always load from URL” to keep the chart data in sync with the data source.)
2. If formatted correctly, your data will populate in the “Data Preview” on the right. If the editor detects issues in the file or file type, a warning box will appear under file area with the detected issue.
   
3. Select the Orientation of your data as either Vertical or Horizontal.
4. If your data is horizontally listed or has multiple data series represented, you may need to make additional selections in the data orientation options below the data import fields before progressing to the Visualization Type.  Simply select the options that best fit your data.
5. Click on the “Configure your visualization” button that appears after those selections are made.  This will take you to the “Configure” tab.

Chart Configuration

The Visualization Editor helps you to configure the chart through a series of selections to the left.  Each selection is grouped by type.  Depending on the type of chart you selected, you will see red exclamation icons alerting you to the required fields to make the chart work correctly.

Once you make the required selections, you may select the “I’m done” button in the preview window to see your chart preview.  This preview will update as customization selections are made.

An explanation for each selection, grouped by type, is provided below:

General

• Chart Type: This provides another way to change your chart type (Pie, Line, Bar, Combo, Paired Bar, Spark Line, Scatter Plot, Box Plot, or Deviation Bar)
• Chart Subtype: Bar charts can be created with two subtypes: Regular or Stacked.  Pie charts can be Regular or Donut.
• Orientation: Stacked and Bar charts can be either horizontal or vertical.
• Bar Style: Bar charts have Flat, Rounded, and Lollipop styling.  Rounded and Lollipop styles will open up additional configuration options.  Try each one to see what works best for your chart.
• Display Numbers on Bar: If a bar chart is selected, you may check this box to display numbers on the bar.  If the bar is too slim to allow the number inside the bar, the value will display next to the bar’s location.
• Title: Text entered here displays in a title bar along the top of the chart
• Super Title: Text entered here displays above the title in the title bar in smaller font
• Intro Text: Text entered here appears under the title bar as an opportunity to give your chart user context and alignment for the best way to read the chart information.
• Subtext: Text entered here appears under the chart to help communicate data source and any additional clarifying text not added to the Intro Text.
• Footnotes: Text entered here displays under the data table that can be used for explaining symbols in the data and the like.

Data Series

• Add Data Series: Use the dropdown to select the source data you want to display and click the “Add Data Series” button.  Repeat for any additional data series you want to display in the chart.

• • Setting Series Options:  For some chart types, there are special data series options, such as visualization style.  In some cases, these options are required to fully configure a chart. To see if a selected data series has options, click the series label.
  • Lollipop Style Bar: Currently, only one data series is supported in a lollipop-style chart at a time.
  • Paired Bar: The selection of two data series is required for a Paired Bar chart.  If the selections aren’t working, select Data Orientation options for your data on the Import Data tab.

• Confidence Keys: If your data contains values for Upper and Lower confidence values, you can select those here.
• Rank By Value: This selection can force the data to display in either ascending or descending order.

Value Axis

• Label: This label will be displayed to the left of the chart along the Y-Axis
• Number of Ticks: Tick marks provide reference points on a scale.  The general rule of thumb is to use them judiciously and avoid using them at odd intervals.
• Size: This increases and decreases space available under the Value Axis.
• Label Offset:  Provides more room between the label and value axis to account for long values on the axis.
• Display Gridlines: Some charts may benefit from grid lines.  Be aware of visual clutter.
• Number Formatting: Depending on the type of numeric values available in your source data, you can change the numeric format — i.e., adding commas, rounding rule, etc.
• Add Commas: Commas can be added to large numbers to increase readability. Commas added into a data file may cause issues in the editor.  Remove them from the data and select this option box to add them to the chart automatically.
• Abbreviate Axis Values: If your data goes above the hundreds, you can select this option to abbreviate  numbers into the appropriate letter for that number, such as “10k” and “40M”.
• Round to Decimal Point: This selection will allow for the editor to round data to the selected value.
• Prefix and Suffix: This option adds additional text before and after the data for the Y-Axis and displays in the “Data Table.”
• Hide Axis/Label/Ticks:  These options are available to hide elements in the chart display.  Consider the chart’s interpretation by the user to guide this selection.
• Set Max/Min Value: Depending on the visualization, you can enter a Minimum and a Maximum value for the chart.  This will extend the chart to allow values before and beyond the chart’s data values.  (Example: If the data values are percent values out of 100, you can Update the Max value to “100”.)
• Deviation Point and Label Options: If you’ve selected a deviation chart, you’ll find the options to set the value for and label the Deviation Point here.

Date/Category Axis

Note:  The X Axis and Y Axis options display for all chart types, but they are irrelevant for pie charts.

• Data Type: Use this option to change how data in the chart timeline displays.  If “Date” is selected as the data type,  “Date Parse Format” and “Date Display Format” must be set to reflect how the date is displayed. To see a reference of formatting options, click the hyperlinked “these guidelines”.
• Data Key: This selection sets which data source is displayed along the X-axis (bottom) of the chart.
• Label: Text entered here appears along the X-axis (bottom) of the chart.
• Exclude one or more values: This selection allows for removing one or more items from display on the chart.
• Size (Height): This increases and decreases padding between the label and the Y-Axis.
• Tick Rotation (Degrees): If labels on the X axis are long, they have issues with overlapping. To fix this issue, increase the tick rotation degrees by inserting a number between 0 and 90. 25 degrees is usually sufficient.

• Hide Axis/Label/Ticks:  These options are available to hide elements in the chart display.  Consider the chart’s interpretation by the user to guide this selection.

Regions

The Regions section allows you to highlight and label one or more periods of time in a time-based chart. This capability is particularly helpful in epi charts for highlighting incubation periods for diseases, etc.  Note: Your X-axis must be configured in a date format.  Enter your “from” and “to” values in the same format as your data.  Text and background colors are Hex values. (Consult your UX team for ideal colors for your chart)

Columns

If you selected the vertical orientation of the chart’s Data Table, you’ll find the option to add an additional column in this tab.  Adding additional columns in this way allows you to share additional information with your users without influencing the visualization directly.

Legend

• Reverse Legend: Selecting this option reverses the display order of the legend elements in the legend box only.
• Hide Legend: Selecting this option hides the legend from the page.
• Color Code by Category:  This allows you to select an additional column to use for categorizing each data point. This categorization will be reflected in the legend and chart colors.  Selecting the option “Select” returns the chart to the original configuration.
• Legend Behavior (When Clicked): This determines how the legend behaves when the viewer clicks on an item in it. The “Isolate” option removes the data not selected from view in the chart.  The “Highlight” option reduces the contrast of the data not selected.  Multiple selections can be made by the viewer.  The reset button returns the chart to its original state.
• Title: Text entered here appears at the top of the legend
• Position: This moves the legend either to the left or the right of the chart
• Legend Description: Text entered here displays along the top of the Legend

Filters

Filters can be added to a chart to allow the user to select portions of information to display on the chart.  The local filters added here are drawn from your data.  The option you select can be given a title and be ordered based on your selection in the order dropdown.  The top item, based on the order you select, will be the option that first displays when the user loads the page.

For better accessibility, any filter applied to a visualization requires the user to click on the “Apply” button for the filter to take effect.

Visual

• Lollipop Shape/Color Style/Size: If lollipop styling was selected, this is where the various styling adjustments can be made.
• Font Size: This selection effects the size of all the text in the chart. This includes both the values on the X and Y-axis, the labels, and the data table fonts.
• Bar Borders: Can be set to “true” or “false” to hide or show a stroke around the bars within the chart.  Bar Borders are recommended for charts containing less than 10 bars.
• Header Theme: This option sets the theme color for the title header if one is entered in the title field.
• Color Chart Palette: Select the color options that best fit the chart selections you’ve made. Consult your team UX for best practices for visualization usability and readability.  Charts, like the Deviation Chart, will provide different options for color.
  
• Display Label on Data: This selection shows and hides labels in the chart for each data point.
• Display Cutoff: If you set the Display Label on Data to show, the Data Cutoff is used to set a lower limit to data results both in the chart and in the Data Table. Numbers below that lower limit will show as “<” the cutoff.
• Bar Thickness: This number increases and decreases the thickness of the bars displayed in the chart.
• Additional Selections: can be made depending on the type of visualization you’ve selected.  The selections will reflect in the preview window to the right, so try a few variations to see what works best.  Consult your team UX for best practices for visualization usability and readability.

Data Table

• Table Title:  Text entered in this field displays as the title for the Data Table.
• Show Table: This will hide or show the Data Table.  The data table should only be hidden if the data information is being presented elsewhere on the page.
• Show Vertical Data: This option rearranges the layout of the data in your table.  This can improve the readability of your data.
• Data Table Caption: The text entered here is read by text readers
• Limit Table Height: For lengthy data sets, this option will allow you to set the maximum height and allow the user to scroll the Data Table to view additional information.
• Expanded by Default: This sets the behavior of the Data Table on page load. It can be set to display expanded or collapsed by default.  Large data sets may benefit from loading in the collapsed state.
• Display Download Button: This will hide or show the button that allows the viewer to conveniently download the data to their device.
• Index Column Header: Text entered here will populate in the first column as a header.

Saving the Visualization

Once you’ve completed the Configuration, the chart is now ready for displaying on your pages.  Click on the “OK” button at the bottom right to close the Editor and return to the Module page.  To save the visualization for use on your pages, add a title and file name in the required fields.  Click the “Save” button.  Your new chart is now available in the Content Browser where you added it.