In this tutorial we explain how you can make changes to an element's chart using the "Chart type" dialog. For in-depth tutorials on particular chart topics try browsing through our Charts help category. 

Change an element's chart type

To customize the chart for any element, select "Chart type..." from the context menu. 

You can choose the chart type, chart options and toggle visibility of the legend.

Press to select an option. Green indicates that the option is selected. Press again to deselect. Choices that appear transparent are not available for the element you've selected. 


Example chart

By choosing the above options seen in the first image, this crosstabbed element is shown as a stacked bar chart with the legend on the right:


Chart types

Most of us are familiar with common chart types like: column, bar, line, pie, and scatter charts. Below is an overview of the chart types that are specific to Protobi.

Standard

This is Protobi's default chart type. Response categories are on the left and small bars representing frequency are on the right.

Beta

Protobi's Print layout chart is useful for compacted groups. The child elements will appear as variables on the left with frequencies as stacked bars to the right. Response categories are represented at the top of the chart. Learn more about Beta charts.

Tabs

If you prefer not to scroll down to view elements, you can set the group's chart type to Tabs. Each child element will be on an individual tab. This chart type is typically useful for groups with many children. 

Navigation tip: Press on the group (e.g. Report) to select. You can then use the left and right arrows on your keyboard to quickly navigate through the tabs. 

Other chart types:

(press links for detailed tutorials)


Chart options

Stack

For crosstabbed column or bar charts, we can choose a stacked view. The image on the left is a clustered column chart for Q1 crosstabbed by Speciality. The image on the right shows what the same element looks like after we select "stack" under chart options. 

 

Show bars

For standard charts, the default is to show bars. You can deselect "show bars" to hide the bars from view. This option also works for paired charts.  

Swap 

Below we have Q1 crosstabbed by Speciality as a column chart. We can select "swap" in chart options to switch category and legend variables.  

Overall

Below, q7 (crosstabbed by general Satisfaction) shows the percentage of respondents who chose "Very favorable" for each legend variable. If you select the "overall" option, a column showing the overall numbers regardless of satisfaction level will appear. 

Reverse-x and reverse-y

These options reverse the plotting order of categories on the axises. Below, we selected both reverse-x and reverse-y. 

Wrap

This option wraps text that is too long to include in the chart. Below, the original view of the chart includes ellipsis where text is cut off. After selecting "wrap" in chart options we can see the full responses. 


Legend

Press the legend option to show legend. There are three options to determine legend position. If none are selected, the legend is defaulted to the "top" position. 


Slide

For selected chart types, you can choose the slide layout option. This option arranges the Protobi element like a PowerPoint slide. An element with the slide option selected behaves the same as those without. They are still interactive and editable. 

In slide layout, the headline becomes the slide title and title becomes the slide text.

The slide size, layout, fonts and styles are based on the PPTX template selected for your project. If a Custom PPTX template is not referenced in Project overview, the project will default to Protobi’s template. 

Protobi has built-in defaults for various template sizes, including standard 4:3 (7.5 x 10in) as well as widescreen 16:9 in both small (5.63 x 10in) and large (7.5 x 13.33in).

PowerPoint options

charts: Export to PowerPoint as native, editable charts 

shapes: Export as editable shapes and text

image: Export as static image

keep table: For Print layout charts, export legend, y-axis categories, and statistics columns as a table behind the chart

update only: Only update the chart data and keep other chart formatting as it is in the template. This is for projects with custom PowerPoint templates.

More properties

Use the keyboard shortcut: SHIFT + E + P to open "More properties", it is also available from the Editor panel.

Theindicates that the option is selected. Press to deselect the option.

Theindicates that the option is not selected. One press will reset the option to the default state. Two presses will select the option.

The options readily available to edit are dependent on the chart type and options you've selected in the dialog. Add attributes by entering a "key" and "value" pair.

Press the "+" sign next to each sub-category to expand and edit those additional options. 

You can reset all advanced chart options at once by pressing the "Reset..." button on the bottom right. There is also a button that lets you return to the "Chart type" dialog.

Press directly on chart components to edit properties

You can press on the axises and legend to edit the properties. 

Protobi and visualization libraries

The challenge of data visualization is that no matter how many options are available, the next chart you want to create often seems to require one more feature.

Protobi uses Plotly.js, a leading data visualization library for many charts, including bar, pie, line, scatter, column, etc. We use other libraries for specialized graphs, such as Timothy Chien's library for word clouds and Ben Frederickson's library for Venn diagrams.

Protobi passes the chartOptions object directly through to the each library, allowing you to specify any of the myriad options available. Further we automatically fill in default values for many common options allowing you to easily browse the JSON editor and identify options you might specify. Choose "Edit JSON..." from the context menu to make changes to the chartType and chartOptions attributes. 

Below, we've included the JSON for the Example chart.

JSON for the Example chart


{
    ...
    "chartType": "BarChart",
    "chartOptions": {
        "width": 480,
        "height": 230,
        "transposeData": true,
        "plotlyType": "bar",
        "dataValues": true,
        "type": "bar",
        "orientation": "v",
        "barmode": "stack",
        "showlegend": true,
        "legendpos": "right",
        "legend": {
            "orientation": "v",
            "traceorder": "normal",
            "yanchor": "top",
            "xanchor": "left"
        },
        "titlefont": {
            "size": 12
        },
        "margin": {
            "l": 40,
            "r": 10,
            "t": 10,
            "b": 20
        },
        "xaxis": {
            "tickangle": 0,
            "tickfont": {
                "size": 12
            },
            "titlefont": {
                "size": 12,
                "weight": 700
            }
        },
        "yaxis": {
            "title": "",
            "type": "category"
        }
    },
    "displayKey": null
}





Special charts (not seen in Chart type dialog)


Video tutorial

Watch this brief video on the Chart type dialog in Protobi.

[insert-question 399932]