Can I display one column of table data in a button format?

[Nagendra Singh]

Consider thsi code:

function drawCharts() {

 var jsonData1 = $.ajax({

     url: "http://127.0.0.1:9001/jolokia/read/MineStar:type=UserJMXBeanExpose,name=Statistics/*",

     dataType:"json",

     async: false

     }).responseText;

     

 var parsed1 = JSON.parse(jsonData1);

 var arr1 = [];

 for(var x in parsed1){

   arr1.push(parsed1[x]);

 }

 

      var size= arr1[3].User;

 

var dataArray1 = [['UserName', 'Status']];

for (var i = 3; i < arr1.length; i++) {

for (var j = 0; j < size.length; j++){

    dataArray1.push([arr1[i].User[j].userId, arr1[i].User[j].status]);

}

}

    

var data1 = new google.visualization.arrayToDataTable(dataArray1);

 var chart1 = new google.visualization.Table(document.getElementById('chart_div1'));

 chart1.draw(data1, {width: 800, height: 200, showRowNumber: true, allowHtml: true});

 setTimeout(drawCharts, 5000); 

 

}

My status values are 0 and 6. 0 for login and 6 for logout. How can I have a table where I can show a green button for login and red for logout.

[Andrew Gallant]

You can set the formatted value of the status value cells to whatever HTML string you need to create the appearance you want.  As an example:

for (var i = 0, length = data1.getNumberOfRows(); i < length; i++) {

    var value = data1.getValue(i, 1);

    var className = (value === 0) ? 'green_button' : 'red_button';

    data1.setFormattedValue(i, 1, '<span class="button ' + className + '">' + value + '</span>';

}

Then style the spans appropriately in CSS, eg:

span.button {

    height: 1.5em;

    width: 25%;

    display: inline-block;

}

span.red_button {

    background-color: #ff0000;

}

span.green_button {

    background-color: #00ff00;

[Nagendra Singh]

Yup its working. Thanks Andrew.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/bGKVDuT50Os/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Nagendra Singh]

Hi,

When the url is not authenticated the json values are loaded into the table normally. Like this:

function drawCharts() {

  var jsonData1 = $.ajax({

      url: "http://***.***.***.***:9001/jolokia/*",

      dataType:"json",

      async: false

      }).responseText;

      

  var parsed1 = JSON.parse(jsonData1);

  var arr1 = [];

  for(var x in parsed1){

    arr1.push(parsed1[x]);

  }

  

      var size= arr1[3].User;

  

 var dataArray1 = [['UserName', 'Status']];

 for (var i = 3; i < arr1.length; i++) {

 for (var j = 0; j < size.length; j++){

     dataArray1.push([arr1[i].User[j].userId, arr1[i].User[j].status]);

 }

 }

     

 var data1 = new google.visualization.arrayToDataTable(dataArray1);

  var chart1 = new google.visualization.Table(document.getElementById('chart_div1'));

  chart1.draw(data1, {width: 800, height: 200, showRowNumber: true, allowHtml: true});

  setTimeout(drawCharts, 5000); 

  

}

But as soon as the url is authenticated, i.e. when you hit the url alone a popup will come asking for username and password, which when provided shows the value in json format. Then the code fails. I am not getting any idea how to tackle this situation.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.