Untitled

<!doctype html>
<html lang="en">
  <head>
    <canvas id="myChart" </>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">

    <title>Chart</title>
  </head>
  <body>

      <div class="container my-chart">

      </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>


    <script>
    $(document).ready(function() {
    $('#chart-form').on('submit', function(event) {
        $.ajax({
            data: {selectField: $('#selectField').val()},
            type: 'POST',
            url: '/process',
            success: function(result) {
                console.log(result)
            }
        });
        event.preventDefault();
    });
});

var myBarChart = new Chart($("#myChart"), {
                type: 'bar',
                data: {
                    datasets: [{
                        label: 'My very cool number',
                        data: [1],
                        backgroundColor: ['rgba(255, 99, 132, 0.2)']
                    }]
                },
                options: {
                    responsive: false,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        </script>

</div>

<form id="chart-form" class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="selectField">
      <option>1</option>
      <option>30</option>
      <option>3</option>
      <option>20</option>
      <option>5</option>
    </select>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>


</html>