{"id":212,"date":"2020-11-08T21:42:56","date_gmt":"2020-11-08T18:42:56","guid":{"rendered":"http:\/\/www.etemkeskin.com\/?p=212"},"modified":"2020-11-23T15:05:32","modified_gmt":"2020-11-23T12:05:32","slug":"how-is-dash-plotly-data-visualization-framework-used-in-django","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/08\/how-is-dash-plotly-data-visualization-framework-used-in-django\/","title":{"rendered":"HOW IS DASH PLOTLY DATA VISUALIZATION FRAMEWORK USED IN DJANGO?"},"content":{"rendered":"\n

Dash is open source web application framework to create interactive web-based visualizations. It was developed based on Flask, Plotly.js<\/strong>, and React.js<\/strong> libraries. We may also want to use the power of this web framework in Django projects. I will explain how to do this in this post.<\/p>\n\n\n\n

We will use the django_plotly_dash<\/strong> package developed to use Dash in Django projects.<\/p>\n\n\n\n

1. Installation<\/h3>\n\n\n\n

Firstly, Use pip<\/code> package manager to install the package as follows;<\/p>\n\n\n\n

pip install django_plotly_dash<\/code><\/pre>\n\n\n\n
Then, we add django_plotly_dash<\/code><\/strong> to INSTALLED_APPS<\/strong> in the Django settings.py<\/strong> file.<\/p>\n\n\n\n
INSTALLED_APPS = [\n    ...\n    'django_plotly_dash.apps.DjangoPlotlyDashConfig',\n    ...\n    ]<\/code><\/pre>\n\n\n\n
Also, we add the following line to the settings.py<\/strong> file.<\/p>\n\n\n\n
X_FRAME_OPTIONS = 'SAMEORIGIN'<\/code><\/pre>\n\n\n\n
The application\u2019s routes need to be registered within the routing structure by an appropriate include<\/code> statement in a urls.py<\/code> file as follows;<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
...\n    path('django_plotly_dash\/', include('django_plotly_dash.urls')),\n]<\/code><\/pre>\n\n\n\n
File structure of urls.py<\/strong> is as follows;<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
For the final installation step, a migration is needed to update the database:<\/p>\n\n\n\n
python manage.py migrate <\/code><\/pre>\n\n\n\n
2 . Running the First Application <\/h3>\n\n\n\n
We are also creating our django application called dashreporting<\/strong> where we will collect our Dash applications.<\/p>\n\n\n\n
python manage.py startapp dashreporting<\/code><\/pre>\n\n\n\n
We register our dashreporting<\/em> application to INSTALLED_APPS<\/strong>  in settings.py<\/strong> file.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n

We create a folder named dash_apps<\/strong> under the dashreporting folder to collect our Dash apps in a folder.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Also we create urls.py<\/strong> in dashreporting<\/strong> application. We need to import our apps into urls.py ‘file. We need to import our apps into urls.py ‘file. We define paths in urls.py and define which view functions will work.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
We define the view functions that will work in our dashreporting application.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
We create our first dash application by creating an app1.py<\/strong> file in the dash_apps folder.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n

We use DjangoDash (‘SimpleExample’) instead of dash.Dash () used to create the dash app in Django. In addition, we give the name of the app we will use in template as an argument. Here we set it as ‘SimpleExample’.<\/p>\n\n\n\n
Finally, it is left to render our dash report in our template. For this, we add the following template tags in our template.<\/p>\n\n\n\n
{%load plotly_dash%}\n{%plotly_app name=\"SimpleExample\"%}<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
We will get our Dash graph in web browser as follows;<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
SOURCES<\/h4>\n\n\n\n
  1. https:\/\/django-plotly-dash.readthedocs.io\/en\/latest\/index.html<\/li><\/ol>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    Dash is open source web application framework to create interactive web-based visualizations. It was developed based on Flask, Plotly.js, and React.js libraries. We may also want to use the power of this web framework in Django projects. I will explain how to do this in this post. We will use the django_plotly_dash package developed to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,4],"tags":[],"yoast_head":"\nHOW IS DASH PLOTLY DATA VISUALIZATION FRAMEWORK USED IN DJANGO? - blog website<\/title>\n<meta name=\"description\" content=\"Dash is open source web application framework to create interactive web-based visualizations. It was developed based on Flask, Plotly.js, and React.js libraries. We may also want to use the power of this web framework in Django projects. I will explain how to do this in this post. We will use the django_plotly_dash package developed to use Dash in Django projects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/08\/how-is-dash-plotly-data-visualization-framework-used-in-django\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HOW IS DASH PLOTLY DATA VISUALIZATION FRAMEWORK USED IN DJANGO? - blog website\" \/>\n<meta property=\"og:description\" content=\"Dash is open source web application framework to create interactive web-based visualizations. It was developed based on Flask, Plotly.js, and React.js libraries. We may also want to use the power of this web framework in Django projects. I will explain how to do this in this post. We will use the django_plotly_dash package developed to use Dash in Django projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/08\/how-is-dash-plotly-data-visualization-framework-used-in-django\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-08T18:42:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-23T12:05:32+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/08\/how-is-dash-plotly-data-visualization-framework-used-in-django\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image.png\",\"contentUrl\":\"http:\/\/www.etemkeskin.com\/wp-content\/uploads\/2020\/11\/image.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/08\/how-is-dash-plotly-data-visualization-framework-used-in-django\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/08\/how-is-dash-plotly-data-visualization-framework-used-in-django\/\",\"name\":\"HOW IS DASH PLOTLY DATA VISUALIZATION FRAMEWORK USED IN DJANGO? - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/08\/how-is-dash-plotly-data-visualization-framework-used-in-django\/#primaryimage\"},\"datePublished\":\"2020-11-08T18:42:56+00:00\",\"dateModified\":\"2020-11-23T12:05:32+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"Dash is open source web application framework to create interactive web-based visualizations. It was developed based on Flask, Plotly.js, and React.js libraries. We may also want to use the power of this web framework in Django projects. I will explain how to do this in this post. We will use the django_plotly_dash package developed to use Dash in Django projects.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/08\/how-is-dash-plotly-data-visualization-framework-used-in-django\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/08\/how-is-dash-plotly-data-visualization-framework-used-in-django\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2020\/11\/08\/how-is-dash-plotly-data-visualization-framework-used-in-django\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HOW IS DASH PLOTLY DATA VISUALIZATION FRAMEWORK USED IN DJANGO?\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/212"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=212"}],"version-history":[{"count":38,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/212\/revisions"}],"predecessor-version":[{"id":572,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/212\/revisions\/572"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}