通过轮询JSON数据构建图表

时间:2015-04-26 13:55:18

标签: javascript php json highcharts

我有一个比特币矿工,它可以输出JSON格式的数据,如下所示:

{
    "Data1": {
        "timestamp_raw": 1442856476,
        "timestamp": {
            "Year": 2015,
            "Month": 9,
            "Day": 21,
            "Hour": 20,
            "Minutes": 27,
            "Seconds": 56
        },
        "CG_Uptime": 15572,
        "MHS_Avg": 2695618.06,
        "DegC_In": "29",
        "DegC_TopOut": "54",
        "DegC_BotOut": "59",
        "Unit_Uptime": 118393,
        "FreeMem": "440",
        "PSUVolt_Top": "217",
        "PSUVolt_Bot": "217",
        "FAN": "40",
        "Total_Watts": 1264,
        "Total_KWh": 0
    },
    "Data2": {
        "timestamp_raw": 1442856495,
        "timestamp": {
            "Year": 2015,
            "Month": 9,
            "Day": 21,
            "Hour": 20,
            "Minutes": 28,
            "Seconds": 15
        },
        "CG_Uptime": 15592,
        "MHS_Avg": 2695948.02,
        "DegC_In": "29",
        "DegC_TopOut": "54",
        "DegC_BotOut": "59",
        "Unit_Uptime": 118412,
        "FreeMem": "440",
        "PSUVolt_Top": "217",
        "PSUVolt_Bot": "217",
        "FAN": "40",
        "Total_Watts": 1248,
        "Total_KWh": 30.006586944
    },
    "Data3": {
        "timestamp_raw": 1442856535,
        "timestamp": {
            "Year": 2015,
            "Month": 9,
            "Day": 21,
            "Hour": 20,
            "Minutes": 28,
            "Seconds": 55
        },
        "CG_Uptime": 15631,
        "MHS_Avg": 2698686.25,
        "DegC_In": "29",
        "DegC_TopOut": "54",
        "DegC_BotOut": "59",
        "Unit_Uptime": 118451,
        "FreeMem": "440",
        "PSUVolt_Top": "217",
        "PSUVolt_Bot": "217",
        "FAN": "40",
        "Total_Watts": 1232,
        "Total_KWh": 0.013688752
    }, ......

我想要做的是在php中创建一个网页,它将读取此json文件并在图表上显示值,x轴将是时间(来自json中的时间戳部分),y轴将是一个值每张图表。

我在这里看过类似的东西 http://powerprice.info/SPT/graphic.php 它使用highcharts。 我怎么能做到这一点?

1 个答案:

答案 0 :(得分:0)

我认为您正在寻找一般性建议。

实时数据:

这是我的:如果为比特币提供数据的服务器支持历史数据,比如具有数据范围(从 - 到等)的特定请求,那么只需在HTML文件中使用AJAX调用到您的服务器。然后在PHP中调用一些GET / POST到提供者服务器以获取请求的数据。然后在AJAX响应中向图表提供数据。只需确保您拥有Highcharts要求的正确格式。

你不会在Highcharts网站上找到很多例子,因为对于Highcharts你在后端拥有什么并不重要。但是,this tutorial解释了一点。在步骤#1: Set up the server而不是随机数据中,从数据提供者处获取适当的数据。

预处理数据:

根据你的问题更新的其他建议:我不能告诉你上周你需要如何存储数据,但我想简单的数据库就足够了。正如您所说,使用一些cron任务,从服务中获取数据,然后将其存储在您的数据库中。

问题是您的JSON的哪个属性值是在图表上显示的。在下面的示例中,我假设MHS_Avg用作y值。但是,我没有看到任何x值(如日期或时间戳)。

假设您/var/www/json.php为图表加载了数据:

$(function () {
    $.getJSON("/var/www/json.php", function (data) {
        var value,
        series = [{
            name: "MHS_Avg",
            data: []
        }]; // create series array with all series

        // now parse data:
        $.each(data, function (i, obj) {
            value = parseFloat(obj["MHS_Avg"]);
            if (!isNaN(value)) {
                series[0].data.push([i, value]);
                // or:
                // series[0].data.push(value);
                // or:
                // series[0].data.push({ x: i, y: value });
            };
        });

        // create chart
        $('#temps_hist').highcharts({
            series: series
        });
    });
});