Chart type dialog

38d87d9852a66eea29da00ae16511664

Updated at February 25th, 2020

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. 

Modify an element's chart

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. 

Lets look at a chart for which the following options were selected:

Example chart

By choosing the above options, 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 Beta 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. 

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. 


Additional options

In the bottom right corner of the "Chart type" dialog, you can choose to edit additional options. The additional options available to edit are dependent on the chart type and options you've selected in the dialog. 

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. 

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.


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.





Was this article helpful?