To create a truly interactive app with Dash you need to use callbacks. You can achieve the same thing with Plotly and Flask.

It may seem as if I have something against Dash. Honestly, I haven’t; it’s a fine product, comes with a lot of support from Plotly and does what it is intended to do, well.

But, as I attempted to demonstrate in a previous article, there is no need to write HTML in Python (as Dash requires you to do) when you can write it in HTML! And, I would now add, there’s no need for additional layers of complexity in a Flask app — fundamentally, Dash is a Flask app — when a smidgen of Javascript and HTML will do the same job.

In my previous article I demonstrated that you can create a simple web app incorporating Plotly charts without Dash. Instead you can use a combination of Flask and a web page template. This also gives you the advantage to create multi-page apps.

But Dash also allows you to create apps that are interactive by loading new data into a chart using callback functions. So the question is can we easily do this with our Plotly plus Flask model? And, of course, the answer is ‘Yes’. Anything you can do with Dash you can also do with its underlying technologies: Python, Flask, HTML and Javascript.

Is it really easier, though?

That is for you to judge, but from my (possibly prejudiced) point of view it is. And if you need to learn just a tiny bit of HTML or Javascript that you have not come across before, then fine, you may find a use for it in the future.

To demonstrate this, we are going to very quickly run through a bare-bones web app that displays the GDP per capita for a range of countries. Where the interactivity comes in is that you can type in a new country name and the chart will automatically update by calling back to the server and reloading the chart with new data.

The app looks like this:

It’s based on data from the Gapminder Foundation that is included in the Plotly library and used in some of their example programs.

The app is really very small and quite simple but demonstrates the techniques that you can use (and gives you code you can reuse) to create impressive interactive dashboard apps. You will need to use a little HTML, a tiny bit of Javascript and know the very basics of how to create and run a Flask app (see here for a simple introduction: How to Create and Run a Flask App).

You can find a link to the code at the end of this article — download it as a zip file, or access it from my Github repository.

#plotly #data-visualization #ajax #dash #flask

An Interactive Web Dashboard with Plotly and Flask
2.95 GEEK