Say, you’re building a Django-powered web application and you have some data you want to visualize. How do you do it? The most popular option is to pick a front-end charting library, have the back-end send the dataset (either through an API or directly passing it to the template) to the front-end, and render the chart in the browser. This approach allows the front-end to do most of the heavy lifting, thereby reducing the strain on your server. But… What if you don’t want to deal with ? What if the library you pick requires a license for commercial use (e.g. Highcharts, Amcharts, etc.)? What if you just need something quick? Javascript Enter the alternative approach: render the chart on the back-end and insert the rendered HTML/SVG in the template. No Javascript, everything in , no front-end maintenance for your charts required. I’ll be showing you how to do this with . Python Pygal Pygal supports (even !), along with a powerful and built-in (no need to fiddle with JS/CSS here). It also lets you in many different ways. many different types of charts maps configuration system styles output the chart First, let’s install Pygal: $ pip install pygal I will be skipping Django project set-up and assuming you either have an existing project to work with, or you know how to get one running. We will need some data to work with, so I’ll create a model with mock data: Now, here’s the fun part — there’s really only three steps required to get everything working: 1. Create a Pygal chart I like to keep my charts and views separate — chart generation and any data queries should not be in the view. Create a new file in your app’s directory (same as your , , etc.) named and put all chart-related logic in here, like so: models.py views.py charts.py 2. Generate the chart’s SVG pass it to template context 3. Include it in template The chart’s SVG is now available through . The filter is required here; Django would escape the SVG otherwise. If you want tooltips to work, you’ll have to include the Pygal tooltips JS file: {{ cht_fruits|safe }} [safe](https://docs.djangoproject.com/en/1.11/ref/templates/builtins/#safe) <script type="text/javascript" src="[http://kozea.github.com/pygal.js/latest/pygal-tooltips.min.js](http://kozea.github.com/pygal.js/latest/pygal-tooltips.min.js)"></script> And here’s the rendered chart: Rendered Chart
