Tooltips on charts
Tooltips on charts


Former-commit-id: fac16cbbc765207e6030181367b16020304fd8e0

file:a/charts.php -> file:b/charts.php
<?php <?php
include_once('include/common.inc.php'); include_once('include/common.inc.php');
include_header(); include_header();
$db = $server->get_db('disclosr-agencies'); $db = $server->get_db('disclosr-agencies');
   
?> ?>
<div class="foundation-header"> <div class="foundation-header">
<h1><a href="about.php">Charts</a></h1> <h1><a href="about.php">Charts</a></h1>
<h4 class="subheader">Lorem ipsum.</h4> <h4 class="subheader">Lorem ipsum.</h4>
</div> </div>
<div id="placeholder" style="width:900px;height:600px;"></div> <div id="placeholder" style="width:900px;height:600px;"></div>
<script id="source"> <script id="source">
window.onload = function() { window.onload = function() {
$(document).ready(function() { $(document).ready(function() {
var d1 = []; var d1 = [];
var labels = []; var labels = [];
<?php <?php
try { try {
$rows = $db->get_view("app", "scoreHas?group=true", null, true)->rows; $rows = $db->get_view("app", "scoreHas?group=true", null, true)->rows;
   
/*foreach ($rows as $key => $row) { /*foreach ($rows as $key => $row) {
echo " d1.push([$key, {$row->value}]);".PHP_EOL; echo " d1.push([$key, {$row->value}]);".PHP_EOL;
echo " labels.push('{$row->key}');".PHP_EOL; echo " labels.push('{$row->key}');".PHP_EOL;
}*/ }*/
$dataValues = Array(); $dataValues = Array();
foreach ($rows as $row) { foreach ($rows as $row) {
$dataValues[$row->value] = $row->key; $dataValues[$row->value] = $row->key;
} }
$i = 0; $i = 0;
ksort($dataValues); ksort($dataValues);
foreach($dataValues as $value => $key) { foreach($dataValues as $value => $key) {
echo " d1.push([$i, $value]);".PHP_EOL; echo " d1.push([$i, $value]);".PHP_EOL;
echo " labels.push('$key');".PHP_EOL; echo " labels.push('$key');".PHP_EOL;
$i++; $i++;
} }
} catch (SetteeRestClientException $e) { } catch (SetteeRestClientException $e) {
setteErrorHandler($e); setteErrorHandler($e);
} }
?> ?>
$.plot($("#placeholder"), [ d1], { $.plot($("#placeholder"), [ d1], {
  grid: { hoverable: true },
   
series: { series: {
bars: { show: true, barWidth: 0.6 } bars: { show: true, barWidth: 0.6 }
}, },
xaxis: { xaxis: {
tickFormatter: function formatter(val, axis) { tickFormatter: function formatter(val, axis) {
if (labels[val]) { if (labels[val]) {
return(labels[val]); return(labels[val]);
} else { } else {
return ""; return "";
} }
}, },
labelAngle: 90 labelAngle: 90
} }
}); });
  var previousPoint = null;
  $("#placeholder").bind("plothover", function (event, pos, item) {
  if (item) {
  if (previousPoint != item.datapoint) {
  previousPoint = item.datapoint;
   
  $("#tooltip").remove();
  var x = item.datapoint[0],
  y = item.datapoint[1] - item.datapoint[2];
   
  showTooltip(item.pageX, item.pageY, y );
  }
  }
  else {
  $("#tooltip").remove();
  previousPoint = null;
  }
  });
   
}); });
}; };
  function showTooltip(x, y, contents) {
  $('<div id="tooltip">' + contents + '</div>').css( {
  position: 'absolute',
  display: 'none',
  top: y + 5,
  left: x + 5,
  border: '1px solid #fdd',
  padding: '2px',
  'background-color': '#fee',
  opacity: 0.80
  }).appendTo("body").fadeIn(200);
  }
</script> </script>
   
<?php <?php
include_footer(); include_footer();
?> ?>