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.