Zing Feed从Rest API获取数据

问题描述：

我正在从rest api获取json数据，我想将其用作ZingFeed的输入.

I am getting a json data from rest api and i want to use it as input to ZingFeed.

<!DOCTYPE html>
<html>

<head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <script src='http://cdn.zingchart.com/zingchart.min.js'></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>

<body>
    <script>
    function getNewData()
    {
        $.ajax({ 
            type: "GET",
            dataType: "json",
            headers: {
                Accept:"application/json",
                "Access-Control-Allow-Origin": "*"
            },
            url: "/PerformanceMonitor/showProcessUsage/chrome",
            success: function(data){ 
                var mem = data.mem.size/10000;
                 return mem/10000;
                //$("#processInfo").append(data.mem.size);
                //$("#processInfo").append("   ")

            }
        });
        //return parseInt(memSize);
    }

    var chartData = {
        "type":"line",
        "refresh": {
            "type": "feed",
            "transport": "js",
            "url": "feed()",
            "interval": 200
        },
        "series":[
            {
                "values":[]
            }
        ]
    };


    window.onload = function() {
        zingchart.render({
            id: "chartDiv",
            data: chartData,
            height: 600,
            width: "100%"
        });
    };

    window.feed = function(callback) {
        var tick = {};
       // tick.plot0 = parseInt(10 + 900 * Math.random(), 10);
       tick.plot0 = parseInt(getNewData());
        //tick.plot0 = parseInt(1);
        callback(JSON.stringify(tick));
    };
    </script>
    <div id="processInfo"></div>
    <div id='chartDiv'></div>

</body>

</html>

在萤火虫中查看时它工作正常.数据(即mem在这种情况下确实很大，因此在将其分配给tick.plot0之前我已经将其分割了两次). 分配给tick.plot0 ..后，在开发人员工具中将其悬停时，它会显示Nan. 您能帮我在ZingFeed图表中绘制这些巨大的值

It is working fine when seen in firebug.The data (i.e mem in this case is really huge, so i have divided it twice before assigning it to tick.plot0). After getting assigned to tick.plot0 .. it shows Nan when hovered over in the developer tools. Could you help me plotting these huge values in ZingFeed Charts

预先感谢

答

这里的问题是Java语言中异步函数的性质.从AJAX返回数据不能像您上面尝试的那样工作. 您可以在此处了解更多信息.

The issue here is the nature of asynchronous functions in Javascript. Returning the data from AJAX doesn't work the way you've attempted above. You can read more about it here.

这是一个可行的解决方案.

Here's a working solution.

我在ZingChart团队工作.如果您对ZingChart库还有其他疑问，请告诉我.

I work on the ZingChart team. Let me know if you have other questions about the ZingChart library.

<!DOCTYPE html>
<html>

<head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <script src='http://cdn.zingchart.com/zingchart.min.js'></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>

<body>
    <script>
    var chartData = {
        "type":"line",
        "refresh": {
            "type": "feed",
            "transport": "js",
            "url": "feed()",
            "interval": 200
        },
        "series":[
            {
                "values":[]
            }
        ]
    };

    window.onload = function() {
        zingchart.render({
            id: "chartDiv",
            data: chartData,
            height: 600,
            width: "100%"
        });
    };

    window.feed = function(callback) {
        $.ajax({
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json",
                "Access-Control-Allow-Origin": "*"
            },
            url: "/PerformanceMonitor/showProcessUsage/chrome",
            success: function (data) {
                var mem = data.mem.size/10000;
                var tick = {
                    plot0: parseInt(mem)
                };
                callback(JSON.stringify(tick));
            }
        });
    };
    </script>
    <div id="processInfo"></div>
    <div id='chartDiv'></div>

</body>

Zing Feed从Rest API获取数据

相关推荐