Отображение данных из базы данных в AmCharts

Question

Я пытаюсь сделать график с помощью AmCharts и после этого примера на их сайте: https://www.amcharts.com/kbase/using-data-loader-to-connect-charts-to-mysql-data-base/

Мой исходный код является

var chart = AmCharts.makeChart("chart_1", { 
     "pathToImages": App.getGlobalPluginsPath() + "amcharts/amcharts/images/", 

     "dataProvider": [{ 
      "year": 2009, 
      "income": 23.5, 
      "expenses": 18.1 
     }, { 
      "year": 2010, 
      "income": 26.2, 
      "expenses": 22.8 
     }], 
      // bunch of graph stylings 
    }); 

    $('#chart_1').closest('.portlet').find('.fullscreen').click(function() { 
     chart.invalidateSize(); 
    }); 
} 

Моя попытка загрузить данные из MySQL

var chart = AmCharts.makeChart("chart_1", { 
    "type": "serial", 
    "dataProvider": { 
     "url": "data.php" 
    }, 
     "pathToImages": App.getGlobalPluginsPath() + "amcharts/amcharts/images/", 

     // bunch on graphs style 

    }); 

    $('#chart_1').closest('.portlet').find('.fullscreen').click(function() { 
     chart.invalidateSize(); 
    }); 
} 

Исходный код с жестко запрограммированными данными. Ниже в mysql не работает. Это пустая страница и не отображает график. Также нет ошибок на консоли.

data.php также работает и возвращает массив json.

Может кто поможет здесь?

В случае PHP часть необходим также

$query = " 
     SELECT * 
     FROM my_chart_data 
     ORDER BY category ASC"; 
$result = $link->query($query); 

// All good? 
if (!$result) { 
    // Nope 
    $message = 'Invalid query: ' . $link->error . "n"; 
    $message .= 'Whole query: ' . $query; 
    die($message); 
} 


// Set proper HTTP response headers 
header('Content-Type: application/json'); 

// Print out rows 
$data = array(); 
while ($row = $result->fetch_assoc()) { 
    $data[] = $row; 
} 
echo json_encode($data); 

Answer 1

dataProvider не принимает URL - вам нужно изменить его dataLoader, если вы используете dataLoader плагин. Для того, чтобы использовать плагин dataLoader, сначала нужно включить плагин вместе с другими библиотеками диаграммы, как так:

<!-- chart libraries --> 
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script> 
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script> 
<!-- include dataloader --> 
<script type="text/javascript" src="//www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script> 

Затем измените dataProvider на dataLoader. dataLoader занимает url:

var chart = AmCharts.makeChart("chart_1", { 
    "type": "serial", 
    "dataLoader": { 
     "url": "data.php" 
    }, 
    // ... 
}); 

Полная документация dataloader можно найти на GitHub странице here.