javascript - D3 bar chart with variable width and variable length data up to 1000 data points -


i having lot of trouble d3 bar chart length of data search variable. used d3 bar chart example , built this. data length goes up, graph gets less , less legible. problem seems range gets confused when beyond 100 points or so.

code below:

function makegraph(data,ctype) { //var data=xdata.splice(-900) var gwidth=data.length*2; if(gwidth < 800) gwidth=800; //gwidth=800 var margin = {top: 9, right: 20, bottom: 30, left: 90},     width = gwidth - margin.left - margin.right,     height = 300 - margin.top - margin.bottom;   x = d3.scale.ordinal()     .rangeroundbands([0, width], .1); //x=d3.scale.linear().domain([0,1]).range(0,width)  var y = d3.scale.linear()     .range([height, 0]);  var xaxis = d3.svg.axis()     .scale(x)     .orient("bottom")     .tickformat(function(d) { if (d % 10) return ""; else return d;})  var yaxis = d3.svg.axis()     .scale(y)     .orient("left"); //    .ticks(10, "%");  d3.select("svg").remove() var svg = d3.select("#graphchart").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 line = d3.svg.line()     .x(function(d) { return x(d.rowid); })     .y(function(d) { return y(d[ctype]); });    x.domain(data.map(function(d) { return d.rowid; }));   var ymax=d3.max(data, function(d) { return d[ctype]; });   var ymin=d3.min(data, function(d) { return d[ctype]; });   y.domain([ymin, ymax]);    svg.append("g")       .attr("class", "x axis")       .attr("transform", "translate(0," + height + ")")       .call(xaxis);   svg.append("g")       .attr("class", "y axis")       .call(yaxis)     .append("text")       .attr("transform", "rotate(-90)")       .attr("y", math.log10(ymax))       .attr("dy", ".71em")       .style("text-anchor", "end")       .text("bytes"); // console.log(x.rangeband())    var bar = svg.selectall(".bar")       .data(data);     bar.enter().append("rect")       .attr("class", "bar")       .attr("x", function(d) { return x(d.rowid); })       .attr("width", x.rangeband())       .attr("y", function(d) { return y(d[ctype]); })       .attr("height", function(d) { var xya= height - y(d[ctype]); /* console.log(xya+":"+d[ctype]); */ return height - y(d[ctype]); })       /* .attr("title", function(d) { return d['bytes']+" bytes @ "+d.stime; }) */       .on("mouseover", function(d) { $("#graphinfo").html(d3.format('0,000')(d['bytes'])+" bytes @ "+d.stime) })       .on("mouseout",function(d) { $("#graphinfo").html('&nbsp;')})       .on("click",function(d) { tablegraph(d)}); $('.bar').tooltip()  } 

do have suggestions how can make graph bar chart grow horizontally larger data sets? , suggestions!

vijay


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -