PCR4

HTML

<html>
     

    <head>
         
      <!--Load the AJAX API-->
          <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
          <script type="text/javascript">
        //insert script here//

      </script>
    </head>

    <body>
      <p>
        <center>
          <font size="5"><b>PCR Results</b></font>
        </center>
      </p>
      <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
        <table class="rows">
          <tr>
            <td align="center">

              <div id="programmatic_chart_div" style="width: 900px; height: 400px"></div>
              <div id="programmatic_control_div" style="height: 60px; width: 600px"></div>

              <ul id="series" style="list-style: none">
                <li><input type="checkbox" name="series" value="1" checked="true" /> Series 1</li>
                <li><input type="checkbox" name="series" value="2" checked="true" /> Series 2</li>
                <li><input type="checkbox" name="series" value="3" checked="true" /> Series 3</li>
                <li><input type="checkbox" name="series" value="4" checked="true" /> Series 4</li>
                <li><input type="checkbox" name="series" value="5" checked="true" /> Series 5</li>
                <li><input type="checkbox" name="series" value="6" checked="true" /> Series 6</li>
                <li><input type="checkbox" name="series" value="7" checked="true" /> Series 7</li>
                <li><input type="checkbox" name="series" value="8" checked="true" /> Series 8</li>
                <li><input type="checkbox" name="series" value="9" checked="true" /> Series 9</li>
                <li><input type="checkbox" name="series" value="10" checked="true" /> Series 10</li>
                <li><input type="checkbox" name="series" value="11" checked="true" /> Series 11</li>
                <li><input type="checkbox" name="series" value="12" checked="true" /> Series 12</li>
                <li><input...

JavaScript

google.charts.load('current', {
  'packages': ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawCurveTypes);


const pivot = (input) => Object.entries(input.reduce(
  (a, [well, cycle, result]) => ({
    ...a,
    [cycle]: [...(a[cycle] || []), result]
  }), {}
)).map(([cycle, results]) => [Number(cycle), ...results])

const input = [
  //well, cycle, result//
  ['bob', 1, -4778],
  ['bob', 2, -4066],
  ['bob', 3, -3647],
  ['bob', 4, -3111],
  ['bob', 5, -2861],
  ['bob', 6, -2741],
  ['bob', 7, -2406],
  ['bob', 8, -2014],
  ['bob', 9, -2097],
  ['bob', 10, -1508],
  ['bob', 11, -1395],
  ['bob', 12, -961],
  ['bob', 13, -229],
  ['bob', 14, 229],
  ['bob', 15, 958],
  ['bob', 16, 2018],
  ['bob', 17, 3429],
  ['bob', 18, 5753],
  ['bob', 19, 9492],
  ['bob', 20, 15466],
  ['bob', 21, 24642],
  ['bob', 22, 36004],
  ['bob', 23, 49926],
  ['bob', 24, 65493],
  ['bob', 25, 81710],
  ['bob', 26, 99323],
  ['bob', 27, 116555],
  ['bob', 28, 133313],
  ['bob', 29, 149308],
  ['bob', 30, 165766],
  ['bob', 31, 180282],
  ['bob', 32, 194647],
  ['bob', 33, 207109],
  ['bob', 34, 219521],
  ['bob', 35, 230907],
  [2, 1, -3655],
  [2, 2, -2948],
  [2, 3, -2665],
  [2, 4, -2289],
  [2, 5, -2126],
  [2, 6, -1771],
  [2, 7, -1658],
  [2, 8, -1393],
  [2, 9, -1067],
  [2, 10, -917],
  [2, 11, -487],
  [2, 12, -308],
  [2, 13, -205],
  [2, 14, 205],
  [2, 15, 738],
  [2, 16, 1504],
  [2, 17, 2698],
  [2, 18, 5040],
  [2, 19, 8496],
  [2, 20, 14229],
  [2, 21, 23335],
  [2, 22, 36606],
  [2, 23, 54049],
  [2, 24, 74611],
  [2, 25, 97509],
  [2, 26, 121160],
  [2, 27, 143958],
  [2, 28, 166160],
  [2, 29, 187420],
  [2, 30, 206638],
  [2, 31, 224231],
  [2, 32, 240370],
  [2, 33, 255257],
  [2, 34, 267618],
  [2, 35, 278624],
  [3, 1, -3114],
  [3, 2, -2434],
  [3, 3, -2243],
  [3, 4, -2054],
  [3, 5, -1675],
  [3, 6, -1490],
  [3, 7, -1398],
  [3, 8, -1344],
  [3, 9, -1192],
  [3, 10, -871],
  [3, 11, -646],
  [3, 12, -322],
  [3, 13, -164],
  [3, 14, 164],
 ...