Why is there no display (Beginner BTW)

So I am using a tutorial series. I am on the third part and for some reason (Probably small), It does not display my pie chart. I have looked but just can’t seem to find the problem. I am using Visual Studios Code, so it could be a update. I have JSON data but note that I paste it into the program to create the pie chart. So the JSON does not cause any problems unless something about the code is not right, however I “think” it is correct. But I will put it in just in case. I am not finished with the whole video but I am at 24:04 in the video. Thanks in advance!

Video:

https://www.youtube.com/watch?v=x51y0jhTqCE&list=PLGLfVvz_LVvTP2Op3wZlaGTUcgCfDuwn8&index=4&t=0s

jstut3.html:

<!DOCTYPE html>
<html>
    <meta name="viewport" content="width = device-width, initial-scale = 1">
    <title>Pie Chart Creater</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="mainstyle.css">
  </head>
  <body>
     <div id="container">
         <div id="jumbotron">
             <canvas id='canvas' width='600' height='600'>

             </canvas><br>
             <textarea id="json-data"></textarea><br>
             <button type="submit" class="btn-lg mybut" onClick="drawChart
             ()">Create Pie Chart</button>
         </div>
     </div>

      <script src="jstut3.js"></script>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>


</html>

mainstyle.css:

body{
    background: #000000;
}

#canvas{
    margin: 10px;
    padding: 10px;
    background: #ffffff;
    border: thin inset #000000;
}

#json-data{
    margin: 10px;
    padding: 10px;
    width: 620px;
    height: 200px;
    background: #ffffff;
    border: thin inset #000000;
}

.mybut{
    margin: 10px;
    padding: 10px;
    width: 620px;
}

jstut3.js:

let data;
let expenditureArray = [];
let percentArray = [];
let colorArray = [];

function drawChart(){
    data = document.getElementById('json-data').value;
    percentArray = createPercentArray();
    colorArray = createRandomColorArray();
    populateArray(data);
    drawPie();
}

function poupulateArray(jsonData){
    let expenseArray = JSON.parse(jsonData);
    for(let i = 0; i < expenseArray.expenditures.length; i++){
        let expense = expenseArray.expenditures[i];
        expenditureArray[i] = expense;
    }
}

function createPercentArray(){
    let perArr = [];
    for(let i = 0; i < expenditureArray.length; i++){
        perArr[i] = expenditureArray[i].percent * .02;
    }
    return perArr;
}

function createRandomColorArray(){
    let randColorArr = [];
    for(let i = 0; i < expenditureArray.length; i++){
        randColorArr[i] = '#' + Math.floor(Math.random() * 16777215).toString
        (16);
    }
    return randColorArr;
}

function drawPie(){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    let startAngle = 0;
    let endAngle = 0;

    for(let i = 0; i < percentArray.length; i++){
        startAngle = endAngle;
        endAngle = endAngle + (percentArray[i] * Math.PI);

        drawSlice(context, 300, 200, 150, startAngle, endAngle, colorArray[i]
        );
    }
}

function drawSlice(ctx, sliceCenterX, SliceCenterY, radius, startAngle,
endAngle, color){
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(sliceCenterX, SliceCenterY);
    ctx.arc(sliceCenterX, SliceCenterY, radius, startAngle, endAngle);
    ctx.closePath();
    ctx.fill();
}

expenditures.json:

{"expenditures": [
    {"type":"Healthcare", "percent":"8"},
    {"type":"Insurance", "percent":"12"},
    {"type":"Food", "percent":"13"},
    {"type":"Housing", "percent":"33"},
    {"type":"Transportation", "percent":"16"},
    {"type":"Apparel", "percent":"3"},
    {"type":"Entertainment", "percent":"5"},
    {"type":"Healthcare", "percent":"8"},
    {"type":"Other", "percent":"2"}
]} 

Let me know if you need anything. Thanks in advance again!

I can’t get it to work - I don’t use these features much - but I can point out a few problems.

First of all, a misspelling:

function poupulateArray(jsonData){

Secondly, I’m not sure what is supposed to happen here. When I look at the code, you are calling drawChart, and it gets the percentArray, It gets this from createPercentArray. But that gets the array by mapping over expenditureArray. But that is an empty array so that for loop doesn’t run and createPrecentArray just returns an empty array. So, when you get down to drawPie, percentArray is sill an empty array so your for loop doesn’t do anything.

I think there is something else that is supposed to happen with your data.

Learn how to use the debugger console window and either console.log statements or break points to see what is happening in your code. These are important skills for a developer.

1 Like

Thank you! The misspelling was the problem! I will look into the debugger console window and how to use console.log to debug. Do you have any idea where I could learn to debug? Thanks again so much!

Debugging in general is an art but easy to learn. I think you mostly learn it by doing it. My philosophy is to figure out where the code/data is still doing what I expect and work forward until it isn’t.

The other part is learning to use the tools. The first step is to learn how to open the debugger console. It depends on your system and browser but it’s usually something like ctrl+shft+i or cmd+opt+i. Sometimes it’s “j”. If you get stuck, just google “how to open debugger console”.

Of course, if you’re working in node then you already have the console open.

Those would get you going. The next step would be to learn how to use break points and such. That would probably be able to learn by watching a youtube video.

1 Like

Thank you very much!