Как получить данные с помощью dataLoader в amCharts?

Question

Я использую библиотеку amCharts (это библиотека JavaScript для загрузки данных в диаграммы), чтобы извлечь данные из базы данных mySQL и отобразить их с помощью биржевой диаграммы.

Я нашел полное руководство здесь:

http://www.amcharts.com/tutorials/your-first-stock-chart/

Они используют статические данные, которые они создали в коде, однако я хочу использовать свои собственные данные, извлекая их из базы данных в формате JSON.

PHP-файл для включения:json_encode.php

<?php
 include("data.php");
 echo  json_encode($rows);
?>

Выходные данные этого файла выглядят так:

[{"date":"2014-01-19 00:00:00","value":"15"},{"date":"2014-04-19 00:00:00","value":"8"},{"date":"2014-05-19 00:00:00","value":"54"},{"date":"2014-07-19 00:00:00","value":"5"},{"date":"2014-09-19 00:00:00","value":"24"},{"date":"2014-11-19 00:00:00","value":"18"},{"date":"2015-01-19 00:00:00","value":"36"},{"date":"2015-02-19 00:00:00","value":"10"},{"date":"2015-03-11 16:54:55","value":"7"},{"date":"2015-03-19 00:00:00","value":"45"},{"date":"2015-04-19 00:00:00","value":"17"},{"date":"2015-05-19 00:00:00","value":"4"},{"date":"2015-06-19 00:00:00","value":"27"}]

Полный код из учебника:

<script type="text/javascript">

        var chartData= [
            {date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10},
            {date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11},
            {date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12},
            {date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11},
            {date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10},
            {date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11},
            {date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13},
            {date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14},
            {date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17},
            {date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13}
        ];

        AmCharts.ready(function() {
            var chart = new AmCharts.AmStockChart();
            chart.pathToImages = "amcharts/images/";

            var dataSet = new AmCharts.DataSet();
            dataSet.dataProvider = chartData;
            dataSet.fieldMappings = [{fromField:"val", toField:"value"}];   
            dataSet.categoryField = "date";          
            chart.dataSets = [dataSet];

            var stockPanel = new AmCharts.StockPanel();
            chart.panels = [stockPanel];

            var legend = new AmCharts.StockLegend();
            stockPanel.stockLegend = legend;                

            var panelsSettings = new AmCharts.PanelsSettings();
            panelsSettings.startDuration = 1;
            chart.panelsSettings = panelsSettings;   

            var graph = new AmCharts.StockGraph();
            graph.valueField = "value";
            graph.type = "column";
            graph.title = "MyGraph";
            graph.fillAlphas = 1;
            stockPanel.addStockGraph(graph);

            var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
            categoryAxesSettings.dashLength = 5;
            chart.categoryAxesSettings = categoryAxesSettings;

            var valueAxesSettings = new AmCharts.ValueAxesSettings();
            valueAxesSettings .dashLength = 5;
            chart.valueAxesSettings  = valueAxesSettings;

            var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
            chartScrollbarSettings.graph = graph;
            chartScrollbarSettings.graphType = "line";
            chart.chartScrollbarSettings = chartScrollbarSettings;

            var chartCursorSettings = new AmCharts.ChartCursorSettings();
            chartCursorSettings.valueBalloonsEnabled = true;
            chart.chartCursorSettings = chartCursorSettings;

            var periodSelector = new AmCharts.PeriodSelector();
            periodSelector.periods = [{period:"DD", count:1, label:"1 day"},
                                      {period:"DD", selected:true, count:5, label:"5 days"},
                                      {period:"MM", count:1, label:"1 month"},
                                      {period:"YYYY", count:1, label:"1 year"},
                                      {period:"YTD", label:"YTD"},
                                      {period:"MAX", label:"MAX"}];                
            chart.periodSelector = periodSelector;

            chart.write("chartdiv");
        });        

Итак, вместо этой строки:

dataSet.dataProvider = chartData;

Я хочу использовать dataLoader для загрузки данных из PHP в формате JSON:

dataSet.dataloader =  {
  "url": "json_encode.php"
},

Возможно, объявление dataLoader неверно, потому что оно не работает.

Любая помощь будет оценена:)

Answer 1

Хотя уже немного поздно, на тот случай, если кто-нибудь столкнется с этим вопросом...

Следуйте инструкциям AmCharts для DataLoader, все шаги описаны четко, и даже есть пример для биржевых диаграмм. https://www.amcharts.com/tutorials/using-data-loader-plugin/