Add a column with a default value to an existing table in SQL Server

Flask Web Application Connecting Google Chart & Toggle Options

Adams

Status: I am trying to connect a Google Chart display to a checkbox (one can be selected at most per-time). My current efforts have gotten me here. I pass in actuatorInfo to show all scans.

Intent: Based off one individual check-box that is selected, I want a specific graph to be displayed. I envision it as passing actuatorInfo a subset of ID's with the data (wavelengths, powers). I am unsure of how change the HTML Google Visualization Array to only display the data of that specific check-box ID.

Here is the Flask script

@app.route("/graph")
def graphPage():    
    actuatorInfo = krakatoa.fetchActuatorScans()
    return render_template("graph.html", actuatorInfo = actuatorInfo)

Here is the HTML template that is used to render the page.

<html>
  <head>
  
    <title>Graphing Page</title>

    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/style.css') }}">

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Wavelength', 'Power'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Actuator Scan Results',
          hAxis: {title: 'wavelength', minValue: 0, maxValue: 15},
          vAxis: {title: 'power', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>



  </head>
  <body>
    <center>
      <a href = "/">Back</a> | <a href = "/exportFiles">Export Information</a>
    </center>
    
    <div class = "splitscreen">
      <div class = "left">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <center>
          <div class="container" class="panel panel-default">
            <table class="table table-condensed">
                <thead>
                <tr>
                    <th>Laser Table</th>
                    <th>Display</th>
                </tr>
                </thead>
                <tbody>
                {% for x in ["O18", "C12", "C13"] %}
                <tr>
                    <td> Scan {{ x }} </td>
                    <td> 
                      <label class="switch">
                        <input type="checkbox" id="togBtn">
                        <div class="slider round">
                         <!--ADDED HTML -->
                         <span class="on">On</span>
                         <span class="off">Off</span>
                         <!--END-->
                        </div>
                       </label>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

      <br> 

        <fieldset>
          <legend>Scans to Fetch:</legend>

          {% for i in actuatorInfo: %}
          <div>
            <input type="checkbox" id="{ i }" name="scales"
                   checked>
            <label for="scales">Scan {{i[1]}}</label>
          </div>
          {% endfor %}
      

      </fieldset>

        </center>
        
      </div>

      <div class = "right">
        <center>
          <div id="chart_div" style="width: 1200px; height: 800px;"></div>
        </center>

      </div>
    </div>

  </body>
</html>