/* ======================================================================
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
  } );