jbants/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>D3 Demo</title>
</head>
<style>
body { font: 12px Arial;}

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>
<body>

<div id="option">
    <input name="updateButton"
           type="button"
           value="Update"
           onclick="updateData()" />
</div>
</style>
<body>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script>
    var dataFlag = 1
    var JSONData = [
                    { "id": 1, "date": "2011-07-14", "amount": 12000},
                    { "id": 2, "date": "2011-08-14", "amount": 2000},
                    { "id": 3, "date": "2012-09-14", "amount": 17000},
                    { "id": 4, "date": "2012-11-14", "amount": 15000},
                    { "id": 5, "date": "2013-02-14", "amount": 16000}
                  ]
    var JSONData2 = [
                     { "id": 1, "date": "2011-07-14", "amount": 2000},
                     { "id": 2, "date": "2011-08-14", "amount": 2300},
                     { "id": 3, "date": "2013-09-14", "amount": 1000},
                     { "id": 4, "date": "2014-11-14", "amount": 16000},
                     { "id": 5, "date": "2015-02-14", "amount": 100}
              ]

    // set up base when paae is loaded
    // Set the dimensions of the canvas / graph
    var margin = {top: 30, right: 20, bottom: 30, left: 50},
        width = 600 - margin.left - margin.right,
        height = 270 - margin.top - margin.bottom;

    // Parse the date / time
    var parseDate = d3.time.format("%Y-%m-%d").parse;

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

    // Define the axes
    var xAxis = d3.svg.axis().scale(x)
        .orient("bottom").ticks(5);

    var yAxis = d3.svg.axis().scale(y)
        .orient("left").ticks(5);

    // Define the line
    var valueline = d3.svg.line()
        .x(function(d) { return x(parseDate(d.date)); })
        .y(function(d) { return y(d.amount); });

    // Adds the svg canvas
    var svg = d3.select("body")
        .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
        .append("g")
            .attr("transform",
                  "translate(" + margin.left + "," + margin.top + ")");

    function init(){
    // Get the data
    	data = JSONData
        // Scale the range of the data
        x.domain(d3.extent(data, function(d) { return parseDate(d.date); }));
        y.domain([0, d3.max(data, function(d) { return d.amount; })]);

        // Add the valueline path.
        svg.append("path")
            .attr("class", "line")
            .attr("d", valueline(data));

        // Add the X Axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        // Add the Y Axis
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
    	console.log(data)
    }
    // ** Update data section (Called from the onclick)
    function updateData1() {
    	data = JSONData
        // Get the data again
        	// Scale the range of the data again
        	x.domain(d3.extent(data, function(d) { return parseDate(d.date); }));
    	    y.domain([0, d3.max(data, function(d) { return d.amount; })]);

        // Select the section we want to apply our changes to
        var svg = d3.select("body").transition();

        // Make the changes
            svg.select(".line")   // change the line
                .duration(750)
                .attr("d", valueline(data));
            svg.select(".x.axis") // change the x axis
                .duration(750)
                .call(xAxis);
            svg.select(".y.axis") // change the y axis
                .duration(750)
                .call(yAxis);
    }

    function updateData2() {
    	data = JSONData2
        // Get the data again

        	// Scale the range of the data again
        	x.domain(d3.extent(data, function(d) { return parseDate(d.date); }));
    	    y.domain([0, d3.max(data, function(d) { return d.amount; })]);

        // Select the section we want to apply our changes to
        var svg = d3.select("body").transition();

        // Make the changes
            svg.select(".line")   // change the line
                .duration(750)
                .attr("d", valueline(data));
            svg.select(".x.axis") // change the x axis
                .duration(750)
                .call(xAxis);
            svg.select(".y.axis") // change the y axis
                .duration(750)
                .call(yAxis);
    }

    function updateData(){
    	if (dataFlag == 1){
    		updateData2()
    		dataFlag = 2
    	}
    	else {
    		updateData1()
    		dataFlag = 1
    	}
    }

    init()
</script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>D3 Demo</title>
	</head>
	<style>
	body { font: 12px Arial;}

	path {
	stroke: steelblue;
	stroke-width: 2;
	fill: none;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: grey;
	stroke-width: 1;
	shape-rendering: crispEdges;
	}

	</style>
	<body>

	<div id="option">
	<input name="updateButton"
	type="button"
	value="Update"
	onclick="updateData()" />
	</div>
	</style>
	<body>
	</body>
	</html>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>
	var dataFlag = 1
	var JSONData = [
	{ "id": 1, "date": "2011-07-14", "amount": 12000},
	{ "id": 2, "date": "2011-08-14", "amount": 2000},
	{ "id": 3, "date": "2012-09-14", "amount": 17000},
	{ "id": 4, "date": "2012-11-14", "amount": 15000},
	{ "id": 5, "date": "2013-02-14", "amount": 16000}
	]
	var JSONData2 = [
	{ "id": 1, "date": "2011-07-14", "amount": 2000},
	{ "id": 2, "date": "2011-08-14", "amount": 2300},
	{ "id": 3, "date": "2013-09-14", "amount": 1000},
	{ "id": 4, "date": "2014-11-14", "amount": 16000},
	{ "id": 5, "date": "2015-02-14", "amount": 100}
	]

	// set up base when paae is loaded
	// Set the dimensions of the canvas / graph
	var margin = {top: 30, right: 20, bottom: 30, left: 50},
	width = 600 - margin.left - margin.right,
	height = 270 - margin.top - margin.bottom;

	// Parse the date / time
	var parseDate = d3.time.format("%Y-%m-%d").parse;

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

	// Define the axes
	var xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5);

	var yAxis = d3.svg.axis().scale(y)
	.orient("left").ticks(5);

	// Define the line
	var valueline = d3.svg.line()
	.x(function(d) { return x(parseDate(d.date)); })
	.y(function(d) { return y(d.amount); });

	// Adds the svg canvas
	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");

	function init(){
	// Get the data
	data = JSONData
	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return parseDate(d.date); }));
	y.domain([0, d3.max(data, function(d) { return d.amount; })]);

	// Add the valueline path.
	svg.append("path")
	.attr("class", "line")
	.attr("d", valueline(data));

	// Add the X Axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	// Add the Y Axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);
	console.log(data)
	}
	// ** Update data section (Called from the onclick)
	function updateData1() {
	data = JSONData
	// Get the data again
	// Scale the range of the data again
	x.domain(d3.extent(data, function(d) { return parseDate(d.date); }));
	y.domain([0, d3.max(data, function(d) { return d.amount; })]);

	// Select the section we want to apply our changes to
	var svg = d3.select("body").transition();

	// Make the changes
	svg.select(".line") // change the line
	.duration(750)
	.attr("d", valueline(data));
	svg.select(".x.axis") // change the x axis
	.duration(750)
	.call(xAxis);
	svg.select(".y.axis") // change the y axis
	.duration(750)
	.call(yAxis);
	}

	function updateData2() {
	data = JSONData2
	// Get the data again

	// Scale the range of the data again
	x.domain(d3.extent(data, function(d) { return parseDate(d.date); }));
	y.domain([0, d3.max(data, function(d) { return d.amount; })]);

	// Select the section we want to apply our changes to
	var svg = d3.select("body").transition();

	// Make the changes
	svg.select(".line") // change the line
	.duration(750)
	.attr("d", valueline(data));
	svg.select(".x.axis") // change the x axis
	.duration(750)
	.call(xAxis);
	svg.select(".y.axis") // change the y axis
	.duration(750)
	.call(yAxis);
	}

	function updateData(){
	if (dataFlag == 1){
	updateData2()
	dataFlag = 2
	}
	else {
	updateData1()
	dataFlag = 1
	}
	}

	init()
	</script>