\napp.run_server(debug=True)
Hey everybody, Welcome. Dash is the topic that we are going to discuss today. Dash is developed by Plotly. Some of you might have got an idea that Dash is perhaps about graphs because of Plotly. And yes, you are absolutely right. Dash is about representation of graphs in a web UI (user interface). Web UI doesn\u2019t mean that Dash requires an active internet connection to run, rather it just needs a server and will run on \u201clocalhost\u201d or \u201c127.0.0.1\u201d. Dash happens to run on port 8050 by default, so when you run your Dash application on your browser you would go on the address as \u201c127.0.0.1:8050\u201d.<\/p>\n
First of all, we have to install Dash on our system. Hit Ctrl+Alt+T on your Ubuntu, it would open up terminal. In order to run Dash applications on our system, we would install 4 to 5 packages using following command:<\/p>\n
$ sudo pip install dash dash-renderer dash-html-components dash-core-components plotly<\/p>\n
OR<\/p>\n
$ sudo -H pip install dash dash-renderer dash-html-components dash-core-components plotly<\/p>\n
When you will add -H it would not issue a warning because you would get to the Home variable by using -H in the command. Even if you don\u2019t use it, it would be okay as it would display a warning but Dash would get installed anyway.<\/p>\n
Now, you would go on to create a python script. Our first example of code would just display a simple output in our web browser on the server address and port mentioned above. In the example, first 3 lines would be the imports of dash, dash-core-components and dash-html-components respectively. Dash-core-components as dcc means that wherever we want to use dash-core-components we can use \u2018dcc\u2019 instead and similarly where we want to use dash-html-components, we can use \u2018html\u2019. Dash() is the built in class which holds the default code for Dash applications. \u2018app.layout\u2019 represents everything in web UI which means anything you want to display in the browser in Dash application, it has to be written in the operating zone of \u2018app.layout\u2019. Following our first simple code example which just displays a simple output:<\/p>\n
import dash
\nimport dash_core_components as dcc
\nimport dash_html_components as html<\/p>\n
app = dash.Dash()<\/p>\n
app.layout = html.Div(‘LinuxHint YouTube Hi’)<\/p>\n
if __name__ == ‘__main__’:
\napp.run_server(debug=True)<\/p>\n
Second example is about creating a graph. We would use \u2018dcc\u2019 which essentially means dash-core-components and we would create a graph using it. In our example, we have drawn an example graph of Energy and Time with random values of \u2018x\u2019 and \u2018y\u2019 by giving a type of \u2018line\u2019 to Energy and a type of \u2018bar\u2019 to Time. We would do all of that inside a method dcc.Graph() in which we would name our both axis of the graph and set the title of graph as well.<\/p>\n
import dash
\nimport dash_core_components as dcc
\nimport dash_html_components as html<\/p>\n
app = dash.Dash()<\/p>\n
app.layout = html.Div(children=[
\nhtml.Div(children=’LinuxHint Youtube Hi’),
\ndcc.Graph(
\nid=’graphss’,
\nfigure={
\n‘data’: [
\n{‘x’:[1,2,3,4,5,6,7], ‘y’:[11,12,22,23,24,44,55], ‘type’:’line’, ‘name’:’Energy’},
\n{‘x’:[1,2,3,4,5,6,7], ‘y’:[13,15,26,27,34,44,65], ‘type’:’bar’, ‘name’:’Time’},
\n],
\n‘layout’: {
\n‘title’: ‘Graph for Time and Energy’
\n}
\n}
\n)
\n])<\/p>\n
if __name__ == ‘__main__’:
\napp.run_server(debug=True)<\/p>\n
Pro Tip: While writing python script, use a python IDE or a smart text editor which indents the code automatically for you. Avoid using simple notepad or text editor for python scripts as indentation of code is an important factor in python while running it.<\/p>\n
I will explain this in more details in video form as well.<\/a><\/p>\n