Sample Bar Chart loaded from a JSON file
HELP
Above chart is loaded from a sample file:
chart_morris.json saved in the
sample_data
directory.
To update the charts, open the file in your preferred editor, change the values from ""data" JSON node and refresh the page.
# Contents of file: sample_data/chart_morris.json
{
"element": "morris-bar-chart",
"data": [
{ "y": "2017", "a": "150", "b": "90", "c": "80" },
{ "y": "2018", "a": "220", "b": "350", "c": "50" },
{ "y": "2019", "a": "80", "b": "300", "c": "240" },
{ "y": "2020", "a": "180", "b": "30", "c": "10" }
],
"xkey": "y",
"barSizeRatio": 0.70,
"barGap": 3,
"resize": true,
"responsive": true,
"ykeys": ["a", "b", "c"],
"labels": ["Product A", "Product B", "Product C"],
"barColors": ["0-#1de9b6-#1dc4e9", "0-#899FD4-#A389D4", "#04a9f5"]
}
The Routing Settings
This page has a simple rule defined in the
app/urls.py file:
# Contents of file: app/urls.py
urlpatterns = [
...
# Charts from file
path('charts-file', views.charts_file, name='home'),
...
]
App Controller
The code that render this page is fairly simple. Just load the JSON file from the filesystem and inject it into the page.
Source: app/views.py
- charts_file():
# Partial content from file: app/views.py
def charts_file(request):
context = {'segment': 'charts_from_file'}
html_template = loader.get_template('charts-from-file.html')
with open('sample_data/chart_morris.json', 'r') as f:
context['chart_data'] = json.dumps(json.load(f))
return HttpResponse(html_template.render(context, request))
HTML File
The chart data is rendered using Morris JS,
a popular open-source chart library.
The source file
core/templates/charts-from-file.html.