'Graph not being displayed on django framework

I want to display a graph using C3 Javascript library which displays future prices of textile raw materials on django framework. When I run the code it does not display the graph and when I inspected it gave the following error : Failed to load resource:allpredicted.js:1 the server responded with a the server responded with a status of 404 (Not Found). Can anyone tell what could be the problem? I tried changing location of static and template folders but nothing worked.

This is the javascript file which creates graph

allpredicted.js

/*
 * Parse the data and create a graph with the data.
 */
function parseData(createGraph) {
    Papa.parse("201222-yarn-market-price-china--034.csv1.csv", {
        download: true,
        complete: function(results) {
            createGraph(results.data);
        }
    });
}


function createGraph(data) {
    var years = ['x'];
    var pred_appended = ["Cotton Yarn1"];

    for (var i = 1; i < data.length; i++) {
        if (data[i][0] === undefined) {
             years.push (null);
         } else {
             years.push (data[i][0]);
         }
         if (data[i][2] === undefined) {
             pred_appended.push (null);
         } else {
             pred_appended.push (data[i][2]);
         }
    }

    console.log(years);
    console.log(pred_appended);

  var chart = c3.generate({

          data: {
          x: 'x',
          //xFormat: '%d/%m/%Y', // 'xFormat' can be used as custom format of 'x'
          columns: [
              years,
  //            ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
              pred_appended
          ]
      },
            axis: {
          x: {
              type: 'timeseries',
              tick: {
                  format: '%d/%m/%Y'              },
                            label: {
                                text: 'Date',
                position: 'outer-center'
                            }
          },
                    y: {
            label: {
                text: 'Price',
                position: 'outer-middle'
                // inner-top : default
                // inner-middle
                // inner-bottom
                // outer-top
                // outer-middle
                // outer-bottom
            }
        }

      },
            grid: {
                    x: {
                        show: true
                    },
                    y: {
                        show: true
                    }
                },
                    subchart: {
                show: true
        },
        zoom: {
                enabled: true
        },
        point: {
        show: false
}
  });

}

parseData(createGraph);

This is the html file: home.html

<div class="main ">
  <!doctype html>
  <html lang="en">
    <body>
      {% load static %}
      <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css" />

      <!-- Load c3.css -->
      <link rel="stylesheet" href="{% static 'nfyp/stylesheets/c3.css' %}" type="text/css">
  
      <!-- Load d3.js and c3.js -->
      <script src="https://d3js.org/d3.v7.min.js"></script>
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
  
      <!-- Load papaparse.js -->
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script>
      
      <style>
        h3 {
          background-color: white;
          color: #6eeb34;
          text-align: center;
          padding-bottom: 35px;
        } 
      </style>
      <div><h3 class="h1-responsive font-weight-bold text-center my-4">Stock Forecast</h3></div>
      
      <div id="container">
        <div id="chart"></div>
      </div>
      
      
      {% load static %}
      <script src="{% static 'javascripts/allpredicted.js' %}"></script>
    <body>
</div>
{% endblock %}

My directory

all folders