Charts
Super Administrator
Updated at November 13th, 2019
Chart type dialog
To customize the chart for any element, select "Chart Type..." from the context menu:
Looking at the "Chart Type..." dialog, many common chart options are included. For instance, whether and where to show the legend, whether to show the "overall" numbers, swap category and legend variables, etc.
Video tutorial
Watch this brief video on the "Chart type" dialog in Protobi.
Example chart
A crosstab can be shown as a stacked bar chart with the legend on the right:
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 easily browse the JSON and identify options you might specify.
JSON for the above example
{
...
"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
}