Javascript table cell highlighting in 3rd party application

Question

I'm using Splunk version 7.0.1 and I'm trying to highlight my table cell colors based off of two other fields. Splunk has a sample to do this in Javascript that uses hardcoded values, but I need the values based off of a different field. I have the script working, but it randomly highlights some cells in the wrong color. I can't seem to figure out why.

The "Average Response Time" should be:

• Red if the value is greater than or equal to the Threshold
• Amber if the value is greater than or equal to the Objective but less than the Threshold
• Green if the value is less than the Objective

My Table:

Transaction    Count   "Average Response Time"    Objective   Threshold
A/P - Close Module - FM1    1   7.52    2.00    6.00  **<-Colored Red and correctly**
...
A/P - Diagnosis- Run Search - FM1   2   4.01    100.00  100.00 **<- Colored Amber incorrectly**

Here is the dashboard source of the table:

<table id="response_time_highlight">
        <title>NOTE: An Objective and/or Threshold of 100 indicates that an Objective and/or Threshold have not been identified for this particular transaction type.</title>
        <search>
          <query>index=arm sourcetype="arm:transaction" region="$region$" sitename="$sitename$" transaction_status IN ( $transaction_status$ ) username IN ( $username$ ) workstation_name IN ( $workstation_name$ ) transaction_name IN ( $transaction_name$ ) 
| stats count avg(response_time) AS response_time BY transaction_name objective threshold 
| eval threshold=round(threshold,2) 
| eval objective=round(objective,2) 
| eval response_time=round(response_time,2) 
| fields transaction_name count response_time objective threshold 
| rename response_time AS "Average Response Time" transaction_name AS "Transaction Type" objective as Objective threshold as Threshold count as "Transaction Count"
| sort +transaction_name</query>
          <earliest>$search_time.earliest$</earliest>
          <latest>$search_time.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>

Here is the Javascript code (modified version of the dashboard examples one):

    require([
        'underscore',
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/tableview',
        'splunkjs/mvc/simplexml/ready!'
    ], function (_, $, mvc, TableView) {

    var objective_value;
    var threshold_value;

    // Row Coloring Example with custom, client-side range interpretation
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function (cell) {
            // Enable this custom cell renderer for response_time field
            return _(['Average Response Time', 'Objective', 'Threshold']).contains(cell.field);
        },
        render: function ($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);

            if (cell.field === 'Objective') {
                objective_value = value;
            }

            if (cell.field === 'Threshold') {
                threshold_value = value;
            }

            // Apply interpretation for number of historical searches
            if (cell.field === 'Average Response Time') {
                if (value >= threshold_value) {
                    $td.addClass('range-cell').addClass('range-severe');
                }
                else if (value >= objective_value) {
                    $td.addClass('range-cell').addClass('range-elevated');
                }
                else if (value < objective_value) {
                    $td.addClass('range-cell').addClass('range-low');
                }
            }
            // Update the cell content
            $td.text(value.toFixed(2)).addClass('numeric');
        }
    });
    mvc.Components.get('response_time_highlight').getVisualization(function (tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addCellRenderer(new CustomRangeRenderer());
    });
});

EDIT: Added a console.log to the javascript showing the output of each field. Noticed that the first row showing as undefined, and pushing the correct numbers down to the next row. Here is the output:

0 undefined undefined
8.64 100 100
7.52 2 6
0 2 6
7.52 2 6
1.11 10 25
2.28 2 6
2.92 2 6