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 + ' .dygraph-xlabel').parent().css({
             transform: xlabel_transform,
             msTransform:...