{"id":16334,"date":"2017-10-04T19:38:41","date_gmt":"2017-10-04T14:08:41","guid":{"rendered":"https:\/\/www.fusioncharts.com\/blog\/?p=16334"},"modified":"2026-01-20T14:40:58","modified_gmt":"2026-01-20T09:10:58","slug":"creating-charts-in-django","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/","title":{"rendered":"How to Create Charts in Django: A 2026 Tutorial Guide"},"content":{"rendered":"Python was quickly becoming a popular programming language for creating web-based applications. The Django web framework was created to capitalize on this popularity and to enable the rapid deployment of secure and maintainable web applications.\r\n\r\nDjango, an open-source web framework built entirely in Python, employs the model-view-template (MVT) architectural pattern. This framework repurposes components designed to aid in rapid development. Because it is written in Python, this framework is very portable and can run on any platform. It also supports a number of client-side frameworks, templating engines, and databases.\r\n\r\nIn this post, we&#8217;ll go over how to make <a href=\"https:\/\/www.fusioncharts.com\/fusioncharts\">Live Charts<\/a> with the Django framework, and we&#8217;ll use the FusionCharts JavaScript library to do so.\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#Basic_Requirements\" title=\"Basic Requirements\">Basic Requirements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#Creating_Charts_Using_the_Django_Framework\" title=\"Creating Charts Using the Django Framework\">Creating Charts Using the Django Framework<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#Step_1_Creating_the_Project\" title=\"Step 1: Creating the Project\">Step 1: Creating the Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#Step_2_Adding_the_Dependencies\" title=\"Step 2: Adding the Dependencies\">Step 2: Adding the Dependencies<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#Step_3_Creating_the_View_Page\" title=\"Step 3: Creating the View Page\">Step 3: Creating the View Page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#Step_4_Setting_Up_the_Configuration_File\" title=\"Step 4: Setting Up the Configuration File\">Step 4: Setting Up the Configuration File<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#Step_5_Rendering_the_Chart\" title=\"Step 5: Rendering the Chart\">Step 5: Rendering the Chart<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Basic_Requirements\"><\/span>Basic Requirements<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nYou can create a chart in a web app developed using Django. You will need to download and install the following items into your system:\r\n<ol>\r\n \t<li style=\"list-style-type: none\">\r\n<ol>Django Framework &#8211;<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<a href=\"https:\/\/www.djangoproject.com\/download\/\">Download Link<\/a>\r\n<ol>\r\n \t<li style=\"list-style-type: none\">\r\n<ol>FusionCharts Library &#8211;<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<a href=\"https:\/\/www.fusioncharts.com\/download\/\">Download Link<\/a>\r\n<ol>\r\n \t<li style=\"list-style-type: none\">\r\n<ol>FusionCharts Django Wrapper &#8211;<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<a href=\"https:\/\/www.fusioncharts.com\/django-charts\/\">Download Link<\/a>\r\n\r\n<strong>Note<\/strong>: You will need to install Python to start using Django. You will also require a working knowledge of Python to be able to execute the code.\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_Charts_Using_the_Django_Framework\"><\/span>Creating Charts Using the Django Framework<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Creating_the_Project\"><\/span>Step 1: Creating the Project<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nRun the following command to create the <code>myproject<\/code> directory in the current directory.\r\n\r\n<code>django-admin startproject myproject<\/code>\r\nYou can use the <code>cd<\/code> command within the command-line interface to easily navigate to the required directory.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Adding_the_Dependencies\"><\/span>Step 2: Adding the Dependencies<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nNext, we will add the FusionCharts JavaScript files required to render the charts in the web application.\r\n<ol>\r\n \t<li>Create a template folder inside the <code>myproject<\/code> directory.<\/li>\r\n \t<li>Inside the template folder, create another folder named <code>static<\/code>.<\/li>\r\n \t<li>Copy all the javascript files extracted from the FusionCharts library into this folder.<\/li>\r\n \t<li>To map the javascript files, create an HTML file, <code>index.html<\/code>, in the template folder. This file will have the path to each javascript file and also the output element.\r\n<pre class=\"lang:xhtml decode:true\" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;FC-python wrapper&lt;\/title&gt;\r\n\t{% load static %} \r\n   &lt;script type=\"text\/javascript\" src=\"{% static \"fusioncharts\/fusioncharts.js\" %}\"&gt;&lt;\/script&gt;\r\n   &lt;script type=\"text\/javascript\" src=\"{% static \"fusioncharts\/themes\/fusioncharts.theme.fint.js\" %}\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;div id=\"chart-1\"&gt;{{ output|safe }}&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\r\n<\/li>\r\n \t<li>After including the paths of all the dependencies required, we need to update the static files by running the following command\r\n<code>python manage.py collectstatic<\/code><\/li>\r\n \t<li>In the <code>settings.py<\/code> file, update the location of the templates\r\n<code>'DIRS': ['fc_column2d\/templates'],<\/code><\/li>\r\n<\/ol>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Creating_the_View_Page\"><\/span>Step 3: Creating the View Page<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nThe view page contains the chart constructors, attributes as well as the data source required to render the chart.\r\n<ol>\r\n \t<li>Add the code given below to the <code>view.py<\/code> file.<\/li>\r\n<\/ol>\r\n<pre class=\"lang:python decode:true\" title=\"view.py\">from django.shortcuts import render\r\nfrom django.http import HttpResponse\r\n\r\n# Include the `fusioncharts.py` file which has required functions to embed the charts in html page\r\nfrom .fusioncharts import FusionCharts\r\n\r\n# Loading Data from a Static JSON String\r\n# It is a example to show a Column 2D chart where data is passed as JSON string format.\r\n# The `chart` method is defined to load chart data from an JSON string.\r\n\r\ndef chart(request):\r\n    # Create an object for the column2d chart using the FusionCharts class constructor\r\n  column2d = FusionCharts(\"column2d\", \"ex1\" , \"684\", \"476\", \"chart-1\", \"json\", \r\n        # The data is passed as a string in the `dataSource` as parameter.\r\n    \"\"\"{  \r\n        \"chart\": {\r\n        \"caption\": \"Most Popular Superhero on Youtube\",\r\n        \"baseFont\": \"Lato\",\r\n        \"captionfontsize\":\"18\",\r\n        \"subcaptionfontbold\":\"0\",\r\n        \"subcaptionfontsize\":\"14\",\r\n        \"subcaption\": \"Jan 2008 - September 2017\",\r\n        \"yaxisname\": \"Total time spent watching\",\r\n        \"captionpadding\": \"20\",\r\n        \"bgalpha\": \"0\",\r\n        \"canvasbgalpha\": \"0\",\r\n        \"showvalues\": \"0\",\r\n        \"showborder\": \"0\",\r\n        \"canvasborderalpha\": \"0\",\r\n        \"showalternatehgridcolor\": \"0\",\r\n        \"plotgradientcolor\": \"\",\r\n        \"showplotborder\": \"0\",\r\n        \"adjustDiv\":\"0\",\r\n        \"yaxisnamefontsize\":\"14\",\r\n        \"yAxisNameFontBold\":\"0\",\r\n        \"yAxisValuesPadding\":\"18\",\r\n        \"divlinealpha\": \"10\",\r\n        \"xaxislinealpha\":\"20\",\r\n        \"LabelPadding\": \"50\",\r\n        \"showlabels\": \"0\",\r\n        \"numdivlines\":\"4\",\r\n        \"showxaxisline\":\"1\",\r\n        \"plotspacepercent\":\"40\",\r\n        \"yAxisValueDecimals\":\"0\",\r\n        \"formatnumberscale\": \"1\",\r\n        \"numberscalevalue\": \"24,31,12\",\r\n        \"numberscaleunit\": \" days, months, years\",\r\n        \"palettecolors\": \"#3F365A\",\r\n        \"plotToolText\": \"&lt;div&gt;Superhero : &lt;b&gt;$label&lt;\/b&gt;&lt;br\/&gt;Time Spend : &lt;b&gt;$value Hours&lt;\/b&gt;&lt;\/div&gt;\",\r\n        \"defaultnumberscale\": \" years\",\r\n        \"plotFillAlpha\": \"90\"\r\n      },\r\n      \"annotations\": {\r\n        \"autoScale\": \"0\",\r\n        \"scaleImages\": \"0\",\r\n        \"origW\": \"400\",\r\n        \"origH\": \"300\",\r\n        \"groups\": [{\r\n          \"id\": \"user-images\",\r\n          \"items\": [{\r\n            \"id\": \"Batman-icon\",\r\n            \"type\": \"image\",\r\n            \"url\": \"https:\/\/csm.fusioncharts.com\/files\/assets\/img\/batman.png\",\r\n            \"x\": \"$dataset.0.set.0.CenterX - 18\",\r\n            \"y\": \"$dataset.0.set.0.EndY + 10\",\r\n            \"xScale\": \"75\",\r\n            \"yScale\": \"75\"\r\n          }, {\r\n            \"id\": \"Wolverine-icon\",\r\n            \"type\": \"image\",\r\n            \"url\": \"https:\/\/csm.fusioncharts.com\/files\/assets\/img\/wolverine.png\",\r\n            \"x\": \"$dataset.0.set.1.CenterX - 18\",\r\n            \"y\": \"$dataset.0.set.1.EndY + 10\",\r\n            \"xScale\": \"75\",\r\n            \"yScale\": \"75\"\r\n          }, {\r\n            \"id\": \"IronMan-icon\",\r\n            \"type\": \"image\",\r\n            \"url\": \"https:\/\/csm.fusioncharts.com\/files\/assets\/img\/ironman.png\",\r\n            \"x\": \"$dataset.0.set.2.CenterX - 18\",\r\n            \"y\": \"$dataset.0.set.2.EndY + 10\",\r\n            \"xScale\": \"75\",\r\n            \"yScale\": \"75\"\r\n          }, {\r\n            \"id\": \"Deadpool-icon\",\r\n            \"type\": \"image\",\r\n            \"url\": \"https:\/\/csm.fusioncharts.com\/files\/assets\/img\/deadpool.png\",\r\n            \"x\": \"$dataset.0.set.3.CenterX - 18\",\r\n            \"y\": \"$dataset.0.set.3.EndY + 10\",\r\n            \"xScale\": \"75\",\r\n            \"yScale\": \"75\"\r\n          }, {\r\n            \"id\": \"SpiderMan-icon\",\r\n            \"type\": \"image\",\r\n            \"url\": \"https:\/\/csm.fusioncharts.com\/files\/assets\/img\/spiderman.png\",\r\n            \"x\": \"$dataset.0.set.4.CenterX - 18\",\r\n            \"y\": \"$dataset.0.set.4.EndY + 10\",\r\n            \"xScale\": \"75\",\r\n            \"yScale\": \"75\"\r\n          }, {\r\n            \"id\": \"Thor-icon\",\r\n            \"type\": \"image\",\r\n            \"url\": \"https:\/\/csm.fusioncharts.com\/files\/assets\/img\/thor.png\",\r\n            \"x\": \"$dataset.0.set.5.CenterX - 18\",\r\n            \"y\": \"$dataset.0.set.5.EndY + 10\",\r\n            \"xScale\": \"75\",\r\n            \"yScale\": \"75\"\r\n          }, {\r\n            \"id\": \"SuperMan-icon\",\r\n            \"type\": \"image\",\r\n            \"url\": \"https:\/\/csm.fusioncharts.com\/files\/assets\/img\/superman.png\",\r\n            \"x\": \"$dataset.0.set.6.CenterX - 18\",\r\n            \"y\": \"$dataset.0.set.6.EndY + 10\",\r\n            \"xScale\": \"75\",\r\n            \"yScale\": \"75\"\r\n          }, {\r\n            \"id\": \"CaptainAmerica-icon\",\r\n            \"type\": \"image\",\r\n            \"url\": \"https:\/\/csm.fusioncharts.com\/files\/assets\/img\/captain-america.png\",\r\n            \"x\": \"$dataset.0.set.7.CenterX - 18\",\r\n            \"y\": \"$dataset.0.set.7.EndY + 10\",\r\n            \"xScale\": \"75\",\r\n            \"yScale\": \"75\"\r\n          }]\r\n        }]\r\n      },\r\n      \"data\": [{\r\n        \"label\": \"Batman\",\r\n        \"value\": \"85000\"\r\n      }, {\r\n        \"label\": \"Wolverine\",\r\n        \"value\": \"82000\"\r\n      }, {\r\n        \"label\": \"Iron Man\",\r\n        \"value\": \"58000\"\r\n      }, {\r\n        \"label\": \"Deadpool\",\r\n        \"value\": \"42000\"\r\n      }, {\r\n        \"label\": \"Spider Man\",\r\n        \"value\": \"36000\"\r\n      }, {\r\n        \"label\": \"Thor\",\r\n        \"value\": \"21000\"\r\n      }, {\r\n        \"label\": \"Super Man\",\r\n        \"value\": \"18000\"\r\n      }, {\r\n        \"label\": \"Captain A\",\r\n        \"value\": \"6000\"\r\n      }]\r\n      }\"\"\")\r\n\r\n    # returning complete JavaScript and HTML code, which is used to generate chart in the browsers. \r\n  return  render(request, 'index.html', {'output' : column2d.render()})\r\n<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Setting_Up_the_Configuration_File\"><\/span>Step 4: Setting Up the Configuration File<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n<ol>\r\n \t<li>Add the following code snippet to the <code>urls.py<\/code> file, to automatically set the URL to render the chart.\r\n<pre class=\"lang:python decode:true\" title=\"urls.py\">from django.conf.urls import url\r\nfrom.import views\r\n\r\nurlpatterns = [\r\n    url(r'^$', views.chart, name = 'demo'),\r\n]\r\n<\/pre>\r\n<\/li>\r\n \t<li>To update the <code>STATICFILES_DIRS<\/code> object, include it in the <code>settings.py<\/code> file.<\/li>\r\n<\/ol>\r\n<pre class=\"lang:python decode:true\" title=\"settings.py\">STATICFILES_DIRS = [\r\n    os.path.join(BASE_DIR, \"fc_column2d\/templates\/static\"),\r\n]\r\n<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_5_Rendering_the_Chart\"><\/span>Step 5: Rendering the Chart<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nWith all the code in place, it is now time to render the chart.\r\n<ol>\r\n \t<li>Run the following command on the shell interface\r\n<code>python manage.py runserver<\/code><\/li>\r\n<\/ol>\r\nIf you\u2019ve followed the steps closely, your output should like the chart shown in the image below:\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/charts-using-django-fusioncharts.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16335\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/charts-using-django-fusioncharts.png\" alt=\"\" width=\"625\" height=\"481\" srcset=\"\/blog\/wp-content\/uploads\/2017\/09\/charts-using-django-fusioncharts.png 625w, \/blog\/wp-content\/uploads\/2017\/09\/charts-using-django-fusioncharts-150x115.png 150w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/a>\r\n\r\nIf you see any errors in your code, you can download the <a href=\"https:\/\/github.com\/sikrigagan\/Django-Charts\">complete source code<\/a> of the sample project we have created for this tutorial.\r\nThe article was first published here.","protected":false},"excerpt":{"rendered":"<p>Python was quickly becoming a popular programming language for creating web-based applications. The Django web framework was created to capitalize on this popularity and to enable the rapid deployment of secure and maintainable web applications. Django, an open-source web framework built entirely in Python, employs the model-view-template (MVT) architectural pattern. This framework repurposes components designed [&hellip;]<\/p>\n","protected":false},"author":40,"featured_media":16353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[688,648],"class_list":["post-16334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Create Charts In Django<\/title>\n<meta name=\"description\" content=\"Leverage Python\u2019s popularity with our 2026 tutorial. Learn the essential steps to create and integrate interactive charts into your Django apps today.\" \/>\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.fusioncharts.com\/blog\/creating-charts-in-django\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create Charts In Django\" \/>\n<meta property=\"og:description\" content=\"Leverage Python\u2019s popularity with our 2026 tutorial. Learn the essential steps to create and integrate interactive charts into your Django apps today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-04T14:08:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:10:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/django-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"797\" \/>\n\t<meta property=\"og:image:height\" content=\"338\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Gagan Sikri, Ayan Bhadury\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/sikrigagan\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gagan Sikri, Ayan Bhadury\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Gagan Sikri\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/cbd9588ef1469879735323d549a33735\"\n\t            },\n\t            \"headline\": \"How to Create Charts in Django: A 2026 Tutorial Guide\",\n\t            \"datePublished\": \"2017-10-04T14:08:41+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:58+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/\"\n\t            },\n\t            \"wordCount\": 479,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/django-1.png\",\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/\",\n\t            \"name\": \"How To Create Charts In Django\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/django-1.png\",\n\t            \"datePublished\": \"2017-10-04T14:08:41+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:58+00:00\",\n\t            \"description\": \"Leverage Python\u2019s popularity with our 2026 tutorial. Learn the essential steps to create and integrate interactive charts into your Django apps today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2017\/09\/django-1.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2017\/09\/django-1.png\",\n\t            \"width\": 797,\n\t            \"height\": 338,\n\t            \"caption\": \"create-charts-in-django\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Create Charts in Django: A 2026 Tutorial Guide\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/cbd9588ef1469879735323d549a33735\",\n\t            \"name\": \"Gagan Sikri\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/26f701ff7bbe4aaa0da68332851f1acf\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/8cc\/8cc0b1d501bc1872cb52283b64e85542x96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/8cc\/8cc0b1d501bc1872cb52283b64e85542x96.jpg\",\n\t                \"caption\": \"Gagan Sikri\"\n\t            },\n\t            \"description\": \"Software developer and technology enthusiast with passion for product, UX and business.\",\n\t            \"sameAs\": [\n\t                \"https:\/\/gagansikri.com\",\n\t                \"https:\/\/x.com\/https:\/\/twitter.com\/sikrigagan\"\n\t            ],\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/sikrigagan\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Create Charts In Django","description":"Leverage Python\u2019s popularity with our 2026 tutorial. Learn the essential steps to create and integrate interactive charts into your Django apps today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/","og_locale":"en_US","og_type":"article","og_title":"How To Create Charts In Django","og_description":"Leverage Python\u2019s popularity with our 2026 tutorial. Learn the essential steps to create and integrate interactive charts into your Django apps today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2017-10-04T14:08:41+00:00","article_modified_time":"2026-01-20T09:10:58+00:00","og_image":[{"width":797,"height":338,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2017\/09\/django-1.png","type":"image\/png"}],"author":"Gagan Sikri, Ayan Bhadury","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/sikrigagan","twitter_misc":{"Written by":"Gagan Sikri, Ayan Bhadury","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/"},"author":{"name":"Gagan Sikri","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/cbd9588ef1469879735323d549a33735"},"headline":"How to Create Charts in Django: A 2026 Tutorial Guide","datePublished":"2017-10-04T14:08:41+00:00","dateModified":"2026-01-20T09:10:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/"},"wordCount":479,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/09\/django-1.png","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/","url":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/","name":"How To Create Charts In Django","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2017\/09\/django-1.png","datePublished":"2017-10-04T14:08:41+00:00","dateModified":"2026-01-20T09:10:58+00:00","description":"Leverage Python\u2019s popularity with our 2026 tutorial. Learn the essential steps to create and integrate interactive charts into your Django apps today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2017\/09\/django-1.png","contentUrl":"\/blog\/wp-content\/uploads\/2017\/09\/django-1.png","width":797,"height":338,"caption":"create-charts-in-django"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/creating-charts-in-django\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Charts in Django: A 2026 Tutorial Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/cbd9588ef1469879735323d549a33735","name":"Gagan Sikri","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/26f701ff7bbe4aaa0da68332851f1acf","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/8cc\/8cc0b1d501bc1872cb52283b64e85542x96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/8cc\/8cc0b1d501bc1872cb52283b64e85542x96.jpg","caption":"Gagan Sikri"},"description":"Software developer and technology enthusiast with passion for product, UX and business.","sameAs":["https:\/\/gagansikri.com","https:\/\/x.com\/https:\/\/twitter.com\/sikrigagan"],"url":"https:\/\/www.fusioncharts.com\/blog\/author\/sikrigagan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16334"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16334\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16353"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16334"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}