javascript - How to create a dynamic bar chart in d3.js? -


here fiddle full app: http://jsfiddle.net/rg4eg/3/

enter image description here

here javascript:

var hu = (function() {      var data = [         {"time": "13:24:20", "level_1": "5553", "level_2": "4682", "level_3": "1005"},         {"time": "14:24:20", "level_1": "6553", "level_2": "5682", "level_3": "2005"},         {"time": "15:24:20", "level_1": "7553", "level_2": "6682", "level_3": "3005"},         {"time": "16:24:20", "level_1": "8553", "level_2": "7682", "level_3": "3131"},         {"time": "17:24:20", "level_1": "9953", "level_2": "5500", "level_3": "5005"},         {"time": "18:24:20", "level_1": "8565", "level_2": "7682", "level_3": "6005"},         {"time": "19:24:20", "level_1": "7753", "level_2": "4546", "level_3": "4405"}     ];      init = function() {          var margin = {                 top: 10,                  right: 10,                  bottom: 30,                  left: 50             },             width = 950 - margin.left - margin.right,             height = 500 - margin.top - margin.bottom;              var parsedate = d3.time.format("%h:%m:%s").parse;              var x = d3.time.scale()                 .domain(d3.extent(data, function(d) { return parsedate(d.time); }))                 .range([0, width]);              var y = d3.scale.linear()                 .domain([0, d3.max(data, function(d) { return d.level_1; })])                 .range([height, 0]);              var xaxis = d3.svg.axis()                 .scale(x)                 .orient("bottom")                 .tickformat(d3.time.format(("%h:%m:%s")));              var yaxis = d3.svg.axis()                 .scale(y)                 .orient("left");              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 + ")");              svg.append("g")                 .attr("class", "x axis")                 .attr("transform", "translate(0, " + height + ")")                 .call(xaxis);              svg.append("g")                 .attr("class", "y axis")                 .call(yaxis);              var bars = svg.selectall("rect")                 .data(data)                 .enter();             bars.append("rect")                 .attr("x", function(d) { return x(parsedate(d.time)); })                 .attr("y", function(d) { return y(d.level_1); })                 .attr("width", 15)                 .attr("height", function(d) { return height - y(d.level_1); })                 .style("fill", "steelblue");             bars.append("rect")                 .attr("x", function(d) { return x(parsedate(d.time)); })                 .attr("y", function(d) { return y(d.level_2); })                 .attr("width", 15)                 .attr("height", function(d) { return height - y(d.level_2); })                 .style("fill", "green");             bars.append("rect")                 .attr("x", function(d) { return x(parsedate(d.time)); })                 .attr("y", function(d) { return y(d.level_3); })                 .attr("width", 15)                 .attr("height", function(d) { return height - y(d.level_3); })                 .style("fill", "red");              };      return {         init: init     };  })();  hu.init();

as each second ticks, need column furthest left should add new data point pushing previous data points right.

i want make dynamic change data each second, such as:

  • each level_1 datapoint = current level_1 val + (random value between +7% , -7% of current level_1 val)
  • each level_2 random 10-30% off value
  • each level_3 random 10-30% off level_2 value

how accomplish that?

you can use setinterval(function, period) perform drawing of each level. can this:

drawlevel = function(level) {   var random;    svg.selectall("rect")     .data(data)     .transition()     .duration(1000)     .attr("y", function(d) {          var min = d.level[level] - (d.level[level-1] * 0.03);         var max = d.level[level] - (d.level[level-1] * 0.01);         random = math.floor(math.random() * (max - min + 1) + min);          return height - y(random) - .5;      })     .attr("height", function(d) {          return y(random);      }); }  drawlevel(1); var l = 2; setinterval(function() {   drawlevel(l);   l = l + 1; }, 1000);

here's example setinterval().

http://vida.io/documents/kz2rzrywzyvwtny2x


Comments

Post a Comment

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

i'm learning java , have question regarding reading file want read numbers file contains strings well. here example of file: 66.56 "3 java 3-43 5-42 2.1 1 and here coding: public class test { public static void main (string [] args){ if (0 < args.length) { file x = new file(args[0]); try{ scanner in = new scanner( new fileinputstream(x)); arraylist<double> test = new arraylist<>(); while(in.hasnext()){ if(in.hasnextdouble()){ double f=in.nextdouble(); test.add(f);} else {in.next();} } catch(ioexception e) { system.err.println("exception during reading: " + e); } } my problem add 66.56,2.1 , 1 doesn't add 3 after "3 or ignores 3-43 , 5-42 can tell me how skip strings , add doubles here? thanks all said 3 ie; "3, 3-43 , 4-42 strings either u read string , split , check number @ " , - or put in space between characters , integers. jvm after compilation tre...
Read more

rewrite - Trouble with Wordpress multiple custom querystrings -

i'm working on adding multiple querystring , doesn't seem work. i've found codes seems work others might i'm missing something. i want like: http://mydomain.com/board/?getyear=2013&getsometext2=sometext to http://mydomain.com/board/2013/sometext/ i added code below functions.php file. doesn't seem work should though. this works. echoing querystring gets both variable without problem. http://mydomain.com/board/2013/sometext/ but doesn't. tested querystring vis isset() seems nothing being set/get http://mydomain.com/board/2013/ function add_query_vars($vars) { $vars[] = "getyear"; $vars[] = "getsometext2"; return $vars; } add_filter('query_vars', 'add_query_vars'); function add_rewrite_rules($arules) { $anewrules = array('board/([^/]+)/([^/]+)/?$' => 'index.php?pagename=board&getyear=$matches[1]&getsometext2=$matches[2]'); $arules = $a...
Read more