Reputation: 415

d3 horizontal chart showing false data

I'm trying to use the horizontal bar chart of d3 but it keeps showing false data on my code.

//data
var data = [{ "id": 0, "event_description": "CARD READER ERROR", "event_count": 462 }, { "id": 0, "event_description": "NETWORK CONNECTION LOST", "event_count": 392 }, { "id": 0, "event_description": "CASH ACCEPT BIN FATAL", "event_count": 391 }, { "id": 0, "event_description": "CAM BEING SERVICE", "event_count": 378 }, { "id": 0, "event_description": "POSSIBLE TAMPERING", "event_count": 370 }, { "id": 0, "event_description": "BNA DEVICE ERROR", "event_count": 369 }, { "id": 0, "event_description": "POSSIBLE COMMUNICATION KEY ERROR ON CAM", "event_count": 366 }, { "id": 0, "event_description": "BLACKSCREEN", "event_count": 351 }, { "id": 0, "event_description": "CASH ACCEPT BIN ERROR", "event_count": 196 }, { "id": 0, "event_description": "CAM OUT OF SERVICE", "event_count": 194 }];

/* START OF LINE CHART */
$(document).ready(() => {

  // set the dimensions and margins of the graph
  var margin = { top: 20, right: 30, bottom: 40, left: 200 },
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

  // append the svg object to the body of the page
  var svg = d3.select("#barChart")
    .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 + ")");

  // Parse the Data

  // Add X axis
  var x = d3.scaleBand()
    .range([width,0])
    .domain(data.map((s) => s.event_count));


  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .attr("transform", "translate(-10,0)rotate(-45)")
    .style("text-anchor", "end");

  // Y axis
  var y = d3.scaleBand()
    .range([height, 0])
    .domain(data.map(function (d) { return d.event_description; }))
    .padding(.4);
    
  svg.append("g")
    .call(d3.axisLeft(y))

  //Bars
  svg.selectAll("myRect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", x(0))
    .attr("y", function (d) { return y(d.event_description); })
    .attr("width", function (d) { return x(d.event_count); })
    .attr("height", y.bandwidth())
    .attr("fill", "#69b3a2")


  // .attr("x", function(d) { return x(d.Country); })
  // .attr("y", function(d) { return y(d.Value); })
  // .attr("width", x.bandwidth())
  // .attr("height", function(d) { return height - y(d.Value); })
  // .attr("fill", "#69b3a2")


});
/* END OF LINE CHART */

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CAM DASHBOARD</title>

    <!--Lib css-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
    <!--own css-->
    <style>
        /* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

        .wrapper {
            display: flex;
            width: 100%;
            align-items: stretch;
        }

        #sidebar {
            min-width: 250px;
            max-width: 250px;
            background: rgb(60, 95, 238);
            color: #fff;
            transition: all 0.3s;
        }

        #sidebar.active {
            margin-left: -250px;
        }

        #sidebar .sidebar-header {
            padding: 20px;
            background: rgb(90, 121, 243);
        }

        #sidebar ul.components {
            padding: 20px 0;
            border-bottom: 1px solid #47748b;
        }

        #sidebar ul p {
            color: #fff;
            padding: 10px;
        }

        #sidebar ul li a {
            padding: 10px;
            font-size: 1.1em;
            display: block;
        }

        #sidebar ul li a:hover {
            color: #7386D5;
            background: #fff;
        }

        #sidebar ul li.active>a,
        a[aria-expanded="true"] {
            color: #fff;
            background: #6d7fcc;
        }

        a[data-toggle="collapse"] {
            position: relative;
        }

        .dropdown-toggle::after {
            display: block;
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
        }

        ul ul a {
            font-size: 0.9em !important;
            padding-left: 30px !important;
            background: #6d7fcc;
        }

        ul.CTAs {
            padding: 20px;
        }

        ul.CTAs a {
            text-align: center;
            font-size: 0.9em !important;
            display: block;
            border-radius: 5px;
            margin-bottom: 5px;
        }

        a.download {
            background: #fff;
            color: #7386D5;
        }

        a.article,
        a.article:hover {
            background: #6d7fcc !important;
            color: #fff !important;
        }

        /* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

        #content {
            width: 100%;
            padding: 20px;
            min-height: 100vh;
            transition: all 0.3s;
        }

        /* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

        @media (max-width: 768px) {
            #sidebar {
                margin-left: -250px;
            }

            #sidebar.active {
                margin-left: 0;
            }

            #sidebarCollapse span {
                display: none;
            }
        }

        /* LINE CHART STYLE */

        .axis--x path {
            display: none;
        }

        .line {
            fill: none;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

        span {
            text-align: center;
            display: inline-block;
        }
    </style>
    <!--<link rel="stylesheet" href="css/style.scss">-->

    <!--lib js-->
    <!--jquery js-->
    <script src="https://code.jquery.com/jquery-3.5.0.js"
        integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
    <!--bootstrap js-->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
    <!--fontawesome js-->

    <!--d3(chart) js-->
    <script src="src/d3.min.js"></script>

</head>

<body>
    <div class="wrapper">
        <!-- Sidebar -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <img src="rsc/mblogo.png" alt="" width="50" height="50">
            </div>
            <ul class="list-unstyled components">
                <li class="active">
                    <a href="/">CAM DASHBOARD</a>
                </li>
            </ul>
            <!--End of nav.sidebar-->
        </nav>

        <!--Page content-->
        <div id="content">
            <!-- navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <button type="button" id="sidebarCollapse" class="btn btn-info">
                        <i class="fas fa-align-justify"></i>
                    </button>
                </div>
            </nav>

            <div class="container-fluid content-header">
                <form class="form-inline">
                    <div class="form-row">
                        <div class="form-group" id="divDateRange">
                            <!--<em class="fas fa-calendar calendar"></em>
                                <input type="text" id="daterange" class="form-control" style="cursor: pointer;">-->
                        </div>
                    </div>
                </form>
            </div>

            <div class="container-fluid">
                <!--End of div.row-->
                <!--End of div.row-->
                <div class="row">
                    <div class="col-12">
                        <div class="card shadow mb-5">
                            <div class="card-body">
                                <div id="barChart">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--END OF div.row-->
            </div>
            <!--End of div.content-->

        </div>
        <!--End of div.wrapper-->

        <!--Lib <script>-->


        <!--own <script> -->
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script src="js/script.js"></script>


</body>

</html>

On my code CARD READER ERROR reaches up to 462 but in the chart it doesn't reach the 462 then the CAM OUT OF SERVICE has 0 on the chart but on my data it has 194. I've tried every documentation that i can find but it won't work.

Upvotes: 0

Answers (1)

Gerardo Furtado

Reputation: 102194

event_count is a quantitative variable. Therefore, you should use a linear scale:

var x = d3.scaleLinear()
    .range([0, width])
    .domain([0, d3.max(data, (s) => s.event_count)]);

Here is your code with that change only:

//data
var data = [{
  "id": 0,
  "event_description": "CARD READER ERROR",
  "event_count": 462
}, {
  "id": 0,
  "event_description": "NETWORK CONNECTION LOST",
  "event_count": 392
}, {
  "id": 0,
  "event_description": "CASH ACCEPT BIN FATAL",
  "event_count": 391
}, {
  "id": 0,
  "event_description": "CAM BEING SERVICE",
  "event_count": 378
}, {
  "id": 0,
  "event_description": "POSSIBLE TAMPERING",
  "event_count": 370
}, {
  "id": 0,
  "event_description": "BNA DEVICE ERROR",
  "event_count": 369
}, {
  "id": 0,
  "event_description": "POSSIBLE COMMUNICATION KEY ERROR ON CAM",
  "event_count": 366
}, {
  "id": 0,
  "event_description": "BLACKSCREEN",
  "event_count": 351
}, {
  "id": 0,
  "event_description": "CASH ACCEPT BIN ERROR",
  "event_count": 196
}, {
  "id": 0,
  "event_description": "CAM OUT OF SERVICE",
  "event_count": 194
}];

/* START OF LINE CHART */
$(document).ready(() => {

  // set the dimensions and margins of the graph
  var margin = {
      top: 20,
      right: 30,
      bottom: 40,
      left: 200
    },
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

  // append the svg object to the body of the page
  var svg = d3.select("#barChart")
    .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 + ")");

  // Parse the Data

  // Add X axis
  var x = d3.scaleLinear()
    .range([0, width])
    .domain([0, d3.max(data, (s) => s.event_count)]);


  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
    .attr("transform", "translate(-10,0)rotate(-45)")
    .style("text-anchor", "end");

  // Y axis
  var y = d3.scaleBand()
    .range([height, 0])
    .domain(data.map(function(d) {
      return d.event_description;
    }))
    .padding(.4);

  svg.append("g")
    .call(d3.axisLeft(y))

  //Bars
  svg.selectAll("myRect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", x(0))
    .attr("y", function(d) {
      return y(d.event_description);
    })
    .attr("width", function(d) {
      return x(d.event_count);
    })
    .attr("height", y.bandwidth())
    .attr("fill", "#69b3a2")


  // .attr("x", function(d) { return x(d.Country); })
  // .attr("y", function(d) { return y(d.Value); })
  // .attr("width", x.bandwidth())
  // .attr("height", function(d) { return height - y(d.Value); })
  // .attr("fill", "#69b3a2")


});
/* END OF LINE CHART */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CAM DASHBOARD</title>

  <!--Lib css-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
  <!--own css-->
  <style>
    /* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
    
    .wrapper {
      display: flex;
      width: 100%;
      align-items: stretch;
    }
    
    #sidebar {
      min-width: 250px;
      max-width: 250px;
      background: rgb(60, 95, 238);
      color: #fff;
      transition: all 0.3s;
    }
    
    #sidebar.active {
      margin-left: -250px;
    }
    
    #sidebar .sidebar-header {
      padding: 20px;
      background: rgb(90, 121, 243);
    }
    
    #sidebar ul.components {
      padding: 20px 0;
      border-bottom: 1px solid #47748b;
    }
    
    #sidebar ul p {
      color: #fff;
      padding: 10px;
    }
    
    #sidebar ul li a {
      padding: 10px;
      font-size: 1.1em;
      display: block;
    }
    
    #sidebar ul li a:hover {
      color: #7386D5;
      background: #fff;
    }
    
    #sidebar ul li.active>a,
    a[aria-expanded="true"] {
      color: #fff;
      background: #6d7fcc;
    }
    
    a[data-toggle="collapse"] {
      position: relative;
    }
    
    .dropdown-toggle::after {
      display: block;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
    }
    
    ul ul a {
      font-size: 0.9em !important;
      padding-left: 30px !important;
      background: #6d7fcc;
    }
    
    ul.CTAs {
      padding: 20px;
    }
    
    ul.CTAs a {
      text-align: center;
      font-size: 0.9em !important;
      display: block;
      border-radius: 5px;
      margin-bottom: 5px;
    }
    
    a.download {
      background: #fff;
      color: #7386D5;
    }
    
    a.article,
    a.article:hover {
      background: #6d7fcc !important;
      color: #fff !important;
    }
    /* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
    
    #content {
      width: 100%;
      padding: 20px;
      min-height: 100vh;
      transition: all 0.3s;
    }
    /* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
    
    @media (max-width: 768px) {
      #sidebar {
        margin-left: -250px;
      }
      #sidebar.active {
        margin-left: 0;
      }
      #sidebarCollapse span {
        display: none;
      }
    }
    /* LINE CHART STYLE */
    
    .axis--x path {
      display: none;
    }
    
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }
    
    span {
      text-align: center;
      display: inline-block;
    }
  </style>
  <!--<link rel="stylesheet" href="css/style.scss">-->

  <!--lib js-->
  <!--jquery js-->
  <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
  <!--bootstrap js-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
  <!--fontawesome js-->

  <!--d3(chart) js-->
  <script src="src/d3.min.js"></script>

</head>

<body>
  <div class="wrapper">
    <!-- Sidebar -->
    <nav id="sidebar">
      <div class="sidebar-header">
        <img src="rsc/mblogo.png" alt="" width="50" height="50">
      </div>
      <ul class="list-unstyled components">
        <li class="active">
          <a href="/">CAM DASHBOARD</a>
        </li>
      </ul>
      <!--End of nav.sidebar-->
    </nav>

    <!--Page content-->
    <div id="content">
      <!-- navbar -->
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <button type="button" id="sidebarCollapse" class="btn btn-info">
                        <i class="fas fa-align-justify"></i>
                    </button>
        </div>
      </nav>

      <div class="container-fluid content-header">
        <form class="form-inline">
          <div class="form-row">
            <div class="form-group" id="divDateRange">
              <!--<em class="fas fa-calendar calendar"></em>
                                <input type="text" id="daterange" class="form-control" style="cursor: pointer;">-->
            </div>
          </div>
        </form>
      </div>

      <div class="container-fluid">
        <!--End of div.row-->
        <!--End of div.row-->
        <div class="row">
          <div class="col-12">
            <div class="card shadow mb-5">
              <div class="card-body">
                <div id="barChart">
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--END OF div.row-->
      </div>
      <!--End of div.content-->

    </div>
    <!--End of div.wrapper-->

    <!--Lib <script>-->


    <!--own <script> -->
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="js/script.js"></script>


</body>

</html>

Upvotes: 1

d3 horizontal chart showing false data

Answers (1)

Related Questions