Question

I want visually represent table row data in a chart/graph but the chart should be displayed only when the mouse hovers over the chart icon.

Example screenshot

Example link

Hover over the chart icon and a chart is displayed.

I have basic knowledge of highcharts and google chart but dont know how to show and hide them on mouse hover events. I looked at the source code of the above linked page and they are using css canvas.(trying to figure out what that is)

Can someone please give me a simple demo/example of the above functionality

Answer 1

here is a basic example to show you the functionality how to dynamically attach event handlers to elements and create a element to hold (chart) data to display, no chart data suppled yet thought. again its just an example

Some css to absolutely position the chart container relative to its parent element

 .chart-icon{position:relative;width:20px;height:20px;background:#aaa;margin:2px}
 div.chartContainer {position:absolute;left:40px;width:300px;height:300px;background:#fff;border:2px outset #666;overflow:hidden}


  <div id="charticon_i1" class="chart-icon">1</div>
  <div id="charticon_i2" class="chart-icon">2</div>
  <div id="skip">`<hr>`</div>
  <div id="charticon_i17" class="chart-icon">17</div>

.

var chart_icons = [];

chart_icons = document.getElementsByTagName("div");


for (var i = 0; i < chart_icons.length; i++) { 

  var txtchart = (chart_icons[i].id).slice(0,(chart_icons[i].id).lastIndexOf("_"));

  if(txtchart === "charticon"){

var ome = chart_icons[i].id;
// W3C way to add event listners
 if (document.body.addEventListener) {
 document.getElementById(chart_icons[i].id).addEventListener("mouseover", function (){displayChart(this)}, true);
 document.getElementById(chart_icons[i].id).addEventListener("mouseout", function (){removeChart(this)}, true);

  }else{
// IE lazy method 
 document.getElementById(chart_icons[i].id).onmouseover = function (){displayChart(this)};
 document.getElementById(chart_icons[i].id).onmouseout = function (){removeChart(this)};
 }


    }

}

function displayChart(oChart){
    var elem = document.createElement("div");
    elem.className = 'chartContainer';
    elem.id = 'chartContainer'; // id can be static because it will be removed form the DOM

// append the newly created div to the icon element
document.getElementById(oChart.id).appendChild(elem);

document.getElementById(elem.id).innerHTML = "TODO: Add Chart data, many ways of getting the data form already displayed as inline in the table, arrays, canvas, webservices.<h4>" + oChart.id + "</h4>";
}

function removeChart(oChart){

  var chartContainer = document.getElementById(oChart.id);
  // remove the container so the DOM dosnt get poluited
  chartContainer.removeChild(chartContainer.firstChild.nextSibling);

}