amchart：如何从mysql结果动态创建图表？

Question

我使用php + mysql + amchart并使用dataLoader和json url创建流程图并像MRTG一样每300秒重新加载...

如果提前手动修复，则可以正常工作.... flow chart

但我想从MySQL动态生成的图表的来源和数量。 例如仪表板仅显示在数据库“显示状态”= Y记录中。

工作代码如下， 示例json文件：enter link description here

var Dashboard = function () {
    return {
        initFlow1: function () {
            var chart = AmCharts.makeChart("Flow1", {
                "type": "serial",
                "dataLoader": {
                    "url": "http://xxx.xxx.xxx.xxx/admin/flowjson/25",
                    "reload": 300
                },
                "categoryField": "date",
                "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
                "theme": "light",
                "categoryAxis": {
                    "minPeriod": "ss",
                    "parseDates": true
                },
                "chartCursor": {
                    "enabled": true,
                    "categoryBalloonDateFormat": "JJ:NN:SS"
                },
                "chartScrollbar": {
                    "enabled": true
                },
                "trendLines": [],
                "graphs": [{
                        "fillAlphas": 0.7,
                        "id": "AmGraph-1",
                        "lineAlpha": 0,
                        "title": "Inbound",
                        "valueField": "inFlows",
                    },
                    {
                        "fillAlphas": 0.7,
                        "id": "AmGraph-2",
                        "lineAlpha": 0,
                        "title": "Outbound",
                        "valueField": "outFlows"
                    }
                ],
                "guides": [],
                "valueAxes": [{
                    "id": "ValueAxis-1",
                    "title": "bits per second (M)"
                }],
                "allLabels": [],
                "balloon": {},
                "legend": {
                    "enabled": true
                },
                "titles": [{
                    "id": "Title-1",
                    "size": 15,
                    "text": "Flow - 1"
                }]
            })
            //1000=1秒
            setInterval(function () {
                chart.validateData()
            }, 299000);
        },

        initFlow2: function () {
            var chart = AmCharts.makeChart("Flow2", {
                "type": "serial",
                "dataLoader": {
                    "url": "http:///xxx.xxx.xxx.xxx/admin/flowjson/26",
                    "reload": 300
                },
                "categoryField": "date",
                "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
                "theme": "light",
                "categoryAxis": {
                    "minPeriod": "ss",
                    "parseDates": true
                },
                "chartCursor": {
                    "enabled": true,
                    "categoryBalloonDateFormat": "JJ:NN:SS"
                },
                "chartScrollbar": {
                    "enabled": true
                },
                "trendLines": [],
                "graphs": [{
                        "fillAlphas": 0.7,
                        "id": "AmGraph-1",
                        "lineAlpha": 0,
                        "title": "Inbound",
                        "valueField": "inFlows"
                    },
                    {
                        "fillAlphas": 0.7,
                        "id": "AmGraph-2",
                        "lineAlpha": 0,
                        "title": "Outbound",
                        "valueField": "outFlows"
                    }
                ],
                "guides": [],
                "valueAxes": [{
                    "id": "ValueAxis-1",
                    "title": "bits per second (M)"
                }],
                "allLabels": [],
                "balloon": {},
                "legend": {
                    "enabled": true
                },
                "titles": [{
                    "id": "Title-1",
                    "size": 15,
                    "text": "Flow -2 "
                }]
            })
            //1000=1秒
            setInterval(function () {
                chart.validateData()
            }, 299000);
        },

        init: function () {
            this.initFlow1();
            this.initFlow2();

        }
    };

}();

if (App.isAngularJsApp() === false) {
    jQuery(document).ready(function () {
        Dashboard.init(); // init metronic core componets
    });
}

<div id="Flow1" class="CSSAnimationChart"></div>
<div id="Flow2" class="CSSAnimationChart"></div>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="../../assets/pages/scripts/dashboardTest.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js" type="text/javascript"></script>