Highcharts: how do I call an external .js file in the <head> of my highcharts page

Question

This Highcharts JS function works fine (HTML part not included here):

<html>
<head>
    <title>Highcharts Chart with HTML Data</title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>


   <script type="text/javascript">
        $(function(mychart) {
            Highcharts.chart('container', {
                data: {
                    table: document.getElementById('datatable'),
                    startRow: 0,
                    endRow: 10
                },              
                chart: {
                    type: 'spline'
                },
                xAxis: {
                    type: 'category'
                  },
                title: {
                    text: 'Tides for: Cundy Harbor, New Meadows River, Casco Bay, Maine'
                },
                yAxis: {
                    title: {
                      text: 'Height of tide<br>in feet.'
                        },
                        gridLineColor: '#197F07',
                        gridLineWidth: 0,
                        lineWidth:1,
                        plotLines: [{
                            color: '#FF0000',
                            width: 1,
                            value: 0
                    }]
                },
                tooltip: {
                    formatter: function() {
                        return '<b>' + this.series.name + '</b><br>' +
                            this.point.y + ' ft.<br>' + this.point.name;
                    }
                }
            });
        });
</script>

</head>

What I'd like to do is put the JS function into a separate file (same folder) and call it in the <head> of my highcharts page. I've created a separate file called my chart.js containing that function. How do I call that file when the main highcharts page loads?

Answer 1

If your chart.js file is in the same directory the file path would be "./chart.js" in this example

<html>
<head>
    <title>Highcharts Chart with HTML Data</title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>


   <script src="/file/path/to/chart.js"></script>

</head>

Highcharts: how do I call an external .js file in the <head> of my highcharts page

Question

1 answers

solution1
0 2019-10-11 01:14:49

Highcharts: how do I call an external .js file in the <head> of my highcharts page

Question

1 answers

solution1 0 2019-10-11 01:14:49

solution1
0 2019-10-11 01:14:49