Sign in
x
☰

See and edit data for charts in table view

Override automatic calculation and specify custom data for Protobi charts

Updated at 2023-09-25

It is now possible to see – and edit – the data table underlying charts Protobi.   

This is a nascent feature and currently applies only to charts that use from Plotly library (e.g. column charts, bar charts, pie charts, line charts).  Support for other chart types is in development.  It is also not yet fully tested, so please let our team know of any issues you see.

Show data table

To show the data table, bring up the advanced chart options.  Press the gear icon or press the circle-or-square  edit icon and choose “Edit properties” from the context menu:

Stacked bar chart displaying Q14 responses by Wave, showing percentages for efficiency ratings from "Not efficient at all" (bottom, dark blue) to "Extremely efficient" (top, dark green) across waves W1, W2, and W3. An "Edit..." button appears in the top right corner.

Expand the last group “Edit chart options” and set “showDataTable” to true:

The chart editor interface for "sd1_pie" displays multiple collapsible sections including Properties (E M), Chart type (E H), Chart Gallery (E G), and others. The "Edit chartOptions" section (E P) is expanded, showing configuration fields such as height: 240, width: 390, hoverinfo: x+y+name, legendpos: above-flat, orientation: v, plotlyType: pie. The showDataTable checkbox is checked with a green checkmark, highlighted with a red circle indicator. A tabular data view displaying the same Q14 question data in table format with response categories as row labels ("Name" column) and waves W1, W2, W3 as column headers. Values are shown as decimals (e.g., 0.0350, 0.0692, 0.0562 for "Don't know"). The table shows all six efficiency rating categories with their corresponding proportions across the three waves.

To edit the data, double click on any cell and press “Ok” to confirm:

A modal confirmation dialog box with a blue header bar displaying "Confirm" in white text. The dialog body contains the question "Do you want to edit the data?" with two action buttons at the bottom: a gray "Cancel" button on the left and a blue "Ok" button on the right.

You can now edit the raw directly via the table. In the example below, the W1 values are now powers of 0.5:

The data table displays editable cells with the W1 column showing simplified fraction-based values: "Don't know" (0.03125), "Extremely efficient" (0.5), "Very efficient" (0.25), "Somewhat efficient" (0.125), "Slightly efficient" (0.0625), and "Not efficient at all" (0.03125). The W2 and W3 columns maintain their original decimal values with extended precision.

Set showDataTable to false in the Edit Properties… dialog and observe that the specified values now apply:

The stacked bar chart now reflects the edited data with W1 showing a dominant 50% segment for "Very efficient" in dark green at the bottom, followed by 25% "Very efficient" in lighter green, 13% "Somewhat efficient", 6% "Slightly efficient", and small segments for "Not efficient at all" and "Extremely efficient" at the top (3% each). W2 and W3 bars remain unchanged with their original mixed distributions. The chart title reads "Discrete, column chart, swap, crosstab, stacked by Wave".

Actually you can take even more direct control over not just the data but other options of the visual presention.  Select Edit JSON… from the context menu and observe the attribute plotly. This specifies an entire Plotly.js chart configuration.  Google Plotly.js or contact support at Protobi for help…

A JSON code editor titled "Element properties: sd1_column_swap_cros..." displays the underlying data structure for the chart. Visible JSON attributes include line 21 showing "name": "Very efficient", line 22 with "5": "Extremely efficient", line 24 "isCaseWeight": false, line 25 "maxValue": null, and line 26 beginning a "plotly" object. Lines 27-57 show nested arrays for the "Don't know" category with "rowKey": "0", "name": "Don't know", "x" array containing ["W1", "W2", "W3"], "y" array with decimal values [0.03125, 0.069264069264069264, 0.056277056277056628], "values" array with matching decimals, "text" array showing ["3%", "7%", "6%"], and "rowKeys" array containing ["1", "2", "3", "4", "5", "0"]. Cancel and Ok buttons appear in the top right.