How to add charts to your Django app

Since version 0.11.2 the Vanty Starter Kit comes with a charts module for easily adding charts to your application. If you are looking for a full tutorial on how to use pyecharts please see this blog. In this article, we will only focus on how to use the existing modules in your other applications.

Defining chart types

The chart module can be found in apps/dashboard/charts.py. It includes basic theming and styling for your site charts as well as methods for creating line and bar charts. The options can easily be modified, or extended to suit your needs. For a full list of configuration options see the echarts docs. The options in the pyecharts can be found in the source code.

Interactivity

The Starterkit includes a small htmx extension for adding reactivity to the charts. This allows you to use htmx to fetch data from the backend and render it on the dashboard.

example.html


<a hx-ext="echarts"  
   hx-get='your-endpoint/?chart_id=xxxx' 
   hx-swap="none">
   ...

 </a>

Notes

  • hx-ext="echarts" - add a reference to the echart extension to your element.
  • hx-get... - the htmx request should include the chart id as a parameter
  • hx-swap="none" - we have disabled swapping as the response will be processed by our htmx extension. The extension will communicate directly with the echarts library to render the return response.

Conclusion

The pyecharts library provides a clean python interface for configuring chart options on the backend. If you have any questions about extending the charts module you can contact us on the site chat below.

Copyright © 2022 www.advantch.com