Vertical Dygraph

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

by bhupendra negi

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 the 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) rotateY(180deg)';
            $(dygraph_div_id + '...