Google Charts/ Google Table, put tooltip on header row.

A strange problem was seen while trying to enhance google table to add tooltip like function on the header of the table. This problem has few steps, as I am putting down below.

 How to add tooltip like function on the column of the google table

Google data structures for charting work well for the tooltip for all other charts but when you try to put the tooltip in the header of a google table, no inbuilt mechanism works. To solve this we can use following method on either jquery 'hover' or 'mouseover' functions.This will

Javascript
function drawTable(jsondata){

var d = JSON.parse(jsondata);
var tooltip = d[0]; 

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(tableData, {showRowNumber: false});

var mouseover = function () {
    var index = jQuery(this).index();
    $("#tooltip").html(tooltip[index]);
};
var mouseout = function () {
    $("#tooltip").html('');
};

 

$('.google-visualization-table-sorthdr').mouseover(mouseover).mouseout(mouseout);  

} 





where tooltip[] is an array of tooltip message for every header. I pullled my messages from jsondata variable.




 


HTML


  


     <body>
        <div id="table_div"></div>
        <div id="tooltip"></div>
    </body> 


















Works good till someone hovers around, but as soon as clicked hover functionality ends 



 



This is little weird but as soon as one click on header the hover functionality is disabled, and no or stationary message is displayed in tooltip div. This is because as soon you click on header something in google code unbinds the functions, so you have to explicitly bind the hover functions back in case of the click event.




function drawTable(jsondata){

var d = JSON.parse(jsondata);
var tooltip = d[0];

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(tableData, {showRowNumber: false});

var mouseover = function () {
    var index = jQuery(this).index();
    $("#tooltip").html(tooltip[index]);
};
var mouseout = function () {
    $("#tooltip").html('');
};

var mouseclick = function () {
    $('.google-visualization-table-sorthdr').bind("mouseover", mouseover);
    $('.google-visualization-table-sorthdr').bind("mouseout", mouseout);
};

$('.google-visualization-table-sorthdr').mouseover(mouseover).mouseout(mouseout);

$('.google-visualization-table-sorthdr').click(mouseclick);
} 






Works good till the first click breaks on the second click on header with above problem 



This is because we need to bind the click function again on click event. Else second time all the functions get unbind. So we need to create a loop where click event will unbind and we will bind the click function again with all other functions back to the event.




function drawTable(jsondata){

var d = JSON.parse(jsondata);
var tooltip = d[0];

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(tableData, {showRowNumber: false});

var mouseover = function () {
    var index = jQuery(this).index();
    $("#tooltip").html(tooltip[index]);
};
var mouseout = function () {
    $("#tooltip").html('');
};

var mouseclick = function () {
    $('.google-visualization-table-sorthdr').bind("mouseover", mouseover);
    $('.google-visualization-table-sorthdr').bind("mouseout", mouseout);
    $('.google-visualization-table-sorthdr').bind("click", mouseclick);
};

$('.google-visualization-table-sorthdr').mouseover(mouseover).mouseout(mouseout);

$('.google-visualization-table-sorthdr').click(mouseclick);
}





 












































Comments











Post a Comment






























Popular posts from this blog









Caused by: java.sql.SQLTimeoutException: ORA-01013: user requested cancel of current operation





















 Many times we encounter this error and think that there might be some JPA issue or network issue. However, the error is pretty explicit in its nature, but still not clear to ring the bell very first time.  As the error says there is a timeout, and since Oracle is saying, we shall accept it.   Another clue is "user requested cancel of current operation". This means that the connection was closed by the application server not the database server, hence it can be safely concluded that application has configured timeouts on transactions at its end.   However, if you feel that this transaction should have been concluded within the application server limits, your doubt might be true.   This problem can arise in case there is a lock on the record being updated by JPA or lock on the table in which JPA is attempting to insert. The lock is most probably being held by some other application, and since application server configuration is on aggressive SLA, the transaction is waiting its








Read more










HashiCorp Vault Integration with Ansible Etower using approle




















Image







HashiCorp Vault is  a secrets management tool specifically designed to control access to sensitive credentials in a low-trust environment . It can be used to store sensitive values and at the same time dynamically generate access for specific services/applications on lease.  Integrating the vault with Ansible Etower provides robust and secure automation. Following is the step-by-step guide for the integration. Enable key-value secret engine in Hashi Vault (also known as "kv" engine).  Let's call the engine, the "kv" engine. Create a secret inside "kv". A secret can be a collection of key-value pairs or a JSON for nested structure.            Lets assume that secrets are stored as JSON  in the format   {   "my_app":{     "service_account_name": "some_service",     "service_account_password": "some_password"   } }    Create a secret policy defining what can be done with the above-defined secret. Create an








Read more










utility to extract date from text with java




















Image







   A date pattern recognition algorithm to not only identify date pattern but also fetches probable date in Java date format. This algorithm is very fast and lightweight. The processing time is linear and all dates are identified in a single pass.     Algorithm resolves date using tree traverse mechanism. Tree data structures are custom created to build supported date, time and month patterns.     Following Trees are used (Note: ^ sign denotes complete pattern)      DATE PATTERN TREE      Month Pattern Tree (Jan and January both are valid, identified using ^ sign)      Time pattern (Identified as suffix to Date, $ sign indicates SPACE character)      Tree structures are used in the following algorithm.       Date Part Identification algorithm flowchart                        Time part identification algorithm flowchart    These flow charts are self-explanatory in most part. --> sign is used to denote next match in respective tree structures.   The algorithm also acknowledges multipl








Read more