Bar and Bar-Line Combo Charts

Building in the WCMS

Chart Source Data

Each WCMS chart requires a data file or a URL to a data set. The data must be in CSV or JSON format. Sample data files are available:

chart bar light icon    JSON_Source_Data_Example [JSON – 463 B]

chart bar light icon    CSV_Source_Data_Example excel icon[XLS – 250 B]

chart bar light icon    CSV_Source_Example_for_Non-Time-Based_Data excel icon[XLS – 106 B]

chart bar light icon    CSV_Source_Example_for_Horizontal_Bar excel icon[XLS – 195 B]

chart bar light icon    CSV_Source Data with Confidence Intervals excel icon[XLS – 113 B]

chart bar light icon    CSV_Source_Combo_Bar-Line_Chart excel icon[XLS – 318 B]

Tip regarding special characters:  Data files containing special characters such as “=” and “>” are currently not supported.  Excel files containing formulas will convert into final calculated values.

Note regarding instructions below:  These instructions are for bar chart creation with the new data visualization editor.  Instructions on the old charts content type are still available.

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.

Importing the Data

Note: The visualization editor opens with sample data, allowing you to experiment with the various configuration options.  This example data can be loaded into the editor by clicking the hyperlinks under the import area.

  1. A new Visualization Editor window will open on the “Import Data” tab.
  2. 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.)
  3. 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.
    Example of Data displayed in Visualization chart editor
  4. If your data appears correct in the preview, click on the “2. Choose Visualization Type” tab along the top of the editor window.

Choosing Visualization Type

All the visualization types can now be created within the same editor.  You can return to this tab and preview various chart types from the same data source.

  1. From the visualization Tab, select the type of Visualization you want by clicking on the icon for that type.
  2. Scroll down to show the “Configure your Chart” button or click on the “3. Configure” tab to continue.

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, or Combo)
  • Chart Subtype: Bar charts can be created with three subtypes: Regular, Stacked, Horizontal.  Stacked bar charts are vertically oriented.
  • Title: Text entered here displays in a title bar along the top of the chart
  • Description: Text entered here appears under the chart to help the viewer understand the chart’s context
  • Chart Height: This number sets the fixed height of the chart.  Most charts will not require configuration.

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.
    • Note:  If a “Combo” chart was selected in the General section, this is where you select “line” for the data series you want displayed as a line.
  • Confidence Keys: If your data contains values for Upper and Lower confidence values, you can select those here.

Y 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 padding between the label and the Y-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.
  • Prefix and Suffix: This option adds additional text before and after the data for the Y-Axis and displays in the “Data Table.”

X Axis

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

  • 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.
  • Data Type: Use this option change how data in the chart timeline displays.  If date is selected “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”.
  • Size: 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.
Chart base rotation illustrated

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)

Legend

  • Hide Legend: Selecting this option hides the legend from the page
  • 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

Visualization

  • 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.
  • Header Theme: This option sets the theme color for the title header if one is entered in the title field.
  • Color Chart Palette: Select from five color palettes:
    Examples of Color Palettes that can be selected for Charts in WCMS
  • 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.

Data Table

  • 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.
  • Label: This text displays at the top of the data table

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.

WCMS Quick Facts

You can include / exclude specific data series from the chart visualization. This is done by adding and removing “Displaying” elements in the “Data Series” section of the configuration tab.

You can use either the tabs along the top of the visualization editor or the blue navigation buttons within each tab to progress through the building process.  The “OK” button will close the editor.

To create a Bar-Line combo chart, select “Bar” chart as your visualization type.  Then, under the “General” section of the Configure tab, select “Combo” from the “Chart Type”.  You can select which data displays as a bar or a line in the “Data Series” selection process.

Look for feedback from the visualization editor throughout the process to guide choices and troubleshoot errors.

Page last reviewed: May 23, 2019
Content source: WCMS / Template Team