Create a bar chart with local storage data (drawing the bars doesn't work)

Question

I'm working with D3.js and I want to use data from my local storage. Everything seems fine except for making the bars itself. I'm not sure what I'm doing wrong.

here I'm selecting my local storage keys and values separately.

const bedragen = Object.values(results);
const posten = Object.keys(results);
const yValue = bedragen;
const xValue = posten;

Then I'm drawing de y and x axis.

  const yScale = d3.scaleLinear()
    .domain([0, d3.max(yValue)])
    .range([innerHeight, 0]);


  const xScale = d3.scaleBand()
    .domain(xValue)
    .range([0, innerWidth])
    .padding(0.2);

Then I want to draw the bars but I don't see any result. I can see the axises I drew before but no bars. I also don't see the bars when I inspect the page.

This is the code for making bars:

  g.selectAll('.bar').data(results)
    .enter().append('rect')
        .attr('class', 'bar')
        .attr('x', d => xScale(xValue(d)))
        .attr('width', d => xScale.bandwidth())
        .attr('y', d => yScale(yValue(d)))
        .attr('height', d => innerHeight - yScale(yValue(d)));

Here you can find my whole D3.js code: https://github.com/ManoukK/NIBUD_datavisualisatie/blob/master/js/dataVis.js

My whole code:

// stap 2 van het formulier
const gasData = JSON.parse(localStorage.getItem("gas"));
const elektriciteitData = JSON.parse(localStorage.getItem("elektriciteit"));
const waterData = JSON.parse(localStorage.getItem("water"));
const lokaleLastenData = JSON.parse(localStorage.getItem("lokale lasten"));
const telefoonTVInternetData = JSON.parse(localStorage.getItem("telefoon tv internet"));
const verzekeringenData = JSON.parse(localStorage.getItem("verzekeringen"));
const onderwijsData = JSON.parse(localStorage.getItem("onderwijs"));
const kinderopvangData = JSON.parse(localStorage.getItem("kinderopvang"));
const contributiesAbonnementenData = JSON.parse(localStorage.getItem("contributies abonnementen"));
const vervoerData = JSON.parse(localStorage.getItem("vervoer"));
// stap 3 van het formulier
const kledingSchoenenData = JSON.parse(localStorage.getItem("kleding schoenen"));
const inventarisData = JSON.parse(localStorage.getItem("inventaris"));
const onderhoudHuisTuinData = JSON.parse(localStorage.getItem("onderhoud huis tuin"));
const nietVergoedeZiektekostenData = JSON.parse(localStorage.getItem("niet vergoede ziektekosten"));
const vrijetijdsuitgavenData = JSON.parse(localStorage.getItem("vrijetijdsuitgaven"));
const voedingData = JSON.parse(localStorage.getItem("voeding"));
const overigeHuishoudelijkeUitgavenData = JSON.parse(localStorage.getItem("overige huishoudelijke uitgaven"));

// //object met alle data van de local storage 
const results = {
    gas: gasData,
    elektriciteit: elektriciteitData,
    water: waterData,
    lokaleLasten: lokaleLastenData,
    telefoonTvInternet: telefoonTVInternetData,
    verzekeringen: verzekeringenData,
    onderwijs: onderwijsData,
    kinderopvang: kinderopvangData,
    contributiesAbonnementen: contributiesAbonnementenData,
    vervoer: vervoerData,
    // stap 3 van het formulier
    kledingSchoenen: kledingSchoenenData,
    inventaris: inventarisData,
    onderhoudHuisTuin: onderhoudHuisTuinData,
    nietVergoedeZiektekosten: nietVergoedeZiektekostenData,
    vrijetijdsuitgaven: vrijetijdsuitgavenData,
    voeding: voedingData,
    overigeHuishoudelijkeUitgaven: overigeHuishoudelijkeUitgavenData
};

console.log(results);

const svg = d3.select('svg');

const width = +svg.attr('width');
const height = +svg.attr('height');

const render = results => {
  const bedragen = Object.values(results);
  const posten = Object.keys(results);

  const yValue = bedragen;
  const xValue = posten;

  const margin = {top: 50, right: 100, bottom: 50, left: 100};
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  const yScale = d3.scaleLinear()
    .domain([0, d3.max(yValue)])
    .range([innerHeight, 0]);

  const xScale = d3.scaleBand()
    .domain(xValue)
    .range([0, innerWidth])
    .padding(0.2);

  const g = svg.append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);

  const xAxisGroup = g.append('g')
    .call(d3.axisBottom(xScale))
    .attr('transform', `translate(0,${innerHeight})`)
    .append('text') 
      .attr('y', 35)
      .attr('x', innerWidth / 2)
        .attr('fill', 'black')
      .text('Posten');

  const yAxisGroup = g.append('g')
    .call(d3.axisLeft(yScale))
    .append('text')
       .attr('x', -120)
      .attr('y', -60)
      .attr('fill', 'black')
      .text('Geld in euros')
      .attr('transform', `rotate(-90)`);

  g.selectAll('.bar')
      .data(results)
    .enter().append('rect')
        .attr('class', 'bar')
        .attr('x', function(d){return xScale(posten(d))})
        .attr('width', xScale.bandwidth())
        .attr('y', function(d) {return yScale(bedragen(d))})
        .attr('height', function(d){ return innerHeight - yScale(+d[bedragen(d)])});

};

render(results);

Hi, can you make a snippet for your code? would help much in addressing your issue. — ROOT, Jan 14 '20 at 14:57

score 1 · Accepted Answer · answered Jan 14 '20 at 15:43

I fixed your code, here is the changed Javascript

//values uit de local storage ophalen om het vervolgens in een object te stoppen
//https://www.kirupa.com/html5/storing_and_retrieving_an_array_from_local_storage.htm
// het parsen van de local storage https://theshravan.net/blog/storing-json-objects-in-html5-local-storage/
//https://stackoverflow.com/questions/51173341/crossfilter-loading-a-json-file-from-localstorage
// stap 1 van het formulier
const huishoudenData = localStorage.getItem("huishouden");
const wonenData = localStorage.getItem("woon situatie");
const inkomenData = localStorage.getItem("inkomen");
// stap 2 van het formulier
const gasData = JSON.parse(localStorage.getItem("gas"));
const elektriciteitData = JSON.parse(localStorage.getItem("elektriciteit"));
const waterData = JSON.parse(localStorage.getItem("water"));
const lokaleLastenData = JSON.parse(localStorage.getItem("lokale lasten"));
const telefoonTVInternetData = JSON.parse(localStorage.getItem("telefoon tv internet"));
const verzekeringenData = JSON.parse(localStorage.getItem("verzekeringen"));
const onderwijsData = JSON.parse(localStorage.getItem("onderwijs"));
const kinderopvangData = JSON.parse(localStorage.getItem("kinderopvang"));
const contributiesAbonnementenData = JSON.parse(localStorage.getItem("contributies abonnementen"));
const vervoerData = JSON.parse(localStorage.getItem("vervoer"));
// stap 3 van het formulier
const kledingSchoenenData = JSON.parse(localStorage.getItem("kleding schoenen"));
const inventarisData = JSON.parse(localStorage.getItem("inventaris"));
const onderhoudHuisTuinData = JSON.parse(localStorage.getItem("onderhoud huis tuin"));
const nietVergoedeZiektekostenData = JSON.parse(localStorage.getItem("niet vergoede ziektekosten"));
const vrijetijdsuitgavenData = JSON.parse(localStorage.getItem("vrijetijdsuitgaven"));
console.log(localStorage.getItem("voeding"));
const voedingData = localStorage.getItem("voeding");
const overigeHuishoudelijkeUitgavenData = JSON.parse(localStorage.getItem("overige huishoudelijke uitgaven"));

// //object met alle data van de local storage 
const results = {
    // stap 1 van het formulier
    // huishouden: huishoudenData,
    // wonen: wonenData,
    // inkomen: inkomenData, 
    // stap 2 van het formulier
    gas: gasData,
    elektriciteit: elektriciteitData,
    water: waterData,
    lokaleLasten: lokaleLastenData,
    telefoonTvInternet: telefoonTVInternetData,
    verzekeringen: verzekeringenData,
    onderwijs: onderwijsData,
    kinderopvang: kinderopvangData,
    contributiesAbonnementen: contributiesAbonnementenData,
    vervoer: vervoerData,
    // stap 3 van het formulier
    kledingSchoenen: kledingSchoenenData,
    inventaris: inventarisData,
    onderhoudHuisTuin: onderhoudHuisTuinData,
    nietVergoedeZiektekosten: nietVergoedeZiektekostenData,
    vrijetijdsuitgaven: vrijetijdsuitgavenData,
    voeding: voedingData,
    overigeHuishoudelijkeUitgaven: overigeHuishoudelijkeUitgavenData
};

const svg = d3.select('svg');

// + zet stings om in nummers
const width = +svg.attr('width');
const height = +svg.attr('height');

  //basis regels voor de bar chart
const render = results => {
  //const yValue = results.bedrag;
  //const xValue = results.post;

  const lijstje = Object.entries(results);
  console.log(lijstje);

  //https://stackoverflow.com/questions/4437916/how-to-convert-all-elements-in-an-array-to-integer-in-javascript
  // Object.values of keys https://javascript.info/keys-values-entries
  const bedragen = Object.values(results);
  const posten = Object.keys(results);
  // const yValue = bedragen.map(Number);
  const yValue = bedragen;
  const xValue = posten;

  const margin = {top: 50, right: 100, bottom: 50, left: 100};
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  const yScale = d3.scaleLinear()
    // .domain(bedragen.map(function(key, values){results[values]}))
    .domain([0, d3.max(yValue)])
    .range([innerHeight, 0]);

  //per post een bar maken
  const xScale = d3.scaleBand()
    .domain(xValue)
    .range([0, innerWidth])
    .padding(0.2);

  //betere margin maken
  const g = svg.append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);

  const xAxisGroup = g.append('g')
    .call(d3.axisBottom(xScale))
    //X as onder zetten ipv boven
    .attr('transform', `translate(0,${innerHeight})`)
    .append('text') 
      //tekst onder de as plaatsen
      .attr('y', 35)
      //bottom tekst in het midden zetten
      .attr('x', innerWidth / 2)
        .attr('fill', 'black')
      .text('Posten')

  const yAxisGroup = g.append('g')
    .call(d3.axisLeft(yScale))
    .append('text')
       .attr('x', -120)
      .attr('y', -60)
      .attr('fill', 'black')
      .text('Geld in euros')
      .attr('transform', `rotate(-90)`);

  g.selectAll('.bar')
      .data(posten)
    .enter().append('rect')
        .attr('class', 'bar')
        .attr('x', function(d, i){ return xScale(d)})
        .attr('width', xScale.bandwidth())
        .attr('y', function(d, i) {return yScale(bedragen[i])})
        .attr('height', function(d, i){ console.log(); return innerHeight - yScale(bedragen[i])});

};

render(results);

I had to look into your codebase and change few things to make it work, but with the above change, you should be fine.

few things to note:

.enter() function accepts only variable or data of type 'Array' you were passing object to this method
I had to change the height attribute function and y attribute function to have data values.

@Manouk its Ok, not problem! I gave you upvote for this question now! :) — ROOT, Jan 15 '20 at 12:08

Create a bar chart with local storage data (drawing the bars doesn't work)

1 Answers1