alanjones2/pyscriptflask-flask-html-02-07-22.html

## pyscriptflask-flask-html-02-07-22.html
<html>
<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
    <div class="jumbotron">
        <h1>Weather Data</h1>
        <p class="lead">
            Some graphs about the weather in London in 2020
        </p>
    </div>

    <div class="row">
        <div class="col-sm-2 p-2 ml-4 mb-1">
            <button type="button" class="btn btn-secondary">Select chart from list:</button>
        </div>
        <div class="col-sm-4 p-2 mr-4 mb-1">
            <select class="form-control" id="select">
                <option value="Tmax">Maximum Temperature</option>
                <option value="Tmin">Minimum Temperature</option>
                <option value="Sun">Sun</option>
                <option value="Rain">Rain</option>

            </select>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 p-2 shadow ml-4 mr-4 mb-4 bg-white rounded">
            <div id="chart1"></div>
        </div>
    </div>

    <script type='text/javascript'>
        function plot(graph, chart) {
            var figure = JSON.parse(graph)
            Plotly.newPlot("chart1", figure, {});
        }

        async function callback(selection){
            let response = await fetch("/callback?data="+selection);
            if (response.ok) {
                let result = await response.json();
                Plotly.newPlot('chart1', result, {});
            } else {
                alert(response.status);
            }
        }

        function selectChange(event){
            choice = document.getElementById("select").value
            callback(choice)
        }

        function setup(){
            e = document.getElementById("select")
            e.addEventListener("change", selectChange)
        }
    </script>

    <script>
        setup()
        callback("Tmax");
    </script>
</body>
</html>
	<html>
	<head>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
	</head>
	<body>
	<div class="jumbotron">
	<h1>Weather Data</h1>
	<p class="lead">
	Some graphs about the weather in London in 2020
	</p>
	</div>

	<div class="row">
	<div class="col-sm-2 p-2 ml-4 mb-1">
	<button type="button" class="btn btn-secondary">Select chart from list:</button>
	</div>
	<div class="col-sm-4 p-2 mr-4 mb-1">
	<select class="form-control" id="select">
	<option value="Tmax">Maximum Temperature</option>
	<option value="Tmin">Minimum Temperature</option>
	<option value="Sun">Sun</option>
	<option value="Rain">Rain</option>

	</select>
	</div>
	</div>

	<div class="row">
	<div class="col-sm-6 p-2 shadow ml-4 mr-4 mb-4 bg-white rounded">
	<div id="chart1"></div>
	</div>
	</div>

	<script type='text/javascript'>
	function plot(graph, chart) {
	var figure = JSON.parse(graph)
	Plotly.newPlot("chart1", figure, {});
	}

	async function callback(selection){
	let response = await fetch("/callback?data="+selection);
	if (response.ok) {
	let result = await response.json();
	Plotly.newPlot('chart1', result, {});
	} else {
	alert(response.status);
	}
	}

	function selectChange(event){
	choice = document.getElementById("select").value
	callback(choice)
	}

	function setup(){
	e = document.getElementById("select")
	e.addEventListener("change", selectChange)
	}
	</script>

	<script>
	setup()
	callback("Tmax");
	</script>
	</body>
	</html>