Welcome to a mini project to help people explore both plotly and their data. I began this project because I struggled with understanding how to interact with all the available charts that exist through plotly.

To run, just run the app.py file and navigate to the webpage that it is hosted on.

Home page

From there, you can drag and drop or upload xlsx or csv files to create data to populate the charts.

Once data has been uploaded, "Edit Chart Details" offers all px charting options, when selected, three dropdowns will be populated.

The first will have info from plotly linked so that you can reference the documents quickly and directly. The second will have all the options that the particular chart can be populated to alter the chart. The third will give all the optional layout arguments that you can use.

note: On the second and third dropdown, you may need to enter dictionaries or lists exactly how you'd encode them into python.

Once all desired options are populated, you can now make changes, this will populate the chart if it rendered properly.

You can see the chart in the area below the buttons. Show function will demonstrate how to replicate this call via px figures and update layout. Another set of code will represent what arguments were passed to the function, makeCharts. This particular function is useful in the sense that all you have to do is pass it a dictionary with "chart", "figure", "layout" keys and it will recreate the desired chart.

If the chart errors out, a new button will show up that will allow you to see the traceback message for where the function broke.

Example page

This is just an example of how you would call the function from inside python to return a dcc.Graph

Designer

This is where the fun begins, you can load a dataset here and create a layout via the tools available. You can save a layout, then export it to use in your own application alongside these tools. Once you are done with your layout, can start over by deleting it.

Also, the designer can be used in combination with flask-login to allow for end-user customizable kpis and dashboards.

note: Each automatically generated dcc.Graph comes with a pattern-matching id to be used in your callbacks. {"index": y, "type": "design-charts"}

Please enjoy!