index.html

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
        <script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>
        <script src="htmx-plotly.js"></script>
    </head>
<body>


<!-- <a href="#" hx-ext="htmx-plotly" hx-post="/get-data" hx-swap="none" plot-id="my-plot"><h1>UPDATE</h1></a> -->

<form action="#" hx-ext="htmx-plotly" hx-post="/get-data" hx-swap="innerHTML" hx-target="#xxx" plot-id="my-plot">
    <select name="veggies">
        <option value="potatoes">potatoes</option>
        <option value="carrots">carrots</option>
    </select>
    <input type="submit" value="Submit"/>
</form>

<div id="xxx"></div>

<div id="my-plot"></div>


<script>
TESTER = document.getElementById('my-plot');

plotlyTestData = [{x: [0,1,2], y: [5,6,10]}]

Plotly.newPlot( TESTER, 
    plotlyTestData, 
    {margin: { t: 0 } } 
);
</script>

</body>
</html> 