Django Highcharts Demo
Screen.Recording.2021-04-19.at.11.31.44.PM.mov
Run ./manage.py runserver and visit localhost:8000 to see the demo, a random bar chart and pie chart should be displayed and updated every 5 seconds (no page reload necessary).
The homepage view renders the homepage.html template which creates some
placeholders for the charts and specifies the javascript needed to render them.
The barchart view returns a JSON payload that reflects the options for a Highcharts Series (random data).
The piechart view returns a JSON payload that reflects the options for a Highcharts Series (random data).
highcharts.js contains the javascript for rendering and updating the charts (every 5 seconds). It uses a feature of Highcharts that allows us to run a function on load and those functions fetch data from our server and call update on their respective charts before setting a 5 second timeout and calling themselves again...forever.
This is all-around sloppy and somewhat frowned upon per the Highcharts docs (updating the chart is an expensive render)...but it works 😄 and hopefully gives you some idea of how you can fit these pieces together.