arfon/gist:4152089

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Spotty plots</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/vendor/d3.min.js"></script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/rickshaw.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://raw.github.com/shutterstock/rickshaw/master/rickshaw.min.css">
    </script>
  </head>
  <body>

    <div id="chart_container">
    	<div id="chart"></div>
    </div>

    <script>
      var returnedData = {};

      new Rickshaw.Graph.JSONP({
          element: document.querySelector('#chart'),
          dataURL: 'http://spot.arfon.org/instances/m1.small/us-east-1b',
          renderer: 'line',
          width: 580,
          height: 250,
          onData: function(data) {
              $.each(data, function(i, item){
                  // Initialise key if not present
                  if (!returnedData.hasOwnProperty(item.availability_zone)){
                      returnedData[item.availability_zone] = [];
                  }

                  if(item.product_description == "Linux/UNIX"){
                      $.each(item.pricing_history, function(date, price){
                        returnedData[item.availability_zone].push({x: Date.parse(date), y: parseFloat(price)});
                      });
                  };
              });
              var returned = [{name: 'us-east-1b', data: returnedData['us-east-1b']}];
              console.log(returned);
              return returned;

          },
          onComplete: function(transport) {
            // do something
          }
      });
    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Spotty plots</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="https://raw.github.com/shutterstock/rickshaw/master/vendor/d3.min.js"></script>
	<script src="https://raw.github.com/shutterstock/rickshaw/master/rickshaw.min.js"></script>
	<link type="text/css" rel="stylesheet" href="https://raw.github.com/shutterstock/rickshaw/master/rickshaw.min.css">
	</script>
	</head>
	<body>

	<div id="chart_container">
	<div id="chart"></div>
	</div>

	<script>
	var returnedData = {};

	new Rickshaw.Graph.JSONP({
	element: document.querySelector('#chart'),
	dataURL: 'http://spot.arfon.org/instances/m1.small/us-east-1b',
	renderer: 'line',
	width: 580,
	height: 250,
	onData: function(data) {
	$.each(data, function(i, item){
	// Initialise key if not present
	if (!returnedData.hasOwnProperty(item.availability_zone)){
	returnedData[item.availability_zone] = [];
	}

	if(item.product_description == "Linux/UNIX"){
	$.each(item.pricing_history, function(date, price){
	returnedData[item.availability_zone].push({x: Date.parse(date), y: parseFloat(price)});
	});
	};
	});
	var returned = [{name: 'us-east-1b', data: returnedData['us-east-1b']}];
	console.log(returned);
	return returned;

	},
	onComplete: function(transport) {
	// do something
	}
	});
	</script>

	</body>
	</html>