нет графики, созданной с помощью jquery flot

Question

Я пытаюсь сгенерировать графику, где хочу отобразить общее количество заказов и клиентов, но графика не отображается, не отображается. х: дата у: всего

Я использую jquery flot в качестве библиотеки.

Мой результат JSON (ежедневный результат):

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

Мой Ajax для генерации JSON (это просто резюме), чтобы помочь вам:

Результат sql:

    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"
  }
}

цикл:

  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

Теперь яваскрипт для генерации графики: я думаю, что в json_response что-то упустили? Но я не вижу, в чем проблема

<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 + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
*/      
    });
});

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

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

Примечание: если я раскомментирую ошибку, я ничего не вижу, поэтому на данный момент это комментарий.

Спасибо

нет: если вам нужна дополнительная информация, просто скажите мне в комментарии