How to make dynamic Bar Chart in d3js with angularjs

Question

I get the data as json and draw it but every time i draw chart it draws it over the old one how could i make it dynamically. so i can draw the chart without drawing it on the old one

this is the code :

var xScale = d3.scale.ordinal()
        .rangeRoundBands([0, width], .1);

    var yScale = d3.scale.linear()
        .range([barHeight, 0]);

    xScale.domain(data4.map(function(d) { return d.x; }));
    yScale.domain([0, d3.max(data4, function(d) { return d.y; })]);
    //x and y Axes
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");     
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");            
    //create svg container
    var svg = d3.select("#barchart")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", barHeight + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");        
    //create bars
    svg.selectAll(".bar")
        .data(data4)
        .enter()
        .append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return xScale(d.x); })
        .attr("width", xScale.rangeBand())
        .attr("y", function(d) { return yScale(d.y); })
        .attr("height", function(d) { return barHeight - yScale(d.y); });
    //drawing the x axis on svg
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + barHeight + ")")
        .call(xAxis);
    //drawing the y axis on svg
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Reviews Number");

please help!

what do you mean by "every time i draw chart it draws it over the old one" is the graoh coming one below another or something else? — Cyril Cherian
– Cyril Cherian, Commented Dec 27, 2015 at 3:54
Yeah, we need to know if you are trying to update the chart to show new data or draw a whole new chart in a different location on the page. If drawing a new chart then you either need to change your d3.select() to a new container div,svg, etc.. or have a iterator that changes the drawing position outside the bounds of the first chart. — Ian H
– Ian H, Commented Dec 27, 2015 at 12:54
its exactly what @Cyril said i have a textbox, depending on value that i sent the chart is drawn, so when i give the first value that draw a chart, and when i change the value it will draw another chart over the first one. — Ibrahim Samara
– Ibrahim Samara, Commented Dec 27, 2015 at 17:25

Cyril Cherian · Accepted Answer · 2015-12-28 00:00:56Z

1

One reason i can think is that in the update function you are doing

d3.select("#barchart")
        .append("svg")

This means every time the function is called it will append a new SVG to the barchart DOM.

So before you append the new svg remove the old one like this:

d3.select("#barchart").select("svg").remove();//remove old svg
//now append the new svg
d3.select("#barchart")
        .append("svg")

Hope this helps!

answered Dec 28, 2015 at 0:00

Cyril Cherian

32.4k7 gold badges48 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make dynamic Bar Chart in d3js with angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related