Draw FusionCharts with Python
Tags: python, webdev, tutorial
Published: 2022-03-10 16:39:35

# Draw beautiful charts with FusionCharts and Anvil

[FusionCharts](https://www.fusioncharts.com/) is a library for building beautiful dashboards in the browser, and with [Anvil](https://anvil.works/?utm_source=dev_to_fusion_charts) you can build your FusionCharts dashboard entirely in Python, no HTML or JS required! 

![The chart we're going to create](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28jv69t3jgnoc04tpfqf.png)

Let's jump in and build [the standard FusionCharts demo plot](https://www.fusioncharts.com/jquery-charts?framework=jquery) in Anvil. Here's the plan:

1. Create an Anvil app
2. Add the FusionCharts library
3. Create a FusionChart plot in Python
4. Bonus: Add an event handler to the plot
5. Deploy your app to the web

---

## 1. Create an Anvil app

We're going to start with a blank app, built from Anvil's Material Design theme:

![Create a new Anvil app.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52gvbz43i54lucrr51sh.gif)

---

## 2. Add the FusionCharts library

FusionCharts is distributed as a Javascript library, so we'll add that to our app in the [Native Libraries](https://anvil.works/docs/client/javascript#using-native-javascript-libraries/?utm_source=dev_to_fusion_charts) section:

```html
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
```

That's all the HTML we have to write - the rest of our app will be written **entirely from Python**!

---

## 3. Create a FusionCharts plot in Python

The blank app we created already has a form (`Form1`) that will load when someone visits our app, so let's add a placeholder component to hold the plot. A `Spacer` works nicely. Drag and drop one from the Toolbox onto the form, set the height to something suitable, and rename it to `chart_placeholder`:


![Create a placeholder for your chart.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zh4aoy07dnbbrwartc4m.gif)

We want to display the chart when the form is opened, so select the form and then scroll down to the bottom of the Properties panel to create an event handler for the `show` event:

![Create an event handler for the form ‘show’ event.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh2xvcrwr4r2ic2hjppo.gif)

Anvil has created the `form_show` event handler for you, and this is where we want to write code to display our chart. Before we get to that, let's import the things we need. We'll be using the [`anvil.js`](https://anvil.works/docs/client/javascript#accessing-javascript-from-python/?utm_source=dev_to_fusion_charts) module to interact with the FusionCharts Javascript, so start by importing that at the top of the file. At the same time, let's add the data we want to plot:

```python
...
from anvil import *
import anvil.js # Add this import

chart_data = [{
    "label": "Venezuela",
    "value": "290"
  },{
    "label": "Saudi",
    "value": "260"
  },{
    "label": "Canada",
    "value": "180"
  },{
    "label": "Iran",
    "value": "140"
  },{
    "label": "Russia",
    "value": "115"
  },{
    "label": "UAE",
    "value": "100"
  },{
    "label": "US",
    "value": "30"
  },{
    "label": "China",
    "value": "30"
  }
]

# 
class Form1(Form1Template):
  ...

```


Now update your new `form_show` event handler to create the chart:

```python
  def form_show(self, **event_args):
    """This method is called when the form is shown on the screen"""

    chart = anvil.js.window.FusionCharts({
      "renderAt": anvil.js.get_dom_node(self.chart_placeholder),
      "type": "column2d",
      "width": "100%",
      "height": "100%",
      "dataSource": {
        "chart": {
          "caption": "Countries With Most Oil Reserves [2017-18]",
          "subCaption": "In MMbbl = One Million barrels",
          "xAxisName": "Country",
          "yAxisName": "Reserves (MMbbl)",
          "numberSuffix": "K",
          "theme": "fusion",
        },
        "data": chart_data,
      },
    })

    chart.render()
```

And that's it! Hit "Run" to see your chart. It should look something like this:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28jv69t3jgnoc04tpfqf.png)

---

## 4. Bonus step: Add an event handler to your plot

FusionCharts are fully interactive, and we can easily wire up their events to Python methods in our app. Let's pop up an [alert](https://anvil.works/docs/client/python/alerts-and-notifications#messages) when the user clicks one of the bars on the plot.

First, we'll add a method to our form to handle the event:

```python
  def data_plot_click(self, event, data):
    alert(f"You clicked on {data.categoryLabel}, which has a value of {data.displayValue}")

```

Then we need to modify our chart generation code to pass the method to FusionCharts:

```python
  def form_show(self, **event_args):
    """This method is called when the form is shown on the screen"""

    chart = anvil.js.window.FusionCharts({
      "renderAt": anvil.js.get_dom_node(self.spacer_1),
      "type": "column2d",
      ## Add this section to register our new event handler
      "events": {
        "dataplotclick": self.data_plot_click
      }
      "width": "100%",
      "height": "100%",
    ...

```

That's all we need. Run your app again, and try clicking on one of the bars to see the popup.

---

## 5. Deploy your app to the web

Anvil makes it really easy to publish your new FusionCharts dashboard to the web. Deploying the app is as simple as clicking 'Publish App' in the app's settings and choosing a URL:

![Choosing a URL and deploying our new app to it.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzh52vgew85bth5sm9va.gif)

Now our app is available to anyone on the web!

---

## That's it!

We've just created a web app with nothing but Python, even though the FusionCharts library usually requires Javascript!

Check out the full source code of the app [here](https://anvil.works/build#clone:M57NM476LA3GA3AE%3d2ONFMHO2J3QUYIJFFD7OYZEF)



## More about Anvil

If you're new here, welcome! [Anvil](https://anvil.works/?utm_source=dev_to_fusion_charts) is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just **build it all in Python**.