asked on

Conditionally change a span color

I am grabbing some values from a Google Sheet like this to label some gauges.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
google.setOnLoadCallback(queryValue);
function queryValue () {
    var query = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=B1&key=0AhCv9Xu_eRnSdEJOdzFNTHM0RkZfbGd2Nm01M2ZoR1E&gid=0');
    query.send(function (response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var data = response.getDataTable();
        
        // fetch the data from range cell (row, column)
        document.getElementById('b1');
    });
}
google.setOnLoadCallback(queryValue1);
function queryValue1 () {
    var query = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=A1&key=0AhCv9Xu_eRnSdEJOdzFNTHM0RkZfbGd2Nm01M2ZoR1E&gid=0');
    query.send(function (response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var data1 = response.getDataTable();
        
        // fetch the data from range cell (row, column) into the span "bx"
        document.getElementById('a1').innerHTML = data1.getValue(0, 0);
    });
}

Open in new window

I want to compare B1 three ways. (I'm not sure if B1 is looked at as a number or a string in Google's API when I query?)

If B1 0-70 then modify the span A1 (innerhtml) to be red
If B1 71-89 then modify the span A1 (innerhtml) to be yellow
If B1 >89 then modify the span A1 (innerhtml) to be green

As you can see by the picture, my current label is black and I want to add the necessary JS code to dynamically change it to green in this case.

Thanks,

Dave

Michel Plungjan

Not having the HTML is guessing a bit.

but

var val = data1.getValue(0, 0);
document.getElementById('a1').innerHTML = val
var bgcol = "red";
if (val > 89) bgcol = "green";
else if (val > 71) bgcol="yellow"
document.getElementById('a1').style.backgroundColor=bgcol;

Scott Fell

This should help.... http://jsbin.com/ejeyet/1/edit

<!DOCTYPE html>
<html>
<head>
  <style>
    
 .red{color:white;
      background-color:red;}
 .yellow{color:black;
      background-color:yellow}
 .green{color:white;
      background-color:green;}
  </style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
  $(document).ready(function() {
var b=$('#b1').text();
//b1=95;

if(parseInt(b,10) < 70){
	$('#a1').addClass('red');
  $('#a1').text('I am red');
  
}else if(parseInt(b,10) >= 71 && parseInt(b,10)<90){
	$('#a1').addClass('yellow');
  $('#a1').text('I am yellow');
} else {
	$('#a1').addClass('green');
  $('#a1').text('I am green');
}

    
    
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="b1">84</div>
<div id="a1">Change the number in b1</div>
  
</body>
</html>

Open in new window

Michel Plungjan

Who mentioned jQuery?

Scott Fell

>"Who mentioned jQuery?"
I did.
"But why use all that 'heavy' framework for just one thing", "You can just do everything in pure js"

Good points, then use pure js.

hrhs

ASKER

Here is where I'm at trying to do this in JavaScript. I am a fairly new to JavaScript and I don't know that I want to learn JQuery along side, at least just yet.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
google.setOnLoadCallback(queryValue);
function queryValue () {
    var query = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=B22:B37&key=0AhCv9Xu_eRnSdFNhSzNQUFd3b1ZfRHgtQURINFpzeGc&gid=7');
    query.send(function (response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var data = response.getDataTable();
        
        // fetch the data from range cell (row, column) into the span "bx"
        for (var i = 0; i <= 15; i++) {
    document.getElementById('b' + (i + 22)).innerHTML = data.getValue(i, 0);
}
    });
}
google.setOnLoadCallback(queryValue1);
function queryValue1 () {
    var query2 = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=A2:A17&key=0AhCv9Xu_eRnSdFNhSzNQUFd3b1ZfRHgtQURINFpzeGc&gid=9');
    query2.send(function (response) {
        if (response.isError()) {
            alert('Error in query2: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var data1 = response.getDataTable();
        
        // fetch the data from range cell (row, column) into the span "bx"
    for (var z = 0; z <= 15; z++) {
    //document.getElementById('a' + (z + 1)).innerHTML = data1.getValue(z, 0);{
	//var a = data1.getValue(z, 0);
	//I need to dynamically create a variable for each, "a1"  = the text Metric #1 that is in the cell A2
	//console.log ("a= " a)
}
    });
}
//This is the section of code that breaks the page trying to change the label on this first gauge.
google.setOnLoadCallback(queryValue3);
function queryValue3 () {
    var query3 = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=B2:B17&key=0Ai_2YLvaQba0dFlQQnU2ZWV1SFp2QUZMcHVfcnVQcFE&gid=10');
    query3.send(function (response) {
        if (response.isError()) {
            alert('Error in query3: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
    var data3 = response.getDataTable();
    var m1 = data3.getValue(0, 0);
    var red1 = "<span style='color:#ff0000'>" + a1 + "</span>";
    var yellow1 = "<span style='color:#FF9900'>" + a1 + "</span>";
    var green1 = "<span style='color:#009900'>" + a1 + "</span>";
    if (m1 <= 70)
    {
    m1 = green1;
    }
    else if (71 === m1 && m1 <= 89)
    {
    m1 = yellow1;
    }
    else if (m1 >=90)
    {
    m1 = red1;
    }
	console.log ("m1= " +m1)
    document.getElementById('m1').innerHTML;
	console.log ("m1= "+m1)
    });
    }

Open in new window

I am stuck on the second query trying to create the variable within the loop.

I think I'm close but? The idea is to put the colored Metric (same color and the gauge value) names in this sheet above these gauges.

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer