yosiat · April 19, 2015 17:38
diff --git a/line.html b/line.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
    <script src="../build/nv.d3.js"></script>

    <style>
        text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
        }
        html, body, svg {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
    </style>
 </head>
 <body>

 <svg id="test1"></svg>

 <script>

    nv.addGraph({
        generate: function() {
            var width = nv.utils.windowSize().width - 40,
                height = nv.utils.windowSize().height - 40;

            var chart = nv.models.line()
                .width(width)
                .height(height)
                .margin({top: 20, right: 20, bottom: 20, left: 20});




            chart.dispatch.on('renderEnd', function(){
                console.log('render complete');
            });

            d3.select('#test1')
                .attr('width', width)
                .attr('height', height)
                .datum(sinAndCos())
                .call(chart);

            return chart;
        },
        callback: function(graph) {
            window.onresize = function() {
                var width = nv.utils.windowSize().width - 40,
                    height = nv.utils.windowSize().height - 40,
                    margin = graph.margin();

                if (width < margin.left + margin.right + 20)
                    width = margin.left + margin.right + 20;

                if (height < margin.top + margin.bottom + 20)
                    height = margin.top + margin.bottom + 20;

                graph.width(width).height(height);

                d3.select('#test1')
                    .attr('width', width)
                    .attr('height', height)
                    .call(graph);
            };
        }
    });

    function sinAndCos() {
        var sin = [],
            cos = [];

        for (var i = 0; i < 100; i++) {
            var y = Math.sin(i/10);
            var color = y < 0 ? "red" : "black";
            sin.push({x: i, y: y, color: color});
        }

        return [
            {
                values: sin,
                key: "Sine Wave"
            }
        ];
    }

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
	<script src="../build/nv.d3.js"></script>

	<style>
	text {
	font: 12px sans-serif;
	}
	svg {
	display: block;
	}
	html, body, svg {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	}
	</style>
	</head>
	<body>

	<svg id="test1"></svg>

	<script>

	nv.addGraph({
	generate: function() {
	var width = nv.utils.windowSize().width - 40,
	height = nv.utils.windowSize().height - 40;

	var chart = nv.models.line()
	.width(width)
	.height(height)
	.margin({top: 20, right: 20, bottom: 20, left: 20});




	chart.dispatch.on('renderEnd', function(){
	console.log('render complete');
	});

	d3.select('#test1')
	.attr('width', width)
	.attr('height', height)
	.datum(sinAndCos())
	.call(chart);

	return chart;
	},
	callback: function(graph) {
	window.onresize = function() {
	var width = nv.utils.windowSize().width - 40,
	height = nv.utils.windowSize().height - 40,
	margin = graph.margin();

	if (width < margin.left + margin.right + 20)
	width = margin.left + margin.right + 20;

	if (height < margin.top + margin.bottom + 20)
	height = margin.top + margin.bottom + 20;

	graph.width(width).height(height);

	d3.select('#test1')
	.attr('width', width)
	.attr('height', height)
	.call(graph);
	};
	}
	});

	function sinAndCos() {
	var sin = [],
	cos = [];

	for (var i = 0; i < 100; i++) {
	var y = Math.sin(i/10);
	var color = y < 0 ? "red" : "black";
	sin.push({x: i, y: y, color: color});
	}

	return [
	{
	values: sin,
	key: "Sine Wave"
	}
	];
	}

	</script>
	</body>
	</html>