Add Chart.js on anvil App

Anvil Q&A
2

Anvil’s Javascript bridge makes it easy to integrate most Javascript libraries. The basic technique is that Javascript is exposed to Python through the anvil.js module. Anything you would normally do through Javascript, you do through anvil.js.

All of what follows is in the docs and the forums, but mostly not in a step by step format, so I’ll also include the step by step for ChartJS.

Integrating most Javascript libraries involves a few steps.

  1. Import the library. The easiest place to do this is in your app’s Native Libraries section. You’d put the script tags to import the Javascript library there, e.g.

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>

  1. Import the right object into Python. In the case of ChartJS, their examples show something like this:

const myChart = new Chart

That tells you there’s a Javascript object named Chart. To use that from Python, you have to import it, e.g.:

from anvil.js.window import Chart

  1. Get a reference to the HTML element the Javascript needs. For ChartJS that means having a canvas. You can put an Anvil canvas on to the form, and then get the HTML element using the Anvil Javascript bridge, e.g.:

ctx = js.get_dom_node(self.canvas_1)

  1. Convert the Javascript code to Python. That involves a few things:

*Javascript true must be changed to Python True

*Javascript objects must be written as Python dictionaries, which means the keys must be strings.

*Javascript syntax is converted to Python syntax (e.g. remove semicolons, etc)

Here’s the ChartJS example converted to Python:

        ctx = js.get_dom_node(self.canvas_1)
        self.chart = Chart(ctx, {
            'type': 'bar',
            'data': {
                'labels': ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                'datasets': [{
                    'label': '# of Votes',
                    'data': [12, 19, 3, 5, 2, 3],
                    'backgroundColor': [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    'borderColor': [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    'borderWidth': 1
                }]
            },
            'options': {
                'scales': {
                    'y': {
                        'beginAtZero': True
                    }
                }
            }
        })

If you put all that together you should see the ChartJS chart being drawn on the Anvil canvas object. Since the chart is drawn based on the dictionary information passed to it, you can fill that dictionary from anywhere, including a data table.

3 Likes