2

I am new to Django and Web development. I am stuck at a point. I need to make a graph using Javascript and I successfully done that in file located in app/templates/graphs/BarGraph.js and my HTML template file analysis.html is also in the same folder. It is running fine using Web server Chrome but when I am trying to run my HTML file using my app it does not find my BarGraph.js

enter image description here

analysis.html

{% extends "header.html" %}

{% block content %}

    <h3 style="text-align:center;">Graph</h3>

    <script type="text/javascript" src= "templates/graphs/BarGraph.js" ></script>

{% endblock %}

I also tried to put all the JS code in my HTML, then it does process the code but then does not find frequent_words.tsv file and says

enter image description here

BarGraph.js

// See D3 margin convention: http://bl.ocks.org/mbostock/3019563
var margin = {top: 20, right: 10, bottom: 100, left:50},
    width = 700 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body")
    .append("svg")
      .attr ({
        "width": width + margin.right + margin.left,
        "height": height + margin.top + margin.bottom
      })
    .append("g")
      .attr("transform","translate(" + margin.left + "," + margin.right + ")");

// define x and y scales
var xScale = d3.scale.ordinal()
    .rangeRoundBands([0,width], 0.2, 0.2);

var yScale = d3.scale.linear()
    .range([height, 0]);

// define x axis and y axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

d3.tsv("templates/graphs/frequent_words.tsv", function(error,data) {
  if(error) console.log("Error: data not loaded!");


  data.forEach(function(d) {
    d.words = d.words;
    d.frequency = +d.frequency;       // try removing the + and see what the console prints
    console.log(d.frequency);   // use console.log to confirm
  });

  // sort the frequency values
  data.sort(function(a,b) {
    return b.frequency - a.frequency;
  });

  // Specify the domains of the x and y scales
  xScale.domain(data.map(function(d) { return d.words; }) );
  yScale.domain([0, d3.max(data, function(d) { return d.frequency; } ) ]);

  svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr("height", 0)
    .attr("y", height)
    .transition().duration(3000)
    .delay( function(d,i) { return i * 200; })
    // attributes can be also combined under one .attr
    .attr({
      "x": function(d) { return xScale(d.words); },
      "y": function(d) { return yScale(d.frequency); },
      "width": xScale.rangeBand(),
      "height": function(d) { return  height - yScale(d.frequency); }
    })
    .style("fill", function(d,i) { return 'rgb(20, 20, ' + ((i * 30) + 100) + ')'});


        svg.selectAll('text')
            .data(data)
            .enter()
            .append('text')



            .text(function(d){
                return d.frequency;
            })
            .attr({
                "x": function(d){ return xScale(d.words) +  xScale.rangeBand()/2; },
                "y": function(d){ return yScale(d.frequency)+ 12; },
                "font-family": 'sans-serif',
                "font-size": '13px',
                "font-weight": 'bold',
                "fill": 'white',
                "text-anchor": 'middle'
            });

    // Draw xAxis and position the label
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
        .attr("dx", "-.8em")
        .attr("dy", ".25em")
        .attr("transform", "rotate(-60)" )
        .style("text-anchor", "end")
        .attr("font-size", "10px");


    // Draw yAxis and postion the label
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("x", -height/2)
        .attr("dy", "-3em")
        .style("text-anchor", "middle")
        .text("Trillions of US Dollars ($)");
});

I also tried static paths but they are also not working. Please help. Thanks

3
  • Static files go in static directories, not the same folder as the templates. Commented Jan 15, 2018 at 13:54
  • Yes but when I tried static i put all the files in the {% static js/BarGraph.js%} directory. But it didn't work either Commented Jan 15, 2018 at 14:03
  • I don't know what you mean. Where did you put those in your project structure? What are the values of your STATIC_ROOT, STATIC_URL and STATICFILES_DIRS settings? Are you running in development or production? Is DEBUG on? Have you set anything up to actually serve files? Commented Jan 15, 2018 at 14:14

1 Answer 1

1

First you need to define the "STATIC DIR" at your settings.py file like so:

STATIC_DIR = os.path.join(BASE_DIR, 'static')

and then add the staticfiles (usually near the end of your settings.py):

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    STATIC_DIR,
]

Now at your template you can access the static files located at the static folder like so :

 <link rel="stylesheet" href="{% static "/css/mycss4.css" %}">

where "css" is a sub-folder under the static folder in your project and do not forget to have {% load staticfiles %} at the top of your base template. let me know if you still have any problems with this

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.