加载页面上没有动作javascript

Question

When I load my page, the js must display a default value : month, The problem is the graphic is not displayed. I must click on month to display the information.

In my ajax, console query string : range: month and this code to identified the range.

  $group = HTML::sanitize($_GET['range']);

  if (empty($group)) {
    $group = 'month';
  }

 switch($group) {
 }

Below the javascript code (plot libray) allowing to display the graphic

Thank you

<script type="text/javascript">
$('#range a').on('click', function(e) {
    e.preventDefault();

    $(this).parent().parent().find('li').removeClass('active');

    $(this).parent().addClass('active');

    $.ajax({
        type: 'get',
        url: '{$link}?range=' + $(this).attr('href'),
        dataType: 'json',
        success: function(json) {
            if (typeof json['order'] == 'undefined') { return false; }

            var option = {  
                shadowSize: 0,
                colors: ['#9FD5F1', '#1065D2'],
                bars: { 
                    show: true,
                    fill: true,
                    lineWidth: 1
                },
                grid: {
                    backgroundColor: '#FFFFFF',
                    hoverable: true
                },
                points: {
                    show: false
                },
                xaxis: {
                    show: true,
                    ticks: json['xaxis']
                }
            }

            $.plot('#chart-sale', [json['order'], json['customer']], option);   

            $('#chart-sale').bind('plothover', function(event, pos, item) {
                $('.tooltip').remove();

                if (item) {
                    $('<div id="tooltip" class="tooltip top in"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + item.datapoint[1].toFixed(2) + '</div></div>').prependTo('body');

                    $('#tooltip').css({
                        position: 'absolute',
                        left: item.pageX - ($('#tooltip').outerWidth() / 2),
                        top: item.pageY - $('#tooltip').outerHeight(),
                        pointer: 'cusror'
                    }).fadeIn('slow');  

                    $('#chart-sale').css('cursor', 'pointer');      
                } else {
                    $('#chart-sale').css('cursor', 'auto');
                }
            });
        }
    });
});

$('#range .active a').trigger('click');
</script>

error console :

uncaught TypeError: $.plot is not a function
    at Object.success (index.php:280)
    at c (jquery-3.4.0.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.4.0.min.js:2)
    at l (jquery-3.4.0.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery-3.4.0.min.js:2)

line :

        $.plot('#chart-sale', [json['order'], json['customer']], option);

Answer 1

I write the answer just to close the post (you can see the discussion in the question comments) Remember that JavaScript is not compiled so every expression is read top-bottom. To make sure your functions are recognized by the interpreter you need to give the right order to your scripts. Anyway you could execute your code after the page has been loaded by windows.load = function(){<your_code>} in JavaScript or $(document).ready(function(){<your_code>}) if you're using jQuery library .