jhaubrich · August 1, 2012 22:30
diff --git a/index.html b/index.html
 <html>
 <head>
        <title>line chart</title>

        <link href="nvd3/src/nv.d3.css" rel="stylesheet">
        <style>
        body {
            overflow-y:scroll;
        }

        text {
            font: 12px sans-serif;
        }

        svg {
            display: block;
        }

        #chart svg {
            height: 500px;
            min-width: 100px;
            min-height: 100px;
        /*
            margin: 50px;
            Minimum height and width is a good idea to prevent negative SVG dimensions...
            For example width should be =< margin.left + margin.right + 1,
            of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
        */
        }
        </style>
 </head>
 <body>

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

 <script src="nvd3/lib/d3.v2.min.js"></script>

 <script>

 var data =
 [
    {
        "values":[
            [
                "2012-07-11T00:00:00",
                0.0
            ],
            [
                "2012-07-11T23:59:59",
                0.0
            ],
            [
                "2012-07-05T06:31:47",
                0.0
            ],
            [
                "2012-07-05T23:59:59",
                0.0
            ]
        ],
        "key":"brw-a"
    },
    {
        "values":[
            [
                "2012-07-11T00:00:00",
                0.0
            ],
            [
                "2012-07-07T00:00:00",
                2.0
            ],         [
                "2012-07-05T23:59:59",
                4.0
            ]
        ],
        "key":"brw-c"
    }
 ]

 // var x = d3.time.scale()
 //     .range([0, width - margin.left - margin.right]);

 // var y = d3.scale.linear()
 //     .range([height - margin.top - margin.bottom, 0]);

 var tr = d3.select("body").selectAll("p")
        .data(data, function(d) { return d })
      .enter().append("p")
        .attr("id", function(d) { return d.key})
        .text(function(d,i) {return d.values[i][0]})



 // var margin = {top: 40, right: 40, bottom: 40, left: 40},
 // width = 960,
 // height = 500;

 // var x = d3.scale.linear().range([0, width]),
 //     y = d3.scale.linear().range([height, 0]);

 // var svg = d3.select("body").append("svg")
 //     .datum(data)
 //     .attr("width", width)
 //     .attr("height", height)
 //     .attr("class", "time chart")
 //   .append("g")
 //     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 //   site = d.key
 //   x = d.values[0]
 //   y = d.values[1]

 // d3.json('last_seven_days_of_agc.json', function(data) {

 //     // create the chart here with
 //     // the returned data

 //     line.x = data[1].values[1][0]

 //     console.log(data[1].values[1][0]);

 //     var data = data.map(function(d) { return d.Value; });
 //     console.log(data);

 // });


 </script>

 </body>
 </html>
	<html>
	<head>
	<title>line chart</title>

	<link href="nvd3/src/nv.d3.css" rel="stylesheet">
	<style>
	body {
	overflow-y:scroll;
	}

	text {
	font: 12px sans-serif;
	}

	svg {
	display: block;
	}

	#chart svg {
	height: 500px;
	min-width: 100px;
	min-height: 100px;
	/*
	margin: 50px;
	Minimum height and width is a good idea to prevent negative SVG dimensions...
	For example width should be =< margin.left + margin.right + 1,
	of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
	*/
	}
	</style>
	</head>
	<body>

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

	<script src="nvd3/lib/d3.v2.min.js"></script>

	<script>

	var data =
	[
	{
	"values":[
	[
	"2012-07-11T00:00:00",
	0.0
	],
	[
	"2012-07-11T23:59:59",
	0.0
	],
	[
	"2012-07-05T06:31:47",
	0.0
	],
	[
	"2012-07-05T23:59:59",
	0.0
	]
	],
	"key":"brw-a"
	},
	{
	"values":[
	[
	"2012-07-11T00:00:00",
	0.0
	],
	[
	"2012-07-07T00:00:00",
	2.0
	], [
	"2012-07-05T23:59:59",
	4.0
	]
	],
	"key":"brw-c"
	}
	]

	// var x = d3.time.scale()
	// .range([0, width - margin.left - margin.right]);

	// var y = d3.scale.linear()
	// .range([height - margin.top - margin.bottom, 0]);

	var tr = d3.select("body").selectAll("p")
	.data(data, function(d) { return d })
	.enter().append("p")
	.attr("id", function(d) { return d.key})
	.text(function(d,i) {return d.values[i][0]})



	// var margin = {top: 40, right: 40, bottom: 40, left: 40},
	// width = 960,
	// height = 500;

	// var x = d3.scale.linear().range([0, width]),
	// y = d3.scale.linear().range([height, 0]);

	// var svg = d3.select("body").append("svg")
	// .datum(data)
	// .attr("width", width)
	// .attr("height", height)
	// .attr("class", "time chart")
	// .append("g")
	// .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// site = d.key
	// x = d.values[0]
	// y = d.values[1]

	// d3.json('last_seven_days_of_agc.json', function(data) {

	// // create the chart here with
	// // the returned data

	// line.x = data[1].values[1][0]

	// console.log(data[1].values[1][0]);

	// var data = data.map(function(d) { return d.Value; });
	// console.log(data);

	// });


	</script>

	</body>
	</html>