CODEWITHSUNDEEP
d3.jsbar-chart
Kalpana Gupta
Kalpana Gupta

Reputation: 41

X axis not displaying on bar chart using d3.js

I have implemented dynamic Grouped bar chart using d3.js. Its working fine.According to my data,Y axis is displaying TotalOrders. I want to display Months on x axis.But its not getting display.Here is my code:

    function Groupchart() {
    debugger;
    var w = 500;
    var h = 600;
    var MARGINS = { top: 1, right: 20, bottom: 2, left: 50 }
    var colors = [["TotalTicket", "#377EB8"],
                  ["TotalOrders", "#4DAF4A"]];
    var dataset = [{ "Month": "Jan", "TotalOrders": 7324, "TotalTicket": 23954, "Year": "2013", "Avg": "10%" },
                   { "Month": "Feb", "TotalOrders": 3738, "TotalTicket": 12319, "Year": "2013", "Avg": "12%" },
                   { "Month": "March", "TotalOrders": 4466, "TotalTicket": 15524, "Year": "2013", "Avg": "14%" },
                   { "Month": "May", "TotalOrders": 100, "TotalTicket": 200, "Year": "2013", "Avg": "50%" },
                   { "Month": "Oct", "TotalOrders": 109, "TotalTicket": 2000, "Year": "2013", "Avg": "9%" }]

    var x0Scale = d3.scale.ordinal()
                       .domain(d3.range(dataset.length))
                       .rangeRoundBands([MARGINS.left, w - MARGINS.right], 0.1);
    var x1Scale = d3.scale.ordinal()
                    .domain([0, d3.max(dataset, function (d) { return d.TotalOrders; })])
                    .rangeRoundBands([MARGINS.left, w - MARGINS.right], 0.1);

    var yScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function (d) { return (d.TotalTicket + 10000); })])
                    .range([h - MARGINS.top, MARGINS.bottom]);
    xAxis = d3.svg.axis().scale(x0Scale).tickSize(5).tickSubdivide(true).orient("bottom");
    yAxis = d3.svg.axis().scale(yScale).tickSize(5).orient("left").tickSubdivide(true);

    var TotalOrders = function (d) {
        return d.TotalOrders;
    };

    var TotalTicket = function (d) {
        return d.TotalTicket;
    };
    var Month = function (d) {
        return d.Month;
    };

    var Average = function (d) {
        return d.Avg;
    };

    var commaFormat = d3.format(',');

    //SVG element
    var svg = d3.select("#searchVolume")
                .append("svg")
                .attr("width", w)
                .attr("height", h)
                .attr("margin", MARGINS);


    /*Draw X Axis values*/
    svg.append('svg:g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0,' + (h - MARGINS.bottom) + ')')
      .call(xAxis);

    /*Draw Y Axis values*/
    svg.append('svg:g')
      .attr('class', 'y axis')
      .attr('transform', 'translate(' + (MARGINS.left) + ',0)')
      .call(yAxis);

    // Graph Bars
    var sets = svg.selectAll(".set")
        .data(dataset)
        .enter().append("g")
        .attr("class", "set")
        .attr("transform", function (d, i) {
            return "translate(" + x0Scale(i) + ",0)"
        })

        .on("mouseover", function (d, i) {
            //Get this bar's x/y values, then augment for the tooltip
            var xPosition = parseFloat(x0Scale(i) + x0Scale.rangeBand() / 6);
            var yPosition = 0;
            //Update Tooltip Position & value
            d3.select("#tooltip")
                .style("left", xPosition + "px")
                .style("top", yPosition + "px")
                .select("#cpcVal")
                .text(d.Month);
            d3.select("#tooltip").classed("hidden", false);
        })
        .on("mouseout", function () {
            //Remove the tooltip
            d3.select("#tooltip").classed("hidden", true);
        });

    sets.append("rect")
        .attr("class", "TotalTicket")
        .attr("width", x0Scale.rangeBand() / 2)
        .attr("y", function (d) {
            return yScale(d.TotalTicket);
        })
        .attr("x", x0Scale.rangeBand() / 2)
        .attr("height", function (d) {
            return h - yScale(d.TotalTicket);
        })
        .attr("fill", colors[0][1])
        .transition()
        .delay(function (d, i) { return i * 300 })
        .duration(1000)

    sets.append("rect")
        .attr("class", "TotalOrders")
        .attr("width", x0Scale.rangeBand() / 2)
        .attr("y", function (d) {
            return yScale(d.TotalOrders);
        })
        .attr("height", function (d) {
            return h - yScale(d.TotalOrders);
        })
       .attr("fill", colors[1][1])


    var legend = svg.append("g")
     .attr("class", "legend")
     //.attr("x", w - 65)
     //.attr("y", 50)
     .attr("height", 100)
     .attr("width", 100)
     .attr('transform', 'translate(-20,50)');

    var legendRect = legend.selectAll('rect').data(colors);

    legendRect.enter()
        .append("rect")
        .attr("x", w - 65)
        .attr("width", 10)
        .attr("height", 10);

    legendRect
        .attr("y", function (d, i) {
            return i * 20;
        })
        .style("fill", function (d) {
            return d[1];
        });

    var legendText = legend.selectAll('text').data(colors);

    legendText.enter()
        .append("text")
        .attr("x", w - 52);

    legendText
        .attr("y", function (d, i) {
            return i * 20 + 9;
        })
        .text(function (d) {
            return d[0];
        });

    svg.selectAll("text")
       .data(dataset, Average)
       .enter()
       .append("text")
       .text(function (d) {
           return(d.Avg);
       })
       .attr("class", "bartext")
       .attr("text-anchor", "middle")
       .attr("x", function (d, i) {
       return x0Scale(i) + x0Scale.rangeBand() / 2;
       })
       .attr("y", function (d) {
           return  yScale(d.TotalTicket) - 10;
       })
      .attr("font-family", "sans-serif")
      .attr("font-size", "15px")
      .attr("fill", "black");
}

Can anybody please me what is the actual problem?

Upvotes: 3

Views: 7245

Answers (1)

saaj
saaj

Reputation: 25283

It's a margin issue. Your effective height is height - margin.top - margin.bottom. I've fixed the example accordingly (with readability improvement).

To use months in ordinal scale you must initialize the scale with, yeah, months. Then use the scale to map an ordinal value to a x-scale value, e.g. x0Scale(d.Month).

function createGroupchart() 
{
  var width  = 500;
  var height = 180;
  var margin = {
    'top'    : 5, 
    'right'  : 20, 
    'bottom' : 20, 
    'left'   : 50 
  };
  var colors = [
    ["TotalTicket", "#377EB8"],
    ["TotalOrders", "#4DAF4A"]
  ];
  var dataset = [
    {"Month": "Jan",   "TotalOrders": 7324, "TotalTicket": 23954, "Year": "2013", "Avg": "10%"},
    {"Month": "Feb",   "TotalOrders": 3738, "TotalTicket": 12319, "Year": "2013", "Avg": "12%"},
    {"Month": "March", "TotalOrders": 4466, "TotalTicket": 15524, "Year": "2013", "Avg": "14%"},
    {"Month": "May",   "TotalOrders": 100,  "TotalTicket": 200,   "Year": "2013", "Avg": "50%"},
    {"Month": "Oct",   "TotalOrders": 109,  "TotalTicket": 2000,  "Year": "2013", "Avg": "9%" }
  ];

  var x0Scale = d3.scale.ordinal()
    .domain(dataset.map(function(d)
    {
      return d.Month;
    }))
    .rangeRoundBands([margin.left, width - margin.right], 0.1);

  var x1Scale = d3.scale.ordinal()
    .domain([0, d3.max(dataset, function(d) 
    { 
      return d.TotalOrders; 
    })])
    .rangeRoundBands([margin.left, width - margin.right], 0.1);

  var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) 
    { 
      return (d.TotalTicket + 10000); 
    })])
    .range([height - margin.top - margin.bottom, 0]);

  var xAxis = d3.svg.axis()
    .scale(x0Scale)
    .tickSize(5)
    .tickSubdivide(true)
    .orient("bottom");

  var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(5)
    .orient("left")
    .tickSubdivide(true);

  var commaFormat = d3.format(',');


  // SVG element
  var svg = d3.select("#chart")
    .append("svg")
    .attr("width",  width)
    .attr("height", height)
    .attr("margin", margin);

  // Draw X Axis values
  svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + (height - margin.bottom - margin.top) + ')')
    .call(xAxis);

  // Draw Y Axis values
  svg.append('g')
    .attr('class', 'y axis')
    .attr('transform', 'translate(' + margin.left + ',0)')
    .call(yAxis);

  // Graph Bars
  var sets = svg.selectAll(".set")
    .data(dataset)
    .enter().append("g")
    .attr("class", "set")
    .attr("transform", function(d) 
    {
      return "translate(" + x0Scale(d.Month) + ",0)"
    });

  sets.append("rect")
    .attr("class", "TotalTicket")
    .attr("width", x0Scale.rangeBand() / 2)
    .attr("y", function(d) 
    {
      return yScale(d.TotalTicket);
    })
    .attr("x", x0Scale.rangeBand() / 2)
    .attr("height", function(d) 
    {
      return height - margin.top - margin.bottom - yScale(d.TotalTicket);
    })
    .attr("fill", colors[0][1]);

  sets.append("rect")
    .attr("class", "TotalOrders")
    .attr("width", x0Scale.rangeBand() / 2)
    .attr("y", function(d) 
    {
      return yScale(d.TotalOrders);
    })
    .attr("height", function(d) 
    {
      return height - margin.top - margin.bottom - yScale(d.TotalOrders);
    })
    .attr("fill", colors[1][1])


  var legend = svg.append("g")
    .attr("class", "legend")
    .attr("height", 100)
    .attr("width", 100)
    .attr('transform', 'translate(-30,20)');

  var legendRect = legend.selectAll('rect').data(colors);

  legendRect.enter()
    .append("rect")
    .attr("x", width - 65)
    .attr("width", 10)
    .attr("height", 10);

  legendRect
    .attr("y", function(d, i) 
    {
      return i * 20;
    })
    .style("fill", function(d) 
    {
      return d[1];
    });

  var legendText = legend.selectAll('text').data(colors);

  legendText.enter()
    .append("text")
    .attr("x", width - 52);

  legendText
    .attr("y", function(d, i) 
    {
      return i * 20 + 9;
    })
    .text(function(d) 
    {
      return d[0];
    });

  svg.selectAll("text")
    .data(dataset, function(d)
    {
      return d.Avg;
    })
    .enter()
    .append("text")
    .text(function(d) 
    {
      return d.Avg;
    })
    .attr("class", "bartext")
    .attr("text-anchor", "middle")
    .attr("x", function(d) 
    {
      return x0Scale(d.Month) + x0Scale.rangeBand() / 2;
    })
    .attr("y", function(d) 
    {
      return  yScale(d.TotalTicket) - 10;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "15px")
    .attr("fill", "black");
}
createGroupchart()
svg .axis path, .axis line {
  fill            : none;
  stroke          : #000;
  shape-rendering : crispEdges;
}

svg .x.axis path {
  display : none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart'></div>

Upvotes: 5

Related Questions