Inspire SVG Graphs Example

by valk

HTML

<script src="http://rvlasveld.github.io/files/jquery.svg.js"></script>
<script src="http://rvlasveld.github.io/files/jquery.svgdom.js"></script>
<script src="http://rvlasveld.github.io/files/jquery.svganim.js"></script>
<!-- blog post http://rvlasveld.github.io/blog/2013/07/02/creating-interactive-graphs-with-svg-part-1/ -->

<div id="tooltip" style="">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
        <polygon id="tooltip-triangle" points="0,0 11,13 0,13"></polygon>
    </svg>
  <p id="tooltip-title"></p>
  <div class="value"> <span class="value-part"></span>
    <span class="value-total">Weeks</span>

  </div>
</div>
<svg class="graph" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" id="gradientShadow" r="55%">
            <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color: #AAA; stop-opacity:0"></stop>
        </radialGradient>
    </defs>
    <g class="grid x-grid" id="xGrid">
        <line x1="113" x2="113" y1="10" y2="380"></line>
        <line x1="259" x2="259" y1="10" y2="380"></line>
        <line x1="405" x2="405" y1="10" y2="380"></line>
        <line x1="551" x2="551" y1="10" y2="380"></line>
        <line x1="697" x2="697" y1="10" y2="380"></line>
    </g>
    <g class="grid y-grid" id="yGrid">
        <line x1="86" x2="697" y1="10" y2="10"></line>
        <line x1="86" x2="697" y1="68" y2="68"></line>
        <line x1="86" x2="697" y1="126" y2="126"></line>
        <line x1="86" x2="697" y1="185" y2="185"></line>
        <line x1="86" x2="697" y1="243" y2="243"></line>
        <line x1="86" x2="697" y1="301" y2="301"></line>
        <line x1="86" x2="697" y1="360" y2="360"></line>
    </g>
    <g class="surfaces">
        <path class="first_set" d="M113,360 L113,192 L259,171 L405,179 L551,200 L697,204 L697,360 Z"></path>
    </g>
    <use class="grid...

CSS

body {
  background-color: #b2e9e4;
}

svg.graph {
  height: 500px;
  width: 800px;
}

svg.graph .grid {
  stroke: white;
  stroke-dasharray: 1 2;
  stroke-width: 1;
}

svg.graph .points .plain {
  stroke: white;
  stroke-width: 3;
}

svg.graph .first_set {
  fill: #00554d;
}

svg.graph .surfaces {
  fill-opacity: 0.5;
}

svg.graph .grid.double {
  stroke-opacity: 0.4;
}

svg.graph .labels {
  font-family: Arial;
  font-size: 14px;
  kerning: 1;
}

svg.graph .labels.x-labels {
  text-anchor: middle;
}

svg.graph .labels.y-labels {
  text-anchor: end;
}

svg.graph rect.indicator {
  stroke-width: 1px;
  stroke: #bfcdcb;
  fill: white;
  display: none;
}

svg.graph .triggerLines {
  stroke-width: 60;
  stroke: transparent;
}

#tooltip {
  position: absolute;
  background: black;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-family: Arial;
  font-size: 14px;
  font-weight: lighter;
  padding: 9px 11px 0px 11px;
  display: none;
  z-index: 100 !important;
  width: 165px;
  min-height: 80px;
  box-shadow: 1px 1px 1px 0px #000;
}

#tooltip.right {
  box-shadow: -1px 1px 1px 0px #000;
}

#tooltip.right svg {
  left: auto;
  right: 0px;
}

#tooltip svg {
  position: absolute;
  display: inline;
  float: right;
  left: 0px;
  right: auto;
  top: -13px;
  width: 11px;
  height: 13px;
}

#tooltip #tooltip-triangle {
  background: black;
  fill: rgba(0, 0, 0, 0.8);
}

#tooltip .value .value-part {
  font-size: 32px;
  vertical-align: top;
  position: relative;
  top: -3px;
}

JavaScript

$('svg.graph .points circle.plain').each(function(index) {
  // For each plain circle...
  $(this).on('mouseenter', function(event) {
    // Move the indicator line
    moveIndicator(index);
    // Show the tooltip for this data point
    showTooltip(this);

    // Grow shadow point when mouse enters the point
    $(this).prev().stop(true, false).animate({
      svgR: 12,
      svgStrokeOpacity: 0,
      svgStrokeWidth: 0,
    }, 200);
  }).on('mouseleave', function(event) {
    // Hide the tooltip
    hideTooltip();

    // Shrink shadow point when mouse leaves the point
    $(this).prev().stop(true, false).animate({
      svgR: 5,
      svgStrokeOpacity: 1,
      svgStrokeWidth: 4
    }, 200);
  });
});

// Add mouse event handlers to move indicator line when triggerLines have mouse
$('g.triggerLines line').each(function(index) {
  $(this).on('mouseenter', function() {
    moveIndicator(index);
  });
});

// Move the indicator line to a trigger line
function moveIndicator(index) {

  triggerLine = $($('svg.graph .triggerLines line').get(index));
  indicator = $('svg .indicator');

  // If the indicator is already visible, then animate movement. Otherwise just appear
  animateMoveTime = 0;
  if (indicator.css('display') != 'none') animateMoveTime = 250;

  // Get the y-coordinate of the first (and thus highest) data point
  y = $($('g.points:first').children('.plain').get(index)).attr('cy');

  indicator.stop(true, false).show().animate({
    svgX: parseInt(triggerLine.attr('x1')) - (parseInt(indicator.attr('width')) / 2),
    svgY: y,
    svgHeight: 385 - y
  }, animateMoveTime);
}

// Show the tooltip near a specific dataPoint
function showTooltip(dataPoint) {
  tooltip = $('#tooltip');
  dataPoint = $(dataPoint);

  // Set the data-set title, using the group element
  tooltip.find('#tooltip-title').text(dataPoint.parent().data('setname'));

  // Set the value for this data point
  tooltip.find('.value-part').text(dataPoint.data('value'));

  // Determine...