In App Charting

1. Summary
2. Charts
   1. Details
   2. Configuration
3. Viewing Charts in QBench
4. Viewing Charts in Templates (Reports/PrintDocs/etc)
   1. Visual Editor Template Example
   2. Code Template Example
   3. Advanced Configuration

Summary

Charting allows Admins to render various data from different QBench data types into dynamic Charts that can be viewed in App or used in Reports.

Charts

Details

Define important details about your Chart.

Fields

• Name: Display name of the chart. Must be Unique.
• Data Type: This is where you will define what data type you will be pulling your data from. You will not be able to change this value after the Chart is initially created. The current options are:
  • Test - Worksheet Only: Select this if you are only wanting to build a chart based on Worksheet data alone. Note: Worksheet Charts only work with Spreadsheet Worksheets.
• Active: Enable/disable your chart throughout QBench.

Configuration

The Configuration tab is where you will design where your Chart data will from, what kind of chart you would like to render, and you can customize your Chart to look exactly as you need!

Fields

• Chart Type: Type of Chart that you would like to display (ex: Bar, Line, Pie, etc.).
• Worksheet Cell Range: Configure which Worksheet cells your data will be from (Example: "A3:D10").

The Layout and Traces sections will have different fields based on the Chart Type selected. Play around with the different Chart Types to see all the different customization options!

 

Viewing Charts in QBench

To view Charts in QBench, you will need to assign Charts to an Assay. To do this...

• Navigate to an Assay
• Click on the new "Charts" tab on the Assay Details page.
• Click on the "Test Charts" dropdown to select what charts you would like to render for any Test that is created using this Assay.
• Next, navigate to a Test that was created using this Assay and click on the Charting icon on the top-right hand corner of the Test Details page.
• From here, a modal will pop up showing you all the Charts assigned to Test from the Assay "Test Charts" field.

 

Viewing Charts in Templates (Reports/PrintDocs/etc.)

Charts can be rendered inside any template in QBench. From Reports to PrintDocs to Labels even!

Visual Editor Template Example

To render a Chart inside a Visual Editor template, we will use a Report for this example, follow these steps:

• Place your cursor in the location you would like to insert the Chart and click on the "Insert Variable" button in the editor.
• Make sure to select the Data Type in the Top Level Variable that matches the Data Type defined in the Chart Details of the Chart you are trying to render
  • Example: The Chart Data Type I for the Chart I am going to render is Test - Worksheet Only so I am going to select "Test" in the Top Level Variable dropdown.
• Next, select "Render Chart" in the Available Fields dropdown.
• Enter in the exact name of your chart in the Chart Name field.
• Finally, click Insert at Cursor!

After you refresh the preview, you should see your chart rendered in the report preview section like so

Code Template Example

You can render Charts inside of Code Templates using the QBench Jinja Services. Here is an example usage:

<img src="file://{{ QBTestService().render_chart('Demo Chart', test) }}" />

View the `render_chart` function in the QBench Jinja Services documentation for more information.

Advanced Configuration

If you are looking for more custom configuration options for your Chart, other than what is provided in the Chart Configuration options, you can utilize the many configuration options Plotly has to offer in their documentation.

Here is an example on how to pass these configurations to your chart

{% set config = {
    'layout': {
        'showlegend': True
    }
} %}
<img src="file://{{ QBTestService().render_chart('Demo Chart', test, config_override=config) }}" />

Layout Customization Example:

Plotly Layout Documentation: https://plotly.com/python/reference/layout/

Layout configurations should be passed to the `config_override` param in the "layout" key. Let's say we wanted to change the background color of the legend in our Chart. 

• Navigate to their Layout documentation (view the link above)
• Search for "Legend"
• Search for the background color configuration under legend
• Locate the unique key needed to edit the configuration
• Use the unique key from their documentation inside the "layout" dictionary and pass the configuration to the "config_override" param in the "render_chart" function.

{% set config = {
    'layout': {
        'legend_bgcolor': 'yellow'
    }
} %}
<img src="file://{{ QBTestService().render_chart('Demo Chart', test, config_override=config) }}" />

Trace Customization Example:

Each Chart Type has a different Trace configuration options. Here is the Plotly documentation for each Chart Type currently offered

• Bar: https://plotly.com/python/reference/bar/
• Scatter/Line: https://plotly.com/python/reference/scatter/
• Pie: https://plotly.com/python/reference/pie/

Layout configurations should be passed to the `config_override` param in the "trace_configs" key as a list of trace configurations. Let's say we wanted to change the Opacity of each trace in our Chart. 

• Navigate to the Plotly documentation for Bar charts (view the link above)
• Search for "Opacity"
• Locate the unique key needed to edit the configuration
• As the documentation says, the value must be between 0 and 1 so we will enter "0.25" to reduce the Opacity

{% set config = {
    'layout': {
        'legend_bgcolor': 'yellow'
    }
    'trace_configs': [
        {'opacity': 0.25},
        {'opacity': 0.25},
    ]
} %}
<img src="file://{{ QBTestService().render_chart('Demo Chart', test, config_override=config) }}" />

Note: Observe how 'trace_configs' is a list. This is because there can be one or more trace configurations for your Chart. If we wanted to edit only one Trace in our Chart, we would need to setup the config like so:

{% set config = {
    'layout': {
        'legend_bgcolor': 'yellow'
    }
    'trace_configs': [
        {},
        {'opacity': 0.25},
    ]
} %}
<img src="file://{{ QBTestService().render_chart('Demo Chart', test, config_override=config) }}" />