title: Color scale to the table cells according to cell value
body: <p>I am making an interactive confusion matrix but I want the color of the table cells to change as per the cell values using a color scale similar to <a href="https://plot.ly/38/~GuillemDuran/#" rel="nofollow noreferrer">https://plot.ly/38/~GuillemDuran/#</a>. </p>
  
  <p>Currently my code is:</p>
  
  <pre><code>&lt;html&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;title&gt;Interactive ROC&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
  
      function drawChart() {
  
          var data = google.visualization.arrayToDataTable([
              ['FPR', 'TPR'],
              [ 0.934911, 0.986590],
              [ 0.852071, 0.978927],
              [ 0.715976, 0.946360],
              [ 0.594675, 0.925287],
              [ 0.402367, 0.812261],
              [ 0.186391, 0.695402],
              [ 0.124260, 0.565134],
              [ 0.056213, 0.390805],
              [ 0.029586, 0.247126],
              [ 0.011834, 0.074713]
              ]);
  
  
          var csvData = [
          ['TT', 'TF', 'FT', 'FF', 'Percent_Accuracy'],
          [ 93, 49, 11, 98, 30],
          [ 85, 97, 89, 27, 40],
          [ 71, 59, 76, 94, 50],
          [ 59, 46, 75, 92, 22],
          [ 40, 23, 67, 81, 89],
          [ 18, 63, 91, 40, 34],
          [ 12, 42, 60, 54, 23],
          [ 56, 21, 34, 52, 44],
          [ 29, 58, 62, 26, 22],
          [ 11, 83, 47, 13, 76]
          ];
  
          var options = {
              title: 'ROC Curve',
              hAxis: {title: 'False Positive Rate', minValue: 0, maxValue: 1},
              vAxis: {title: 'True Positive Rate', minValue: 0, maxValue: 1},
              legend: 'none'
          };
          var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
          function hello() {
              console.log("hello");
              var selectedItem = chart.getSelection()[0];
              if (selectedItem) {
                  var value = data.getValue(selectedItem.row, selectedItem.column);
                  var trow = selectedItem.row + 1;
                  var content = '&lt;table class="table table-bordered"&gt;';
                  content += "&lt;thead&gt;";
                  content += "&lt;tr&gt;" ;
                  content += "&lt;th colspan='4'&gt;" + "Confusion Matrix" + "&lt;/th&gt;";
                  content += "&lt;/tr&gt;" ;
                  content += "&lt;tr&gt;" ;
                  content += "&lt;th&gt;" + "Actual vs Predicted" + "&lt;/th&gt;";
                  content += "&lt;th&gt;" + "True" + "&lt;/th&gt;";
                  content += "&lt;th&gt;" + "False" + "&lt;/th&gt;";
                  content += "&lt;th rowspan = '4'&gt;" + "% Accuracy" + "&lt;/th&gt;";
                  content += "&lt;/tr&gt;";
                  content += "&lt;/thead&gt;";
                  content += "&lt;tr&gt;";
                  content += "&lt;td&gt;" + '&lt;span style="font-weight:bold"&gt;True&lt;/span&gt;' + "&lt;/td&gt;";
                  for (var j=0; j&lt;3; j++) {
  
                      content += "&lt;td&gt;" + csvData[trow][j] + "&lt;/td&gt;";
                  }
                  content += "&lt;/tr&gt;";
                  content += "&lt;td&gt;" + '&lt;span style="font-weight:bold"&gt;False&lt;/span&gt;' + "&lt;/td&gt;";
  
                  for (var j=3; j&lt;5; j++) {
                      content += "&lt;td&gt;" + csvData[trow][j] + "&lt;/td&gt;";
  
                  }
                  content += "&lt;/tr&gt;";
                  content += "&lt;/table&gt;";
                  document.getElementById("table1").innerHTML = content;
  
              }
          }
          google.visualization.events.addListener(chart, 'select', hello);
          chart.draw(data, options);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>&lt;div id="chart_div" style="width: 900px; height: 500px; "&gt;&lt;/div&gt;
  &lt;div id="table1" style="width: 400px; height: 500px; padding-left: 170px; "&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>and the output is </p>
  
  <p><img src="https://i.stack.imgur.com/V5a9Q.png" alt="Interactive Confusion matrix"></p>
  
  <p>Thanks.</p>
  
  <p>I used the code as suggested but it still doesn't work:</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Interactive ROC&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="scripts/bootstrap.min.css"&gt;
      &lt;script src="scripts/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="scripts/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
  
          function newDrawChart(a,b){
  
              var data1 = google.visualization.arrayToDataTable([
                  ['Task', 'Hours per Day'],
                  ['True Positive',     a[0]],
                  ['True Negative',      a[1]],
                  ['False Negative',  b[3]],
                  ['False Positive', b[4]]
                  ]);
  
              var options = {
                  title: '',
                  pieHole: 0.4,
              };
  
              var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
              chart.draw(data1, options);
  
  
          var data2 = google.visualization.arrayToDataTable([
            ['Task', ''],
  
            ['Correct Classification',    13],
            ['Misclassification',     11]
          ]);
  
          var options = {
            title: 'Percentage Accuracy'
          };
  
          var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  
          chart.draw(data2, options);
  
              }
  
  
          function drawChart() {
  
              var data = google.visualization.arrayToDataTable([
                  ['FPR', 'TPR'],
                  [ 0.934911, 0.986590],
                  [ 0.852071, 0.978927],
                  [ 0.715976, 0.946360],
                  [ 0.594675, 0.925287],
                  [ 0.402367, 0.812261],
                  [ 0.186391, 0.695402],
                  [ 0.124260, 0.565134],
                  [ 0.056213, 0.390805],
                  [ 0.029586, 0.247126],
                  [ 0.011834, 0.074713]
                  ]);
  
  
              var csvData = [
              ['TT', 'TF', 'FT', 'FF', 'Percent_Accuracy'],
              [ 93, 49, 11, 98, 30],
              [ 85, 97, 89, 27, 40],
              [ 71, 59, 76, 94, 50],
              [ 59, 46, 75, 92, 22],
              [ 40, 23, 67, 81, 89],
              [ 18, 63, 91, 40, 34],
              [ 12, 42, 60, 54, 23],
              [ 56, 21, 34, 52, 44],
              [ 29, 58, 62, 26, 22],
              [ 11, 83, 47, 13, 76]
              ];
  
              var options = {
                  title: 'ROC Curve',
                  hAxis: {title: 'False Positive Rate', minValue: 0, maxValue: 1},
                  vAxis: {title: 'True Positive Rate', minValue: 0, maxValue: 1},
                  legend: 'none'
              };
              var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
              function hello() {
  
  
                  var selectedItem = chart.getSelection()[0];
                  if (selectedItem) {
                      var value = data.getValue(selectedItem.row, selectedItem.column);
                      var trow = selectedItem.row + 1;
                      var content = '&lt;table class="table table-bordered"&gt;';
                      content += "&lt;thead&gt;";
                      content += "&lt;tr&gt;" ;
                      content += "&lt;th colspan='4'&gt;" + "Confusion Matrix" + "&lt;/th&gt;";
                      content += "&lt;/tr&gt;" ;
                      content += "&lt;tr&gt;" ;
                      content += "&lt;th&gt;" + "Actual vs Predicted" + "&lt;/th&gt;";
                      content += "&lt;th&gt;" + "True" + "&lt;/th&gt;";
                      content += "&lt;th&gt;" + "False" + "&lt;/th&gt;";
                      content += "&lt;th rowspan = '4'&gt;" + "% Accuracy" + "&lt;/th&gt;";
                      content += "&lt;/tr&gt;";
                      content += "&lt;/thead&gt;";
                      content += "&lt;tr&gt;";
                      content += "&lt;td&gt;" + '&lt;span style="font-weight:bold"&gt;True&lt;/span&gt;' + "&lt;/td&gt;";
                      var a = [];
                      var b = [];
                      for (var j=0; j&lt;3; j++) {
                          content += "&lt;td class='col-xs-5'&gt;" + csvData[trow][j] + "&lt;/td&gt;";
                          a[j] = csvData[trow][j];
                          var number = this.csvData[trow][j];
  
                              if (number  &gt; 0)
                              {
                                  this.css("background-color:", "blue");
                              }
  
                      }
                      content += "&lt;/tr&gt;";
                      content += "&lt;td&gt;" + '&lt;span style="font-weight:bold"&gt;False&lt;/span&gt;' + "&lt;/td&gt;";
  
                      for (var j=3; j&lt;5; j++) {
                          content += "&lt;td&gt;" + csvData[trow][j] + "&lt;/td&gt;";
                          b[j] = csvData[trow][j];
                      }
                      content += "&lt;/tr&gt;";
                      content += "&lt;/table&gt;";
                      document.getElementById("table1").innerHTML = content;
  
  
  
  
                      newDrawChart(a,b);
  
                  }
              }
              google.visualization.events.addListener(chart, 'select', hello);
              chart.draw(data, options);
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="padding-top: 30px;"&gt;
    &lt;table class="columns"&gt;
      &lt;tr&gt;
        &lt;td  style = "height: auto"&gt;
      &lt;div id="chart_div" style="padding-left: 15px; height: 200px;"&gt;&lt;/div&gt;
        &lt;/td&gt;&lt;td  style = "height: auto"&gt;
        &lt;div id="table1" style="padding-left: 15px; height: 200px;"&gt;
      &lt;/div&gt;
        &lt;/td &gt;
        &lt;td  style = "height: auto"&gt;
      &lt;div id="donutchart" style="padding-left: 15px; height: 200px;"&gt;&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;
  
  &lt;div id = "piechart" style="padding-left: 15px; padding-top: 30px; height: 200px;" &gt;
  &lt;/div&gt;
  &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>