Attempt to rotate bar graph failed

I'm trying to rotate my bar graph, which can be seen here: http://jsfiddle.net/jq9qftLL/

Here's what I have so far:

        var canvas = d3.select("#canvas");
canvas.width = 500;
canvas.height = 500;

//rectangle values
var values = [{
    cValue: Math.abs(xthree),
    color: '#A0F'
}, {
    cValue: Math.abs(xtwo),
    color: '#FA0'
}, {
    cValue: Math.abs(xone),
    color: '#0AF'
}, {
    cValue: Math.abs(xzero),
    color: '#AF0'
}];

//var colours = ['#A0F', '#FA0', '#0AF', '#AF0'];

var yOffset = 0;

//create scale
//yRange2 = d3.scale.linear().range([canvas.height - MARGINS.top,
//MARGINS.bottom]).domain([0, 10]);

//yrange2- imp-Set domain to be set to biggest number
yRange2 = d3.scale.linear()
    .domain([0, 10])
    .range([MARGINS.bottom, canvas.height - MARGINS.top]);

//Process the data

for (var i = 0; i < values.length; i++) {

    var datum = {

        value: yRange2(values[i].cValue),
        colour: values[i].color,
        y: 0,
        x: yOffset

    }

    yOffset += (canvas.height - MARGINS.top - datum.value);

    data.push(datum)
}

//setup y
yAxis2 = d3.svg.axis()
    .scale(yRange2)
    .tickSize(5)
    .orient("bottom")
    .tickSubdivide(true);

canvas.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (MARGINS.bottom) + ")")
    .call(yAxis2);

var bars = canvas.selectAll('rect').data(data)

var cumValues = 0;
bars
    .enter()
    .append('rect')
    .attr("class", "myBars" + function (d) {
        return d.colour;
    })
    .attr({
        height: 30,
        y: 60,
        x: function (d) {
            return d.value - d.y;
        },
        width: function (d) {
            console.log(canvas.width, MARGINS.left, d.value);
            return canvas.height - MARGINS.top - d.value;
        }
    })
    .style({
        fill: function (d) {
            return d.colour
        }
    });

But it doesn't seem to be displaying right, as can be seen here: http://jsfiddle.net/ehv6fb1L/

I know that the graphing system works differently than standard graphs, so I was wondering if I could get some help on what I was doing wrong, please

Answers


like this? fiddle all you needed to do was to invert height& width, x & y… now you have to just fix the axis!

bars
    .enter()
    .append('rect')
    .attr({
        height: 30,
        y: 60,
        x: function (d) {
            console.log(d);
            return d.value - d.y;
        },
        width: function (d) {
            return canvas.height - MARGINS.top - d.value;
        }
    })

Need Your Help

What browsers support the window.postMessage call now?

javascript cross-browser

What are all the browsers that support the window.postMessage call now? I am looking for browsers that support it natively, not through an iFrame hack.

How can I construct a 4-ary symmetric communication channel in Matlab?

matlab communication probability telecommunication

I need to construct a symmetric channel over the alphabet {0,1,2,3} similar to Matlab's Binary Symmetric Channel. I need the probability of transmission error to be p/3 and the probability of succe...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.