joshpencheon/demo.html

## demo.html
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="http://raphaeljs.com/raphael.js"></script>
  </head>

  <body>
    <script type="text/javascript" charset="utf-8">
      var paper = Raphael(50, 150, 1000, 200);

      var plots = [], plotColors = [], ys = [];

      var plotCount = 12;
      var pointsPerPlot = 100;

      for (var k=0; k < plotCount; k++) {
        var coords = [];
        for (var i = 0; i < pointsPerPlot; i++) {
          y = (coords[i - 1] || [0, 0])[1] + (Math.random() * 7) - 3
          coords[i] = [i, y];
          ys[k*pointsPerPlot + i] = y;
        }
        plotColors[k] = Raphael.getColor();
        plots[k] = coords;
      };


      slicePoint1 = 0;
      slicePoint2 = pointsPerPlot;

      drawCoords = [];

      function drawGraph () {

        paper.clear();

        starts = [];
        ends = [];

        for (var k=0; k < plotCount; k++) {
          starts[k] = Math.min.apply(this, ys.slice(k*pointsPerPlot + slicePoint1, k*pointsPerPlot + slicePoint2));
          ends[k] = Math.max.apply(this, ys.slice(k*pointsPerPlot + slicePoint1, k*pointsPerPlot + slicePoint2));
        };

        starting = Math.min.apply(this, starts);
        ending = Math.max.apply(this, ends);

        range = ending - starting;


        hstep = 1000 / (slicePoint2 - slicePoint1 - 1);
        vstep = 200 / range;

        for (var k=0; k < plotCount; k++) {
          drawCoords = plots[k].slice(slicePoint1, slicePoint2)

          $('#output3').html(slicePoint1 + ' --> ' + slicePoint2 + ' ~ ' + hstep + ' ' + drawCoords.length);

          pathString = 'M';
          firstPoint = drawCoords.shift();
          pathString += 0*hstep;
          pathString += " " + (200 - vstep*(firstPoint[1] - starting))

          startString = 'M0 200';

          for (var i = 0; i < drawCoords.length; i++) {
            startString += 'M0 200'
            pathString += "L" + (i+1)*hstep;
            pathString += " " + (200 - vstep*(drawCoords[i][1] - starting))
          }

          paper.path(pathString).attr({stroke: plotColors[k] });
        };
      };
      drawGraph();

      // ------- SLIDER -------------

      var controls = Raphael(50, 200, 1200, 1200);

      var bar = controls.rect(5, 200, 1000, 6).attr({'fill':'lightgray', 'stroke-width' : 0})
      var c1 = controls.rect(5, 186, 10, 20).attr({'fill': '#FF0000', 'stroke': 'black', 'stroke-width': 1})
      var c2 = controls.rect(1005, 186, 10, 20).attr({'fill': '#FF0000', 'stroke': 'black', 'stroke-width': 1})

      var filledBar = controls.rect(c1.attrs.x, bar.attrs.y, c2.attrs.x - c1.attrs.x, bar.attrs.height).attr({fill: "gray"}).attr({'stroke-width':0 });

      filledBar.drag(function(dx, dy) {
        console.log(dx + ' ' + dy)
        this.attr({x: this.ox + dx, y: this.oy});

        move.apply(c1, [dx, dy]);
        move.apply(c2, [dx, dy]);

      }, function(){
        this.ox = this.attr("x");
        this.oy = this.attr("y");

        start.apply(c1);
        start.apply(c2);
      }, function() {});

      for (var i = 0; i <= 20; i ++) {
        var str = 'M' + (5 + i * 50) + ' 206L' + (5 + i * 50) + ' ';

        if ( i % 2 == 0 ) {
          str += '218'
        } else {
          str += '212'
        }
        controls.path(str).attr({'stroke': 'gray', 'stroke-width': 0.5})
      }

      var otherHandle = function(self) {
        return self == c1 ? c2 : c1;
      },
      start = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
      },
      move = function (dx, dy) {
        // move will be called with dx and dy
        var nx = Math.min(Math.max(this.ox + dx, bar.attrs.x), bar.attrs.x + bar.attrs.width);

        this.attr({x: nx, y: this.oy});
        filledBar.attr({x: Math.min(c1.attrs.x, c2.attrs.x), width: Math.abs(c2.attrs.x - c1.attrs.x)});

        c1.toFront(); c2.toFront();

        var min = Math.min(c1.attrs.x, c2.attrs.x),
            max = Math.max(c1.attrs.x, c2.attrs.x);


        var total = pointsPerPlot,
            start = min / total,
            length = (max-min) / total;

        slicePoint1 = Math.floor(total * min / bar.attrs.width);
        slicePoint2 = Math.ceil(total * max / bar.attrs.width);
        if (slicePoint2 - slicePoint1 > 1) {
          drawGraph();
          $('#output').html(min + ' - ' + max);
          $('#output2').html(start + ' --> ' + length);
        };
      };

      up = function () {

      };

      c1.toFront().drag(move, start, up);
      c2.toFront().drag(move, start, up);

    </script>
    <p id="output"></p>
    <p id="output2"></p>
    <p id="output3"></p>
  </body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Demo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script src="http://raphaeljs.com/raphael.js"></script>
	</head>

	<body>
	<script type="text/javascript" charset="utf-8">
	var paper = Raphael(50, 150, 1000, 200);

	var plots = [], plotColors = [], ys = [];

	var plotCount = 12;
	var pointsPerPlot = 100;

	for (var k=0; k < plotCount; k++) {
	var coords = [];
	for (var i = 0; i < pointsPerPlot; i++) {
	y = (coords[i - 1] \|\| [0, 0])[1] + (Math.random() * 7) - 3
	coords[i] = [i, y];
	ys[k*pointsPerPlot + i] = y;
	}
	plotColors[k] = Raphael.getColor();
	plots[k] = coords;
	};



	slicePoint1 = 0;
	slicePoint2 = pointsPerPlot;

	drawCoords = [];

	function drawGraph () {

	paper.clear();

	starts = [];
	ends = [];

	for (var k=0; k < plotCount; k++) {
	starts[k] = Math.min.apply(this, ys.slice(kpointsPerPlot + slicePoint1, kpointsPerPlot + slicePoint2));
	ends[k] = Math.max.apply(this, ys.slice(kpointsPerPlot + slicePoint1, kpointsPerPlot + slicePoint2));
	};

	starting = Math.min.apply(this, starts);
	ending = Math.max.apply(this, ends);

	range = ending - starting;


	hstep = 1000 / (slicePoint2 - slicePoint1 - 1);
	vstep = 200 / range;

	for (var k=0; k < plotCount; k++) {
	drawCoords = plots[k].slice(slicePoint1, slicePoint2)

	$('#output3').html(slicePoint1 + ' --> ' + slicePoint2 + ' ~ ' + hstep + ' ' + drawCoords.length);

	pathString = 'M';
	firstPoint = drawCoords.shift();
	pathString += 0*hstep;
	pathString += " " + (200 - vstep*(firstPoint[1] - starting))

	startString = 'M0 200';

	for (var i = 0; i < drawCoords.length; i++) {
	startString += 'M0 200'
	pathString += "L" + (i+1)*hstep;
	pathString += " " + (200 - vstep*(drawCoords[i][1] - starting))
	}

	paper.path(pathString).attr({stroke: plotColors[k] });
	};
	};
	drawGraph();

	// ------- SLIDER -------------

	var controls = Raphael(50, 200, 1200, 1200);

	var bar = controls.rect(5, 200, 1000, 6).attr({'fill':'lightgray', 'stroke-width' : 0})
	var c1 = controls.rect(5, 186, 10, 20).attr({'fill': '#FF0000', 'stroke': 'black', 'stroke-width': 1})
	var c2 = controls.rect(1005, 186, 10, 20).attr({'fill': '#FF0000', 'stroke': 'black', 'stroke-width': 1})

	var filledBar = controls.rect(c1.attrs.x, bar.attrs.y, c2.attrs.x - c1.attrs.x, bar.attrs.height).attr({fill: "gray"}).attr({'stroke-width':0 });

	filledBar.drag(function(dx, dy) {
	console.log(dx + ' ' + dy)
	this.attr({x: this.ox + dx, y: this.oy});

	move.apply(c1, [dx, dy]);
	move.apply(c2, [dx, dy]);

	}, function(){
	this.ox = this.attr("x");
	this.oy = this.attr("y");

	start.apply(c1);
	start.apply(c2);
	}, function() {});

	for (var i = 0; i <= 20; i ++) {
	var str = 'M' + (5 + i * 50) + ' 206L' + (5 + i * 50) + ' ';

	if ( i % 2 == 0 ) {
	str += '218'
	} else {
	str += '212'
	}
	controls.path(str).attr({'stroke': 'gray', 'stroke-width': 0.5})
	}

	var otherHandle = function(self) {
	return self == c1 ? c2 : c1;
	},
	start = function () {
	// storing original coordinates
	this.ox = this.attr("x");
	this.oy = this.attr("y");
	},
	move = function (dx, dy) {
	// move will be called with dx and dy
	var nx = Math.min(Math.max(this.ox + dx, bar.attrs.x), bar.attrs.x + bar.attrs.width);

	this.attr({x: nx, y: this.oy});
	filledBar.attr({x: Math.min(c1.attrs.x, c2.attrs.x), width: Math.abs(c2.attrs.x - c1.attrs.x)});

	c1.toFront(); c2.toFront();

	var min = Math.min(c1.attrs.x, c2.attrs.x),
	max = Math.max(c1.attrs.x, c2.attrs.x);


	var total = pointsPerPlot,
	start = min / total,
	length = (max-min) / total;

	slicePoint1 = Math.floor(total * min / bar.attrs.width);
	slicePoint2 = Math.ceil(total * max / bar.attrs.width);
	if (slicePoint2 - slicePoint1 > 1) {
	drawGraph();
	$('#output').html(min + ' - ' + max);
	$('#output2').html(start + ' --> ' + length);
	};
	};

	up = function () {

	};

	c1.toFront().drag(move, start, up);
	c2.toFront().drag(move, start, up);

	</script>
	<p id="output"></p>
	<p id="output2"></p>
	<p id="output3"></p>
	</body>
	</html>