javascript - Real time charts with D3.js -

-

i totally new d3.js. trying create simple sparkline time on x axis , numbers upto 1000 on y axis. have web socket server pushes random numbers unto 1000 clients. plot graph these values on y axis , time (in 24 hrs format) on x axis. tried few things, none of them work properly. graph turns out vertical , displayed sometimes.

appreciate in getting working.

below have in code, tweaked version of example found online.

data[] populated web socket call.

var margin = {top: 20, right: 20, bottom: 20, left: 40},     width = 960 - margin.left - margin.right,     height = 500 - margin.top - margin.bottom;  var x = d3.scale.linear()     .domain([0, data[data.length -1]])     .range([0, width]);  var y = d3.scale.linear()     .domain([0, 100])     .range([height, 0]);  var line = d3.svg.line()     .x(function(d, i) {          var dt = new date();         var time = dt.gethours() + ":" + dt.getminutes() + ":" + dt.getseconds();         return dt.getseconds();         })     .y(function(d, i) { console.log("d " + d+ "y " + y(d));return y(d); });  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 + ")");  svg.append("defs").append("clippath")     .attr("id", "clip")   .append("rect")     .attr("width", width)     .attr("height", height);  svg.append("g")     .attr("class", "x axis")     .attr("transform", "translate(0," + y(0) + ")")     .call(d3.svg.axis().scale(x).orient("bottom"));  svg.append("g")     .attr("class", "y axis")     .attr("transform", "translate(0," + x(0)+")")     .call(d3.svg.axis().scale(y).orient("left"));  var path = svg.append("g")     .attr("clip-path", "url(#clip)")   .append("path")     .datum(data)     .attr("class", "line")     .attr("d", line);  redraw();  function redraw() {     path       .attr("d", line)       .attr("transform", null)     .transition()       .duration(500)       .ease("linear")       .attr("transform", "translate(" + x(-1) + ",0)")       .each("end", tick);    data.shift();  }

could point me beginner's tutorial d3 me started creating different types of graphs?

it may have structure of data using.

if want go angular+d3js there few libraries out ther job done quickly.

an simple library is: http://angularjs-nvd3-directives.github.io/angularjs-nvd3-directives/

another set of directives use d3.js http://krispo.github.io/angular-nvd3/#/ home page has lot of examples can check. although lacks of documentation, every example has plunker , can check how works.


Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co
Read more

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall
Read more

java - Cannot secure connection using TLS -

-
i'm trying establish secure socket connection between java client applet (built jdk 1.7.0_75-b13) , vc++ server application. as test vehicle, used vc++ client/server sample found in msdn forums, modified use schannel , able establish socket using cipher suite tls_rsa_with_aes_128_cbc_sha. works of tls 1.0/1.1/1.2. when try opening socket java applet same server application, connection rejected server reporting following: tls 1.0 acceptsecuritycontext failed: 0x80090327 tls 1.1 acceptsecuritycontext failed: 0x80090331 tls 1.2 acceptsecuritycontext failed: 0x80090331 this java code used create socket: debugprint("setting secure connection"); sslsocketfactory sslsocketfactory = (sslsocketfactory) sslsocketfactory.getdefault(); sslsocket sslsocket = (sslsocket) sslsocketfactory.createsocket("127.0.0.1", socketnumber); debugprint("starting handshake"); sslsocket.settcpnodelay(true); sslsocket.setsolinger(false, 0); sslsocket.s
Read more