Menu
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>
257
asked Feb 21 '26 11:02
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.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
