pkpp1233 · December 4, 2014 11:29
diff --git a/index.html b/index.html
 <html>
 <head>
  <style> /* set the CSS */

    #forecastExampleContainer {
      font: 12px Arial;
    }

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

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

    #forecastExampleContainer .legend {
        font-size: 16px;
        font-weight: bold;
        text-anchor: middle;
    }
  </style>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    // Get the data
    var ticker = "TSLA";
    
    drawLine(ticker, 3);
    
    function drawLine(ticker) {
      $("#chart").empty();
      // Set the dimensions of the canvas / graph
      var margin = {top: 20, right: 30, bottom: 60, left: 60},
          width = $('#forecastExampleContainer').width() - margin.left - margin.right,
          height = 300 - 100 - margin.top - margin.bottom;
    
      // Set the ranges
      var x = d3.scale.linear().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 priceline = d3.svg.line()
          .x(function(d) { return x(d.date); })
          .y(function(d) { return y(d.price); });
    
      // Adds the svg canvas
      var svg = d3.select("#chart")
          .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 + ")");
    
      var payload = JSON.stringify({ ticker: ticker });
    
      $.ajax({
        url: "https://sender.blockspring.com/api_v2/blocks/9478431ce693f59706ad0f941fa04498",
        type: "POST",
        contentType: "application/json",
        data: payload,
        crossDomain: true
      }).done(function(response){
        var forecasted_values = [response.results];
        var observed_values = response.observed_values;
        var data = [];
    
        observed_values.forEach(function(d, i) {
          data.push({
            date: i,
            price: +d,
            symbol: "observed"
          });
        });
    
        var observed_length = data.length;
        forecasted_values.forEach(function(d,i){
          data.push({
            date: i + observed_length,
            price: +d,
            symbol: "forecasted"
          })
        });
        // Scale the range of the data
        var x_domain = d3.extent(data, function(d) { return d.date; });
        x_domain[1] = x_domain[1] * 1.1
        x.domain(x_domain);
        y.domain([0, d3.max(data, function(d) { return d.price; })]);
    
        // Nest the entries by symbol
        var dataNest = d3.nest()
            .key(function(d) {return d.symbol;})
            .entries(data);
    
        var color = d3.scale.category10();   // set the colour scale
    
        legendSpace = width / dataNest.length; // spacing for the legend
    
        // Loop through each symbol / key
        dataNest.forEach(function(d,i) {
    
          var path = svg.append("path")
              .attr("class", "line")
              .style("stroke", function() { // Add the colours dynamically
                  return d.color = color(d.key); })
              .attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID
              .attr("d", priceline(d.values));
    
          // Add the Legend
          svg.append("text")
              .attr("x", (legendSpace/2)+i*legendSpace)  // space legend
              .attr("y", height + (margin.bottom / 2) + 5)
              .attr("class", "legend")    // style the legend
              .style("fill", function() { // Add the colours dynamically
                if (i==0){
                  return d.color = color(d.key);
                } else {
                  if (d.values[0].price < observed_values.slice(-1)[0]){
                    return d.color = "red";
                  } else {
                    return d.color = "green";
                  }
                }
              }).on("click", function(){
                  // Determine if current line is visible
                  var active   = d.active ? false : true,
                  newOpacity = active ? 0 : 1;
                  // Hide or show the elements based on the ID
                  d3.select("#tag"+d.key.replace(/\s+/g, ''))
                      .transition().duration(100)
                      .style("opacity", newOpacity);
                  // Update whether or not the elements are active
                  d.active = active;
                  })
              .text(function(){
                if (i == 0){
                  return d.key;
                } else {
                  var delta = (d.values[0].price - observed_values.slice(-1)[0]);
                  if (delta > 0 ){
                    return d.key +" $" + delta.toFixed(2).toString() + " increase tomorrow"
                  } else {
                    return d.key +" $" + (delta*-1).toFixed(2).toString() + " decrease tomorrow"
                  }
                }
              });
    
          if (i==1){
            svg.append("circle")
              .data(data)
              .attr("class", "line")
              .style("fill", function(){
                console.log(d.values[0].price, observed_values.slice(-1)[0], observed_values)
                if (d.values[0].price < observed_values.slice(-1)[0]){
                  return d.color = "red";
                } else {
                  return d.color = "green";
                }
              })
              .attr("cx", function(){
                return x(d.values[0].date);
              })
              .attr("cy", function(){
                return y(d.values[0].price);
              })
              .attr("r", 4.5);
          }
    
        });
    
        // 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);
      });
    }
    
    $("#data").on("change", function(){
      var ticker = $("#data").val();
      drawLine(ticker);
    });
  </script>
 </head>
 <body>
  <div id="forecastExampleContainer" class="well">
    <div class="form-group">
      <label name="data">Ticker</label>
      <input id="data" class="form-control" value="TSLA"></input>
    </div>
    <div id="chart"></div>
  </div>
 </body>
 </html>
	<html>
	<head>
	<style> /* set the CSS */

	#forecastExampleContainer {
	font: 12px Arial;
	}

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

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

	#forecastExampleContainer .legend {
	font-size: 16px;
	font-weight: bold;
	text-anchor: middle;
	}
	</style>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
	// Get the data
	var ticker = "TSLA";

	drawLine(ticker, 3);

	function drawLine(ticker) {
	$("#chart").empty();
	// Set the dimensions of the canvas / graph
	var margin = {top: 20, right: 30, bottom: 60, left: 60},
	width = $('#forecastExampleContainer').width() - margin.left - margin.right,
	height = 300 - 100 - margin.top - margin.bottom;

	// Set the ranges
	var x = d3.scale.linear().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 priceline = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.price); });

	// Adds the svg canvas
	var svg = d3.select("#chart")
	.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 + ")");

	var payload = JSON.stringify({ ticker: ticker });

	$.ajax({
	url: "https://sender.blockspring.com/api_v2/blocks/9478431ce693f59706ad0f941fa04498",
	type: "POST",
	contentType: "application/json",
	data: payload,
	crossDomain: true
	}).done(function(response){
	var forecasted_values = [response.results];
	var observed_values = response.observed_values;
	var data = [];

	observed_values.forEach(function(d, i) {
	data.push({
	date: i,
	price: +d,
	symbol: "observed"
	});
	});

	var observed_length = data.length;
	forecasted_values.forEach(function(d,i){
	data.push({
	date: i + observed_length,
	price: +d,
	symbol: "forecasted"
	})
	});
	// Scale the range of the data
	var x_domain = d3.extent(data, function(d) { return d.date; });
	x_domain[1] = x_domain[1] * 1.1
	x.domain(x_domain);
	y.domain([0, d3.max(data, function(d) { return d.price; })]);

	// Nest the entries by symbol
	var dataNest = d3.nest()
	.key(function(d) {return d.symbol;})
	.entries(data);

	var color = d3.scale.category10(); // set the colour scale

	legendSpace = width / dataNest.length; // spacing for the legend

	// Loop through each symbol / key
	dataNest.forEach(function(d,i) {

	var path = svg.append("path")
	.attr("class", "line")
	.style("stroke", function() { // Add the colours dynamically
	return d.color = color(d.key); })
	.attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID
	.attr("d", priceline(d.values));

	// Add the Legend
	svg.append("text")
	.attr("x", (legendSpace/2)+i*legendSpace) // space legend
	.attr("y", height + (margin.bottom / 2) + 5)
	.attr("class", "legend") // style the legend
	.style("fill", function() { // Add the colours dynamically
	if (i==0){
	return d.color = color(d.key);
	} else {
	if (d.values[0].price < observed_values.slice(-1)[0]){
	return d.color = "red";
	} else {
	return d.color = "green";
	}
	}
	}).on("click", function(){
	// Determine if current line is visible
	var active = d.active ? false : true,
	newOpacity = active ? 0 : 1;
	// Hide or show the elements based on the ID
	d3.select("#tag"+d.key.replace(/\s+/g, ''))
	.transition().duration(100)
	.style("opacity", newOpacity);
	// Update whether or not the elements are active
	d.active = active;
	})
	.text(function(){
	if (i == 0){
	return d.key;
	} else {
	var delta = (d.values[0].price - observed_values.slice(-1)[0]);
	if (delta > 0 ){
	return d.key +" $" + delta.toFixed(2).toString() + " increase tomorrow"
	} else {
	return d.key +" $" + (delta*-1).toFixed(2).toString() + " decrease tomorrow"
	}
	}
	});

	if (i==1){
	svg.append("circle")
	.data(data)
	.attr("class", "line")
	.style("fill", function(){
	console.log(d.values[0].price, observed_values.slice(-1)[0], observed_values)
	if (d.values[0].price < observed_values.slice(-1)[0]){
	return d.color = "red";
	} else {
	return d.color = "green";
	}
	})
	.attr("cx", function(){
	return x(d.values[0].date);
	})
	.attr("cy", function(){
	return y(d.values[0].price);
	})
	.attr("r", 4.5);
	}

	});

	// 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);
	});
	}

	$("#data").on("change", function(){
	var ticker = $("#data").val();
	drawLine(ticker);
	});
	</script>
	</head>
	<body>
	<div id="forecastExampleContainer" class="well">
	<div class="form-group">
	<label name="data">Ticker</label>
	<input id="data" class="form-control" value="TSLA"></input>
	</div>
	<div id="chart"></div>
	</div>
	</body>
	</html>
No results found