Topics

See more

Bar Line Combo

Configure Bar Line Combo Chart

Data Configuration

Visual Configuration

User-Defined Colors

Configuration Options in Full-Screen Mode

A Bar Line Combo chart combines the features of a Bar chart and a Line chart. With this visualization, you can show data from two different columns on the Y-axis. These metrics, clubbed together on a single visualization, help you discover additional insights.

In the example below, a Bar Line Combo chart is created to compare issue allocation and resolution across assignees.

To create a Bar Line Combo chart:

  • Right-click on the Assignee column > Select View> Change> Bar Line Combo.

mceclip0.png

Refer here to learn more about creating a visualization.

The following figure shows the resulting Bar Line Combo chart.

mceclip1.png

Configure Bar Line Combo Chart

  • Select your Bar Line Combo chart and open the Visualizations Panel.

mceclip2.png

The following configuration options are available for Bar Line Combo chart: 

mceclip3.png

  1. Data Configuration mceclip4.png: It lets you choose columns for the following settings:
    1. Bar Value
    2. Line Value
    3. Shared Axis
    4. Color Saturation
    5. Sorting
  2. View Configuration mceclip5.png: It lets you configure the visual appearances and interactions of the Bar Line Combo chart.
    1. Labels
    2. Bar Options
    3. Lines
    4. X-Axis
    5. Y-Axis
    6. Zoom
    7. Legend
    8. Container Settings
    9. Visual Interactions
  3. Visualization Level Filters mceclip6.png: They let you filter the data in the visualization without impacting other visualizations on the same data set. 

Refer here to learn more about Visualization Level Filters.

  1. User-Defined Colors mceclip7.png: They let you add meaning to a data point by associating a specific color to it. User-defined colors also help you to differentiate a data point from the rest.
  1. Colors for Individual Data Item
  2. Color Saturation Settings 

Data Configuration

Click on the mceclip8.png icon for data configuration options.

Bar Value

Specify the column whose values should be aggregated, as per the categories, to create bars.

 To change the column:

  1. Click on the mceclip9.png to remove the existing column.
  2. From the Data Panel, drag the desired column and drop it onto the Visualizations Panel’s “Bar Value” section. 
    Note.pngNote: You can also type the column name in the Data Panel to quickly find it.

  3. Click on the  mceclip10.png   icon to select the aggregate function from the drop-down.
    • Aggregate functions for textual data: Count, Unique Count
    • Aggregate functions for numerical data: Count, Unique Count, Sum, Min, Max, Avg
  4. You can add multiple columns to the Bar Value to create a stacked or grouped Bar chart.
  5. You need to separately select aggregate functions for each column in the Bar Value section, as explained above. 

Refer here to learn more about the stacked and grouped Bar charts. 

Line Value

Here, you can specify the column whose values should be aggregated, for the chosen categories, to create lines. 

To change the column:

  1. Follow the same steps as shown above for “Bar Value”.
  2. You can add multiple columns to the Line Value to create a multi-line chart.
  3. You need to separately select aggregate functions for each of the multiple columns added to the Line Value section, as explained above. 

Shared Axis

On the Shared Axis,  you can specify the column which contains specific categories to be compared. 

To change the column on Shared Axis:

  1. Click on mceclip11.png to remove the existing column.
  2. From the Data Panel, drag the desired column and drop it onto the Visualizations Panel’s “Shared Axis” section. 

Date and Time Grouping on Shared Axis

You can create Bar Line Combo charts by setting date and time values on the Shared Axis. When specifying a column with date and time on the Shared Axis, you can group the dates by year, quarter, month, week, day, hour and minutes. 

  1. From the Data Panel, drag the Date, DateTime and Time type column and drop it onto the Visualizations Panel’s “Shared Axis” section.
  2. Click on the mceclip13.png icon and select ‘Group By’ .
  3. Select the appropriate interval.

For Bar Value and Line Value, let’s take ‘Key’ column and ‘Resolved’ column respectively. Select ‘Count’ aggregate function to find out the total number of issues created and resolved. Similarly, drag and drop the issue creation date- ‘Created’ column to the Shared Axis and group the data by ‘Month’. The changes are shown in the image below. This enables you to compare the number of issues allocated vs resolved issues over a time period. 

mceclip12.png

To learn more about Date & Time grouping, refer to the following GIF. 

Note.pngNote: Steps for date and time grouping are the same for Bar and Bar Line Combo chart.

1_Data_config-min.gif

Color Saturation

You can use color gradients to show the progression of data from high to low values. Each bar will be colored with a shade from the spectrum between the two colors defined as ‘Minimum’ and ‘Maximum’.

To apply color gradients:

  1. Drag the desired column from the Data Panel and drop it on the Visualizations Panel’s “Color Saturation” section.
  2. Select the aggregate function by clicking on the mceclip13.png icon. 

In this example, the Bar Line Combo chart reflects the gradient with light colors for low values and dark colors for high values calculated as Count (Key). 

mceclip14.png

To customize the shades of color saturation, refer to section- ‘Color Saturation Settings’. 

Sorting

You can sort the Bar Line Combo chart based on the values of Shared Axis or Bar Value or Line Value. 

Note.pngNote: By default, the Bar Line Combo chart is sorted by the values shown on Shared Axis.

To change the sorting order:

  1. Click on mceclip15.png icon and select the column from the dropdown.
    mceclip16.png
  2. Click on the  mceclip2.png or mceclip3.png icon to select the sorting order (ascending or descending).
  3. Click on ‘Add Level’ to add more columns for multi-level sorting.
  4. Drag and drop columns within the sorting section to reorder the sort levels.
  5. Click on the mceclip4.png icon to remove the sorting level. 

To learn more about sorting, refer to the following GIF. 

Note.pngNote: Steps for sorting are the same for Grid and Bar Line Combo chart. 

3_Sorting-min.gif

Visual Configuration

  1. Click on the mceclip5.png icon for visual configuration settings. 

Labels

You can hide or show the data labels with the toggle switch.

  1. Provide the font size of data labels.
  2. Click on the mceclip6.png icon and select a font color. To restore the default color setting, click ‘Reset to Default’. 

mceclip17.png

Bar Options

Bar charts have two variations-

  • Grouped
  • Stacked

They can be really useful to display information about the sub-groups that make up the different categories. These are usually colored differently which makes it easy to distinguish between the sub-groups.

  • Click on the arrow mceclip7.png icon to see the options for Bar chart type. 

mceclip18.png

Stacked Bar Chart

In Stacked Bar charts, the bars representing the sub-groups are placed on top of each other to make a single column. They are great for showing the total value because they visually aggregate all the categories in a group.

Here is the Stacked Bar chart: 

Grouped Bar Chartmceclip19.png

In Grouped Bar charts, a separate bar represents each sub-group (e.g. Issue types). They are useful when you want to see each element in different categories or compare elements across categories.

mceclip20.png

Line Style

To turn lines selection on or off:

  1. Select the toggle switch.
  2. Choose between Linear and Smooth line style.

The following example shows the visualization with no lines.

mceclip21.png

If you choose to have smooth lines, then your chart will look like this-

mceclip22.png

With linear lines, your chart will look like this- 

mceclip23.png

X-Axis

  • Type in the title for X-Axis.

mceclip24.png

Y-Axis

  • Choose the number of decimal places you want to display the values with.
  • Select the Axis type.
  • Type in the Axis title. 

mceclip25.png

Axis Types

There are two ways to plot values in a Bar chart - linear and logarithmic. 

On a linear scale, a change between two values is perceived on the basis of the difference between the values, whereas, on a logarithmic scale, this change is perceived on the basis of the ratio of the two values. 

The main reason to use logarithmic scales in charts and graphs is to respond to skewness towards larger values; i.e., cases in which one or a few points are much larger than the bulk of the data. 

When plotting disparate data on a linear scale, the smaller values get lesser prominence while the larger ones occupy the entire scale. In such cases, using a logarithmic Axis type is recommended. 

The following figures demonstrate the Bar Line Combo charts with linear and log axis types, created for the same data. 

Bar Line Combo chart on the linear axis: 

mceclip26.png

Bar Line Combo chart on the logarithmic axis for the same data: 

mceclip27.png

Zoom Option

This option enables you to clearly understand specific data in your Bar Line Combo chart by zooming it.

  • Keep the Zoom Option ‘On’ by selecting the toggle switch.
  • For the Zoom Panel, select the ‘Show’ option from the drop-down list to select the part of your chart by dragging its edges in either direction.
  • Select the ‘Hide’ option from the drop-down list to hide the Zoom Panel. 

Here is an illustration:

mceclip28.png

Legend

Legend helps you identify and correlate data on your chart. They provide an overview of the different data points involved in the chart along with the colors associated with each of them. Legend consists of Heading and Items.

  1. To turn legends on or off, select the toggle switch next to Legend. 
  2. Select legend position (Left, Right).
  3. Enter text for the legend heading. 
Note.pngNote: Click on legend items and related data will be highlighted in the visualization.

mceclip29.png

Container Settings

  1. To show/hide the header and border, click the toggle switch. 
  2. Turn on the toggle switch to show the border for the container. Change the border color, style and width as shown below: 

mceclip30.png

The following figure displays the effect of various container settings for your Bar Line Combo chart.

mceclip31.png

Visual Interactions

  • Select the target behavior and coordinated visualization scope from the below settings.

mceclip32.png

To learn more, refer to section- ‘Configure Coordinated Visualization’. 

User-Defined Colors

  • Click on the mceclip33.png icon for user-defined colors. 

Colors for Individual Data Item

It lets you add meaning to a data item by associating a specific color to it and differentiate some data items from the rest.

For example, the red and green color may be used to represent “Off Track” and “On Track” issues, respectively. Whereas, orange color may be used for the “Bugs” type of issues to draw attention.

To change the colors:

  1. Click on the mceclip9.png icon next to the data item for which you want to change the color.
  2. Select the color from the available color grid or click ‘More Colors’ to choose a color from the spectrum. 
  3. To restore default settings, click on ‘Reset to Default’.

As shown below, blue color has been added to differentiate that data item from the rest. 

If ‘Color Saturation’ is not selected, you can choose the color for your visualization as shown in the following figure:

mceclip34.png

Color Saturation Settings

The following figure shows the default color saturation settings for your visualization. 

mceclip35.png

To customize the color gradient effects:

  1. Select the Minimum and Maximum color.
  2. Toggle ‘Diverging’ option.  An additional color selector for mid-range value, called Center, appears.
  3. Select ‘Center’.
  4. You can provide custom values representing ‘Minimum’, ‘Center’, ‘Maximum’ Values. All bars larger than ‘Max Value’ are colored in ‘Max Color’ whereas those less than ‘Min Value’ in ‘Min Color’. 

To learn more about color saturation settings, refer to the following GIF. 

Note.pngNote: Steps for color saturation settings are the same for Bar and Bar Line Combo chart. 

3_Color_saturation-min.gif

Configuration Options in Full-Screen Mode

Visualization can be seen in full-screen mode by clicking on the mceclip10.png icon.

Note.pngNote: Visualizations Panel is not accessible in full-screen mode.
  1. Click on the mceclip11.png icon at the top-right corner of the container.
  2. Select ‘Configure View’ from the overflow menu. mceclip36.png
  3. A pop-up form with all the relevant configuration options will appear on the screen.
  4. Configure your visualization and click on ‘APPLY’.mceclip37.png
↑