Charts

Air is great for building charts. Using plotly, here's a simple chart example.

import json

import air

app = air.Air()


@app.get("/")
def index():
    title = "Air Chart Demo"
    data = json.dumps({
        "data": [
            {
                "x": [0, 4, 5, 7, 8, 10],
                "y": [2, 9, 0, 4, 3, 6],
                "type": "scatter",
            },
            {
                "x": [0, 1, 2, 4, 8, 10],
                "y": [9, 2, 4, 3, 5, 0],
                "type": "scatter",
            },
        ],
        "title": "Fun charts with Plotly and Air",
        "description": ("This is a demonstration of how to build a chart using Plotly and Air"),
        "type": "scatter",
    })
    return air.layouts.mvpcss(
        air.Script(src="https://cdn.plot.ly/plotly-3.0.1.min.js"),
        air.Title(title),
        air.H1(title),
        air.Article(
            air.P(
                "Made with ",
                air.A("Air", href="https://github.com/feldroy/air"),
                " and ",
                air.A("Plotly", href="https://plotly.com/javascript/"),
            ),
            air.Div(id_="chart"),
            air.Script(f"var data = {data}; Plotly.newPlot('chart', data);"),
        ),
    )

Air makes it possible to build charts that pull data from servers and animate the results. Here's an example being supplied with random numbers for the Air server.

import air

air.Children(
    air.Div(id_="randomChart"),
    air.Script(
        """
        var data = {"data": [{"x": [0, 4, 5, 7, 8, 10], "y": [2, 9, 0, 4, 3, 6], "type": "scatter"}, {"x": [0, 1, 2, 4, 8, 10], "y": [9, 2, 4, 3, 5, 0], "type": "scatter"}], "title": "Fun charts with Plotly and Air", "description": "This is a demonstration of how to build a chart using Plotly and Air", "type": "scatter"};
        Plotly.newPlot('randomChart', data);""",
        # ID is used to help HTMX know where to replace data
        id_="dataSource",
        # Trigger HTMX to call new data every 2 seconds
        hx_trigger="every 2s",
        # Use HTMX to fetch new info from the /data route
        hx_get="/data",
        # When the data is fetched, replace the whole tag
        hx_swap="outerHTML",
    ),
)