Inspire SVG Graphs Example

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>
<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" style=""></use>
    <rect class="indicator" height="192" width="3" x="111" y="192"></rect>
    <g class="triggerLines">
        <line x1="113" x2="113" y1="360" y2="192"></line>
        <line x1="259" x2="259" y1="360" y2="171"></line>
        <line x1="405" x2="405" y1="360" y2="179"></line>
        <line x1="551" x2="551"...

CSS

body {
    background-color: #b2e9e4;
}
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;
}

JavaScript

$('svg.graph .points circle.plain').each(function (index) {
    // For each plain circle...
    $(this).on('mouseenter', function (event) {
        // Move the indicator line
        moveIndicator(index);
        // 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) {
        // 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);
}