CODEWITHSUNDEEP
javascriptd3.js
Shivani
Shivani

Reputation: 25

Skip NULL Label on x-axis in d3 bar chart

I am plotting a bar chart where in data i have StartOfMonth and a Value. now some of the StartOfMonth values are NULL and other has a date specified where as all the values are present using which i am plotting the bar. Now on x-axis labels, i only want to labels where StartOfMonth has a Value but i am getting one NULL value at second point. I have not used any formula to skip other NULL values. Bars of NULL values must show, they should not be removed

Here is my data that i am trying to Show

var data = 
        [
  {
    "Date": "1/3/2017",
    "Value": 0.0577372,
    "Close_Price": 58.538,
    "StockSymbol": "MSFT",
    "StartOfMonth": "Jan, 2017"
  },
  {
    "Date": "1/4/2017",
    "Value": 0.0515099,
    "Close_Price": 58.2761,
    "StockSymbol": "MSFT",
    "StartOfMonth": "NULL"
  },
  {
    "Date": "1/5/2017",
    "Value": 0.0503642,
    "Close_Price": 58.2761,
    "StockSymbol": "MSFT",
    "StartOfMonth": "NULL"
  },
  {
    "Date": "1/6/2017",
    "Value": 0.058741,
    "Close_Price": 58.7812,
    "StockSymbol": "MSFT",
    "StartOfMonth": "NULL"
  },{
    "Date": "2/1/2017",
    "Value": 0.0496128,
    "Close_Price": 59.4734,
    "StockSymbol": "MSFT",
    "StartOfMonth": "FEB, 2017"
  },
  {
    "Date": "2/2/2017",
    "Value": 0.0414615,
    "Close_Price": 59.0899,
    "StockSymbol": "MSFT",
    "StartOfMonth": "NULL"
  },
  {
    "Date": "2/3/2017",
    "Value": 0.049448,
    "Close_Price": 59.5669,
    "StockSymbol": "MSFT",
    "StartOfMonth": "NULL"
  },
{
    "Date": "3/1/2017",
    "Value": 0.057454,
    "Close_Price": 61.1125,
    "StockSymbol": "MSFT",
    "StartOfMonth": "March, 2017"
  },
  {
    "Date": "3/2/2017",
    "Value": 0.0404411,
    "Close_Price": 60.2373,
    "StockSymbol": "MSFT",
    "StartOfMonth": "NULL"
  },
  {
    "Date": "3/3/2017",
    "Value": 0.0437129,
    "Close_Price": 60.4631,
    "StockSymbol": "MSFT",
    "StartOfMonth": "NULL"
  },
  {
    "Date": "3/6/2017",
    "Value": 0.0431221,
    "Close_Price": 60.4819,
    "StockSymbol": "MSFT",
    "StartOfMonth": "NULL"
  },
{
    "Date": "4/3/2017",
    "Value": 0.0454515,
    "Close_Price": 61.6865,
    "StockSymbol": "MSFT",
    "StartOfMonth": "NULL"
  },
  {
    "Date": "4/4/2017",
    "Value": 0.0474509,
    "Close_Price": 61.8559,
    "StockSymbol": "MSFT",
    "StartOfMonth": "NULL"
  },
  {
    "Date": "4/5/2017",
    "Value": 0.0435526,
    "Close_Price": 61.6959,
    "StockSymbol": "MSFT",
    "StartOfMonth": "NULL"
  }
];

here is the graph i am getting enter image description here

Upvotes: 0

Views: 348

Answers (1)

Alfonso Irarrázaval
Alfonso Irarrázaval

Reputation: 328

If you have an xAxis element, you could filter all the null values and remove them:

Something like:


xAxis.call(d3.axisBottom(xScale)) // xScale being your scale
xAxis.selectAll('text').filter((t) => t.text() === "NULL").remove()

Upvotes: 1

Related Questions