Examples of what can be achieved through either:
- Configuring a Chart component with Plotly JSON
- Using a custom component
NOTES:
- This repo is intended for examples that can be configured entirely within the Retool IDE. It does not include custom components with a complete web bundling process to generate a single js file.
- Because the JSON may include inline JS, it does not necessarily conform to the JSON spec
- Because this content is taken straight from the Retool IDE, data and layout javascript objects may not conform to the JSON spec (e.g. unquoted keys)
Technical Webinar: Building Data-Driven Dashboards in Retool
Each configuration here contains a screencap of the visualization, and files containing JSON values that can be used
Not all files are present for every vis, but where available they should be used as follows:
- data.json: add to the Data field in the Chart component (after selecting the Plotly JSON option)
- layout.json: add to the Layout field in the Chart component (after selecting the Plotly JSON option)
- temp_state.json: create a temp variable to hold this value
- getData.js: create a getData JS query with the contents of this file. Set the Data option of the Chart component to {{ getData.data }}
- getLayout.js: create a getLayout JS query with the contents of this file. Set the Layout option of the Chart component to {{ getLayout.data }}
- anyOtherFunction.js: if there are more .js files, add them as JS queries using the same name eg 'anyOtherFunction' in this example
NOTE: if a temp_state.json file is provided, you will need to inspect data.json or layout.json to validate the correct name for the temp variable.
