text: 
  
  
  
  /* ======================================================================
  LINES
  ====================================================================== */
  
  // set up our data series with 50 random data points
  
  var seriesData = [ [], [], [] ];
  var random = new Rickshaw.Fixtures.RandomData(150);
  
  for (var i = 0; i < 100; i++) {
  	random.addData(seriesData);
  }
  
  // instantiate our graph!
  
  var graph = new Rickshaw.Graph( {
  	element: document.getElementById("rickshaw-lines"),
  
  	renderer: 'line',
  	series: [
  		{
  			color: "#399BFF",
  			data: seriesData[0],
  			name: 'London'
  		}, {
  			color: "#33577B",
  			data: seriesData[1],
  			name: 'New York'
  		}, {
  			color: "#26A65B",
  			data: seriesData[2],
  			name: 'Tokyo'
  		}
  	]
  } );
  
  graph.render();
  
  var hoverDetail = new Rickshaw.Graph.HoverDetail( {
  	graph: graph,
  	formatter: function(series, x, y) {
  		var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
  		var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
  		var content = swatch + series.name + ": " + parseInt(y) + '<br>' + date;
  		return content;
  	}
  } );
  
  
  /* ======================================================================
  BARS
  ====================================================================== */
  
  // set up our data series with 50 random data points
  
  var seriesData = [ [], [], [] ];
  var random = new Rickshaw.Fixtures.RandomData(150);
  
  for (var i = 0; i < 50; i++) {
    random.addData(seriesData);
  }
  
  // instantiate our graph!
  
  var graph = new Rickshaw.Graph( {
    element: document.getElementById("rickshaw-bars"),
    height: 250,
    renderer: 'bar',
    series: [
      {
        color: "#399BFF",
        data: seriesData[0],
      }, {
        color: "#33577B",
        data: seriesData[1],
      }, {
        color: "#26A65B",
        data: seriesData[2],
      }
    ]
  } );
  
  graph.render();
  
    var hoverDetail = new Rickshaw.Graph.HoverDetail( {
      graph: graph
    } );
  
  
  /* ======================================================================
  SCALED
  ====================================================================== */
  var data, graph, i, max, min, point, random, scales, series, _i, _j, _k, _l, _len, _len1, _len2, _ref;
  
  data = [[], []];
  
  random = new Rickshaw.Fixtures.RandomData(12 * 60 * 60);
  
  for (i = _i = 0; _i < 100; i = ++_i) {
    random.addData(data);
  }
  
  scales = [];
  
  _ref = data[1];
  for (_j = 0, _len = _ref.length; _j < _len; _j++) {
    point = _ref[_j];
    point.y *= point.y;
  }
  
  for (_k = 0, _len1 = data.length; _k < _len1; _k++) {
    series = data[_k];
    min = Number.MAX_VALUE;
    max = Number.MIN_VALUE;
    for (_l = 0, _len2 = series.length; _l < _len2; _l++) {
      point = series[_l];
      min = Math.min(min, point.y);
      max = Math.max(max, point.y);
    }
    if (_k === 0) {
      scales.push(d3.scale.linear().domain([min, max]).nice());
    } else {
      scales.push(d3.scale.pow().domain([min, max]).nice());
    }
  }
  
  graph = new Rickshaw.Graph({
    element: document.getElementById("rickshaw-scaled"),
    renderer: 'line',
    series: [
      {
        color: '#399BFF',
        data: data[0],
        name: 'Series A',
        scale: scales[0]
      }, {
        color: '#33577B',
        data: data[1],
        name: 'Series B',
        scale: scales[1]
      }
    ]
  });
  
  new Rickshaw.Graph.Axis.Y.Scaled({
    element: document.getElementById('axis0'),
    graph: graph,
    orientation: 'left',
    scale: scales[0],
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT
  });
  
  new Rickshaw.Graph.Axis.Y.Scaled({
    element: document.getElementById('axis1'),
    graph: graph,
    grid: false,
    orientation: 'right',
    scale: scales[1],
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT
  });
  
  new Rickshaw.Graph.Axis.Time({
    graph: graph
  });
  
  new Rickshaw.Graph.HoverDetail({
    graph: graph
  });
  
  graph.render();
  
  /* ======================================================================
  TIME SCALE
  ====================================================================== */
  var seriesData = [ [], [] ];
  var random = new Rickshaw.Fixtures.RandomData(1540000);
  
  for (var i = 0; i < 200; i++) {
  	random.addData(seriesData);
  }
  
  var graph = new Rickshaw.Graph({
  	element: document.getElementById("rickshaw-timescale"),
  	height: 215,
  	stroke: true,
  	strokeWidth: 0.5,
  	renderer: 'area',
  	xScale: d3.time.scale(),
  	yScale: d3.scale.sqrt(),
  	series:[
  		{ color: '#33577B', data: seriesData[0] },
  		{ color: '#399BFF', data: seriesData[1] }
  	] 
  });
  
  graph.render();
  
  var xAxis = new Rickshaw.Graph.Axis.X({
  	graph: graph,
  	tickFormat: graph.x.tickFormat()
  });
  
  xAxis.render();
  
  var yAxis = new Rickshaw.Graph.Axis.Y({
  	graph: graph
  });
  
  yAxis.render();
  
  var slider = new Rickshaw.Graph.RangeSlider.Preview({
  	graph: graph,
  	element: document.getElementById('slider')
  });
  
  
  new Rickshaw.Graph.HoverDetail({
    graph: graph
  });
  
  
  /* ======================================================================
  GAPS
  ====================================================================== */
  var palette = new Rickshaw.Color.Palette();
  
  var graph = new Rickshaw.Graph( {
  	element: document.getElementById("rickshaw-gaps"),
  	renderer: 'area',
  	stroke: true,
  	series: [
  		{
  			data: [ { x: 0, y: 19 }, { x: 1, y: 30 }, { x: 2, y: 22 }, { x: 3, y: 29 }, { x: 4, y: 21 }, { x: 5, y: 29 } ],
  			name: 'new york',
  			color: palette.color()
  		}, {
  			data: [ { x: 0, y: 19 }, { x: 1, y: 29 }, { x: 2, y: 22 }, { x: 3, y: 27 }, { x: 4, y: 21 }, { x: 5, y: 29 } ],
  			name: 'boston',
  			color: palette.color()
  		}, {
  			data: [ { x: 0, y: 19 }, { x: 1, y: 22 }, { x: 2, y: 10 }, { x: 3, y: null }, { x: 4, y: 21 }, { x: 5, y: 29 } ],
  			name: 'los angeles',
  			color: palette.color()
  		}, {
  			data: [ { x: 0, y: 19 }, { x: 1, y: 10 }, { x: 2, y: 22 }, { x: 3, y: null }, { x: 4, y: 21 }, { x: 5, y: 29 } ],
  			name: 'san francisco',
  			color: palette.color()
  		}
  	]
  } );
  
  graph.render();
  
  new Rickshaw.Graph.HoverDetail({ graph: graph });
  
  
  
  
  /* ======================================================================
  FIXED
  ====================================================================== */
  var tv = 250;
  
  // instantiate our graph!
  var graph = new Rickshaw.Graph( {
  	element: document.getElementById("rickshaw-fixed"),
  	height: 250,
  	renderer: 'line',
  	series: new Rickshaw.Series.FixedDuration([{ name: 'one' }], undefined, {
  		timeInterval: tv,
  		maxDataPoints: 100,
  		timeBase: new Date().getTime() / 1000
  	}) 
  } );
  
  graph.render();
  
  // add some data every so often
  
  var i = 0;
  var iv = setInterval( function() {
  
  	var data = { one: Math.floor(Math.random() * 40) + 200 };
  
  	var randInt = Math.floor(Math.random()*100);
  	data.two = (Math.sin(i++ / 40) + 4) * (randInt + 100);
  	data.three = randInt + 300;
  
  	graph.series.addData(data);
  	graph.render();
  
  }, tv );
  
    var hoverDetail = new Rickshaw.Graph.HoverDetail( {
      graph: graph
    } );