{"id":7542,"date":"2015-07-26T05:12:18","date_gmt":"2015-07-26T05:12:18","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/real-time-line-graph-with-nvd3-js-open-source-projects-novus-nvd3\/"},"modified":"2015-07-26T05:12:18","modified_gmt":"2015-07-26T05:12:18","slug":"real-time-line-graph-with-nvd3-js-open-source-projects-novus-nvd3","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/real-time-line-graph-with-nvd3-js-open-source-projects-novus-nvd3\/","title":{"rendered":"Real time line graph with nvd3.js-open source projects novus\/nvd3"},"content":{"rendered":"<p>I am trying to create a real time graph using nvd3.js which would be updated periodically and with the impression that the data is processed in real time.<\/p>\n<p>For now I have been able to create a function which would update the graph periodically but I cannot manage to have a smooth transition between &#8220;states&#8221; like the line doing a transition to the left.<\/p>\n<p>Here is what I did using nvd3.js , here the interesting code is:<\/p>\n<pre><code>d3.select('#chart svg')\n    .datum(data)\n    .transition().duration(duration)\n    .call(chart);\n<\/code><\/pre>\n<p>Now, I have been able to produce what I want using d3.js but I would prefer to be able to use all the tools provided by nvd3.js. Here is what I would like to produce using nvd3<\/p>\n<p>The interesting code for the transition using d3.js is:<\/p>\n<pre><code>function tick() {\n\n    \/\/ update the domains\n    now = new Date();\n    x.domain([now - (n - 2) * duration, now - duration]);\n    y.domain([0, d3.max(data)]);\n\n    \/\/ push the accumulated count onto the back, and reset the count\n    data.push(Math.random()*10);\n    count = 0;\n\n    \/\/ redraw the line\n    svg.select(\".line\")\n        .attr(\"d\", line)\n        .attr(\"transform\", null);\n\n    \/\/ slide the x-axis left\n    axis.transition()\n        .duration(duration)\n        .ease(\"linear\")\n        .call(x.axis);\n\n    \/\/ slide the line left\n    path.transition()\n        .duration(duration)\n        .ease(\"linear\")\n        .attr(\"transform\", \"translate(\" + x(now - (n - 1) * duration) + \")\")\n        .each(\"end\", tick);\n\n    \/\/ pop the old data point off the front\n    data.shift();\n\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I am trying to create a real time graph using nvd3.js which would be updated periodically and with the impression that the data is processed in real time. For now I have been able to create a function which would update the graph periodically but I cannot manage to have a smooth transition between &#8220;states&#8221; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7542","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7542"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7542\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}