Inspire SVG Graphs Example

by roemer

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>
<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 double" xlink:href="#xGrid" style=""></use>
    <use class="grid double" xlink:href="#yGrid"...

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
   ...