bengolder · August 29, 2015 13:56
diff --git a/index.html b/index.html
 <html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF8">

 </head>
 <body>
  
    <script src="http://d3js.org/d3.v3.min.js"  charset="utf-8"></script>
    <script src="http://code.shutterstock.com/rickshaw/vendor/d3.layout.min.js"></script>
    <script src="http://code.shutterstock.com/rickshaw/rickshaw.min.js"></script>
  
    <script src="tosci_ben.js"  charset="utf-8"></script>
  
    <div id="chart"></div>

 <script>
 console.log("preparing to graph");

  var data = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 17 }, { x: 3, y: 42 } ];
  
 var graph = new Rickshaw.Graph( {
 	element: document.querySelector("#chart"),
 	width: 580,
 	height: 250,
 	series: [ {
 		color: 'steelblue',      
        data: preppedCoffeeData //<--- this doesn't work
        //data: data //<--- but this does. i don't get it!
 	} ]
 } );
 console.log("graphed!");
 graph.render();

 </script>
  
 </body>
 </html>
diff --git a/tosci_ben.js b/tosci_ben.js
 function parseRow(d) {
  var dateTimeJoiner = d3.time.format("%x %X"); // combines date and time into a Date object
  var dateTime = dateTimeJoiner.parse(d.Date + " " + d.Time) // grabs the date and time
  var gross_sales_conversion = +d["Gross Sales"].substr(1) //strips the $ sign
  var total_sales = gross_sales_conversion * 1.07 //add tax
  return { 
        date: dateTime,
        category: d.Category,
        item: d.Item,
        quantity: +d.Quantity,
        pricepoint: d["Price Point Name"],
        gross_sales: gross_sales_conversion,
        total_sale: +d3.format(".2f")(total_sales), // rounds to 2 decimal places
        device_name: d["Device Name"]
  };
 }
 
 function handleRows( error, rows ) {
  // this function is only called once all the rows are loaded
  // In this function you can now access the loaded and parsed rows
  rows.forEach( handleRow );
  //console.log("dataset after loading csv:", dataset)
  //console.log("coffeeData after full loading:", coffeeData);
  coffeeData.forEach(prepRowForRickshaw);
  //reverses the order of entries to increase since they're added to the array from close of the store to open (22 down to 8)
  preppedCoffeeData.reverse();
 }
 
 function handleRow( row, i, rows ) {
  //console.log("item #", i, row.date, "adding to dataset");
  var hour = d3.time.hour.floor(row.date);
    if (row.category == "Coffee") { // for all items that are coffee...
      //console.log("Adding", row.item, "to dataset");
      //console.log("This item was sold in the hour of", d3.time.hour.floor(row.date));
      // if the hour of sale of this item exists as a key in our sales dictionary 
      if (!(coffeeData.has(hour))) {
        //add the total_sale to that hour
        //coffeeData[hour] = row.total_sale; OLD IDEA AS PYTHON DICTIONARY
        coffeeData.set(hour, row.total_sale);
        //console.log("Adding", row.total_sale, "of", row.item, "to new hour:", d3.time.hour.floor(row.date))
      }
      //otherwise, add that hour to the dictionary and initialize it with this item's total_sale
      else { 
        //coffeeData[hour] += row.total_sale OLD IDEA AS PYTHON DICTIONARY
        //get current sales for this hour
        var currentSales = coffeeData.get(hour);
        //add this particular sale to the current hour
        coffeeData.set(hour, currentSales + row.total_sale);
        //console.log("Adding", row.total_sale, "of", row.item, "to existing hour", d3.time.hour.floor(row.date));
      }
      
  }
  //dataset.push(row);
 }


 // d3.csv( csv_file_path, parsing_function, callback_function)
 d3.csv("5feb2014.csv", parseRow, handleRows);
 
 //var dataset = [];
 var coffeeData = d3.map();
 //var coffeeMap = d3.map(coffeeData);
 //console.log("dataset before loading csv:", dataset)


 //make an array
 var preppedCoffeeData = [];

 //create an object for each key in the map with x and y properties
 function prepRowForRickshaw(key,value) { //function pushes sales data to preppedCoffeeData in the proper form for Rickshaw (x: time, y: total_sale)
  //Convert the d3.date into a js Date object and then get the hours as an integer
  var hourInteger = new Date(key).getHours();
  //create an object with the x and y values as the hour (int) and total sales amount, respectively
  //var xy = {x: 0, y: 1} <--- even this doesn't work...
  var xy = {x: hourInteger, y: value};
  //Push the object into our array to be graphed by rickshaw
  preppedCoffeeData.push (xy);
 }
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF8">

	</head>
	<body>

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://code.shutterstock.com/rickshaw/vendor/d3.layout.min.js"></script>
	<script src="http://code.shutterstock.com/rickshaw/rickshaw.min.js"></script>

	<script src="tosci_ben.js" charset="utf-8"></script>

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

	<script>
	console.log("preparing to graph");

	var data = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 17 }, { x: 3, y: 42 } ];

	var graph = new Rickshaw.Graph( {
	element: document.querySelector("#chart"),
	width: 580,
	height: 250,
	series: [ {
	color: 'steelblue',
	data: preppedCoffeeData //<--- this doesn't work
	//data: data //<--- but this does. i don't get it!
	} ]
	} );
	console.log("graphed!");
	graph.render();

	</script>

	</body>
	</html>
	function parseRow(d) {
	var dateTimeJoiner = d3.time.format("%x %X"); // combines date and time into a Date object
	var dateTime = dateTimeJoiner.parse(d.Date + " " + d.Time) // grabs the date and time
	var gross_sales_conversion = +d["Gross Sales"].substr(1) //strips the $ sign
	var total_sales = gross_sales_conversion * 1.07 //add tax
	return {
	date: dateTime,
	category: d.Category,
	item: d.Item,
	quantity: +d.Quantity,
	pricepoint: d["Price Point Name"],
	gross_sales: gross_sales_conversion,
	total_sale: +d3.format(".2f")(total_sales), // rounds to 2 decimal places
	device_name: d["Device Name"]
	};
	}

	function handleRows( error, rows ) {
	// this function is only called once all the rows are loaded
	// In this function you can now access the loaded and parsed rows
	rows.forEach( handleRow );
	//console.log("dataset after loading csv:", dataset)
	//console.log("coffeeData after full loading:", coffeeData);
	coffeeData.forEach(prepRowForRickshaw);
	//reverses the order of entries to increase since they're added to the array from close of the store to open (22 down to 8)
	preppedCoffeeData.reverse();
	}

	function handleRow( row, i, rows ) {
	//console.log("item #", i, row.date, "adding to dataset");
	var hour = d3.time.hour.floor(row.date);
	if (row.category == "Coffee") { // for all items that are coffee...
	//console.log("Adding", row.item, "to dataset");
	//console.log("This item was sold in the hour of", d3.time.hour.floor(row.date));
	// if the hour of sale of this item exists as a key in our sales dictionary
	if (!(coffeeData.has(hour))) {
	//add the total_sale to that hour
	//coffeeData[hour] = row.total_sale; OLD IDEA AS PYTHON DICTIONARY
	coffeeData.set(hour, row.total_sale);
	//console.log("Adding", row.total_sale, "of", row.item, "to new hour:", d3.time.hour.floor(row.date))
	}
	//otherwise, add that hour to the dictionary and initialize it with this item's total_sale
	else {
	//coffeeData[hour] += row.total_sale OLD IDEA AS PYTHON DICTIONARY
	//get current sales for this hour
	var currentSales = coffeeData.get(hour);
	//add this particular sale to the current hour
	coffeeData.set(hour, currentSales + row.total_sale);
	//console.log("Adding", row.total_sale, "of", row.item, "to existing hour", d3.time.hour.floor(row.date));
	}

	}
	//dataset.push(row);
	}


	// d3.csv( csv_file_path, parsing_function, callback_function)
	d3.csv("5feb2014.csv", parseRow, handleRows);

	//var dataset = [];
	var coffeeData = d3.map();
	//var coffeeMap = d3.map(coffeeData);
	//console.log("dataset before loading csv:", dataset)


	//make an array
	var preppedCoffeeData = [];

	//create an object for each key in the map with x and y properties
	function prepRowForRickshaw(key,value) { //function pushes sales data to preppedCoffeeData in the proper form for Rickshaw (x: time, y: total_sale)
	//Convert the d3.date into a js Date object and then get the hours as an integer
	var hourInteger = new Date(key).getHours();
	//create an object with the x and y values as the hour (int) and total sales amount, respectively
	//var xy = {x: 0, y: 1} <--- even this doesn't work...
	var xy = {x: hourInteger, y: value};
	//Push the object into our array to be graphed by rickshaw
	preppedCoffeeData.push (xy);
	}