3

I am creating a webpage. On this webpage I want it to load a Chartjs file. To keep my structure neat. I want to place the Chart object into an external "scripts.js" file and call it in the HTML as a script. I am using Flask to create the website.

It works fine when I include all the code in the HTML but it seems not to let me import the JS script. Please help me someone. Thank you.

Attempt: "scripts.js": 

 function linechart() {
    const LINECHART = document.getElementById("lineChart")

    let lineChart = new Chart (LINECHART, {
            type: 'line',
            data: {
                labels: {{ data_date|tojson|safe }},
                datasets: [{
                        responsive: false,
                        label: "Share Price",
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(75,192,192,0.4)",
                        borderColor: "rgba(75,192,192,1)",
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: "rgba(75,192,192,1)",
                        pointBackgroundColor: "#fff",
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: "rgba(75,192,192,1)",
                        pointHoverBorderColor: "rgba(220,220,220,1)",
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        data: {{ data_close|tojson|safe }},
                        spanGaps: true,
                    }]
            },

            // orientate the labels to be 90 degrees on x-axis
            // credit: https://stackoverflow.com/questions/35022830/chart-js-change-label-orientation-on-x-axis-for-line-charts
            options: {
                scales: {
                    xAxes: [{
                        ticks: {
                            autoSkip: true,
                            maxTicksLimit: 6,
                            autoSkipPadding: 2,
                            maxRotation: 0,
                            minRotation: 0
                        }
                    }]
                }
            }
    }); // end of lineChart
}

HTML:

<head>
<script src="{{ url_for('static', filename='scripts.js') }}"></script>
</head>

<canvas id="lineChart" width="20" height="20"></canvas>

<script>
   linechart()
</script>
Razia sultana
  • 2,168
  • 3
  • 15
  • 20
user7202182
  • 31
  • 1
  • 3
  • Your html is template code that Flask translates into actual html. What does the output look like? Open the page in a browser and use "view source" to see the final html. The part inside the `{{ }}` is probably not pointing to the correct location for the javascript file. Also you should confirm that the Flask web server is serving the javascript file if you enter the url directly. – Håken Lid Nov 23 '16 at 21:47
  • This was indeed the problem, data in javascript was not being read in due to the {{ }}, I replaced with correct syntax in the scripts.js file and it all works. Thanks Haken, I will accept this as answer. – user7202182 Nov 24 '16 at 12:47
  • Ok. I will submit the comment text as an answer as well. – Håken Lid Nov 24 '16 at 16:23

2 Answers2

1

Your html is template code that Flask translates into actual html.

<script src="{{ url_for('static', filename='scripts.js') }}"></script>

Open the page in a browser and use "view source" to see the final html. The part inside the {{ }} will be replaced.

The actual html should look something like this. 

<script src="/static/scripts.js"></script>

It's likely that the generated src url is missing or incorrect, which means that your browser will not be able to load and execute the javascript file.

Håken Lid
  • 22,318
  • 9
  • 52
  • 67
0

If the code runs fine in the HTML file, the issue must be with the path of the resource. Have you confirmed from the browser that the script.js file is being loaded?

owaisafaq
  • 523
  • 4
  • 7