没有通过jquery flot生成的图形

Question

I try to generate a graphics where I want to display the number total orders and customer, but the graphic is not display not display. x : the date y : the total

I use jquery flot as library.

My json result (daily result):

[{"order":"18000.0000","customer":"1"},{"order":"456.0000","customer":"1"},{"order":"240.0000","customer":"1"}]

My ajax to generate the json (it's just a summary) to help you :

the sql result :

    array(2) {
  [0]=>
  array(5) {
    ["date_start"]=>
    string(19) "2019-04-20 08:17:08"
    ["date_end"]=>
    string(19) "2019-04-21 08:17:33"
    ["orders"]=>
    string(1) "2"
    ["products"]=>
    string(1) "4"
    ["sub_total"]=>
    string(10) "18456.0000"
  }
  [1]=>
  array(5) {
    ["date_start"]=>
    string(19) "2019-03-21 08:16:16"
    ["date_end"]=>
    string(19) "2019-03-21 08:16:16"
    ["orders"]=>
    string(1) "1"
    ["products"]=>
    string(1) "1"
    ["sub_total"]=>
    string(8) "240.0000"
  }
}

the loop :

  if (is_array($result_array)) {
    foreach ($result_array as $result) {
      $json[] = ['order'  => $result['sub_total'],
                'customer' => $result['orders'],
                ];
    }    

# JSON-encode the response
    $json_response = json_encode($json); //Return the JSON Array

# Return the response
    echo $json_response

Now the javascript to generate the graphic : I think in the json_response, it miss something ? But I don't see where is the problem

<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');
                }
            });
        },
/*
        error: function(xhr, ajaxOptions, thrownError) {
           alert(thrownError + "
" + xhr.statusText + "
" + xhr.responseText);
        }
*/      
    });
});

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

<div id="chart-sale"></div>

Note : If I uncomment the error, I don't see anything, that's why for the moment, it's comment.

Thank you

not : if you need more information just tell me inside the comment