Vertical Dygraph

This dygraph has been roated to show two values on Y axis for single X value

HTML

<script src="http://dygraphs.com/dygraph-combined.js"></script>
<script src="http://localhost/GRAPH/testdata-2.csv"></script>
<div id="dygraph_div"></div>

CSS

/* rotate the 'rollPeriod' input box */
    #dygraph_div input {
        transform: translateY(-3px) translateX(-3px) rotate(90deg) rotateY(180deg);
        -ms-transform: translateY(-3px) translateX(-3px) rotate(90deg) rotateY(180deg);
        -webkit-transform: translateY(-3px) translateX(-3px) rotate(90deg) rotateY(180deg);
    }
    /* fix axis labels */
    #dygraph_div .dygraph-axis-label-y {
        text-align: center;
    }
    #dygraph_div .dygraph-axis-label-x {
        text-align: right;
    }
    /* rotate legend (this would need to be moved as well, or just set the labelsDiv option for the dygraph) */
    #dygraph_div .dygraph-legend {
        transform: rotate(-90deg) rotateX(180deg) translateX(0.5px) translateY(0.5px);
        -ms-transform: rotate(-90deg) rotateX(180deg) translateX(0.5px) translateY(0.5px);
        -webkit-transform: rotate(-90deg) rotateX(180deg) translateX(0.5px) translateY(0.5px);
    }

#dygraph_div .dygraph-label { font-family: Georgia, Verdana, serif; }

#dygraph_div .dygraph-ylabel { font-size: 14px; text-shadow: gray -2px 2px 2px; }
#dygraph_div .dygraph-xlabel { font-size: 14px; text-shadow: gray -2px 2px 2px; }
.dygraph-label.dygraph-y2label {

-webkit-transform: rotateY(180deg);
}

JavaScript

$().ready( function() {
     
        var dygraph_width = 400;
        var dygraph_height = 400;
        var dygraph_div_id = '#dygraph_div';
        
        // change the dygraph interaction model for this graph so we can properly interact with a graph which is rotated 90 degrees. Basically, we need to switch mouse X and mouse Y values
        var newInteraction = function( c, b, a ) {
            // 'c' is the MouseEvent, and we need to change the X and Y values.
            // However, the MouseEvent object is read-only, so we need to make a new MouseEvent based on the values of thttp://jsfiddle.net/BHUPENDRA1011/4AxLC/#he old one.
            var new_c;
            if (document.createEvent) new_c = document.createEvent('MouseEvent');
            else if (document.createEventObject) new_c = document.createEventObject();
            
            // switch the x and y values for this mouse event by copying the old mouse event and inserting new x & y values, based on the position of the dygraph.
            // Dygraphs doesn't make use of screenX and screenY, so we can ignore those
            var new_x = $(dygraph_div_id).width() + $(dygraph_div_id).offset().left - (c.pageY - $(dygraph_div_id).offset().top) - $(window).scrollLeft();
            var new_y = $(dygraph_div_id).height() + $(dygraph_div_id).offset().top - (c.pageX - $(dygraph_div_id).offset().left) - $(window).scrollTop();
            new_c.initMouseEvent( c.type, c.bubbles, c.cancelable, c.view, c.detail, c.screenX, c.screenY, new_x, new_y, c.ctrlKey, c.altKey, c.shiftKey, c.metaKey, c.button, c.target );
            
            // call the original function, but with the new altered MouseEvent
            Dygraph.Interaction.defaultModel[c.type]( new_c, b, a );
        }
        
        // the 'restyle' function rotates and repositions all the labels so as to be readable once again.
        var restyle = function() {
            var xlabel_transform = 'rotate(180deg) translateY(-5px)...