How to import CSV file for Highcharts plot on webpage

Dear all,

I’am starting with Django, in order to interract my database to a simple app web with differents plots. I knew there are several possibilities with Highcharts and associted tutorials. Neverteless, I got troubles when I want to use my own CVS files, there is nothing displaid on my website.

After creating the environment, folder and so on… I created a folder template where inside there is

  • index.js
  • polls.html
  • data.csv

index.js :

document.addEventListener('DOMContentLoaded', () => {
    const options = {
        chart: {
            type: 'column',
            zoomType: 'xy'
        },
        title: {
            text: 'Our First Chart'
        },
        yAxis: {
            title: {
                text: 'Fruits Eaten'
            }
        }
    };
    $.get('data.csv', csv => {
        options.data = {
            csv
        };
        Highcharts.chart('container', options);
    });
});

polls.html :

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/lins/jquery.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.src.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <title>Website for Batterie discoveries</title>

</head>
<body>
  <div id="container"></div>

  <p>Hello Worlds</p>
  <script src="/home/marc/Django/Website/polls/templates/index.js"></script>
  <p>Hello World</p>

</body>
</html>

data.csv :

Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15

On the website, there is my two “Hello Worlds” and “Hello World” but the java from inde did nothing. I don’t know if it is a problem of import, or of code … I don’t know why and how I can solve this issue.

Thanks a lot :slight_smile:

Marc

If you go to your development tools tools in your browser, or if you watch the output from your runserver command (assuming that’s how you’re running Django for now), I think you’ll find that you’re getting a 404 for your JavaScript file.

I suggest you read up on the differences between templates and static files, and how you include file references within your templates.

Some locations to get you started:

If you’re coming to Django from experience with another web framework, it’ll be worth your time to really work through some of the tutorials available for learning Django.