带有动态数据集的动态Javascript多行图表_Javascript_Json_Charts_Canvasjs

带有动态数据集的动态Javascript多行图表

javascript json charts

带有动态数据集的动态Javascript多行图表,javascript,json,charts,canvasjs,Javascript,Json,Charts,Canvasjs,我正在尝试创建一个动态Javascript图，它将显示多行每条线应代表调查中的唯一用户，X轴=时间，y轴为分数0-100。在整个调查过程中，每个用户都会回答多个问题，这就是为什么我对同一用户有多个数据点我遇到的问题是，我似乎无法找到如何为每个唯一的用户动态创建新的数据集。一切似乎都在提前定义数据集我的数据是这样的。根据下面的评论，我可以修改我的Json { "user1": [ { "x": "2017-03-27 12:28:12", "y":

我正在尝试创建一个动态Javascript图，它将显示多行

每条线应代表调查中的唯一用户，X轴=时间，y轴为分数0-100。在整个调查过程中，每个用户都会回答多个问题，这就是为什么我对同一用户有多个数据点

我遇到的问题是，我似乎无法找到如何为每个唯一的用户动态创建新的数据集。一切似乎都在提前定义数据集

我的数据是这样的。

根据下面的评论，我可以修改我的Json

{
"user1": [
    {
        "x": "2017-03-27 12:28:12",
        "y": "85"
    },
    {
        "x": "2017-03-27 12:28:14",
        "y": "41"
    },
    {
        "x": "2017-03-27 12:28:17",
        "y": "97"
    },
    {
        "x": "2017-03-27 12:28:20",
        "y": "99"
    },
    {
        "x": "2017-03-27 12:28:35",
        "y": "98"
    },
    {
        "x": "2017-03-27 12:28:40",
        "y": "83"
    },
    {
        "x": "2017-03-27 12:30:42",
        "y": "68"
    }
],
"user2": [
    {
        "x": "2017-03-27 12:28:19",
        "y": "0"
    },
    {
        "x": "2017-03-27 12:28:24",
        "y": "37"
    },
    {
        "x": "2017-03-27 12:29:46",
        "y": "0"
    },
    {
        "x": "2017-03-27 12:29:51",
        "y": "9"
    },
    {
        "x": "2017-03-27 12:29:53",
        "y": "28"
    },
    {
        "x": "2017-03-27 12:29:54",
        "y": "2"
    },
    {
        "x": "2017-03-27 12:29:56",
        "y": "0"
    },
    {
        "x": "2017-03-27 12:30:45",
        "y": "38"
    },
    {
        "x": "2017-03-27 12:35:23",
        "y": "37"
    }
],
"": [
    {
        "x": "2017-03-28 10:06:04",
        "y": "0"
    },
    {
        "x": "2017-03-28 10:06:07",
        "y": "97"
    },
    {
        "x": "2017-03-28 10:06:17",
        "y": "11"
    },
    {
        "x": "2017-03-28 10:06:38",
        "y": "100"
    },
    {
        "x": "2017-03-28 10:06:41",
        "y": "3"
    },
    {
        "x": "2017-03-28 10:06:45",
        "y": "54"
    },
    {
        "x": "2017-03-28 10:06:48",
        "y": "93"
    },
    {
        "x": "2017-03-28 10:06:52",
        "y": "0"
    },
    {
        "x": "2017-03-28 10:06:54",
        "y": "46"
    }
]

}

我正在使用的代码。这是我用来在刷新时生成单线图的HTML。我正在使用Canvas JS，但我对任何解决方案都持开放态度

    <!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="canvasjs.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
 refreshTable();
 });
function refreshTable(){
            $.getJSON("graphdata.php", function (result) {

                var chart = new CanvasJS.Chart("chartContainer", {
                    data: [
                        {
            type: "spline",
                            dataPoints: result
                        }
                    ]
                });

                chart.render();
 setTimeout(refreshTable, 2000);
            });

}





    </script>
</head>
<body>

    <div id="chartContainer" style="width: 800px; height: 380px;"></div>
<a href="cleargraph.php"> Clear Data</a>

</body>
</html>


$（文档）.ready（函数（）{
刷新表（）；
});
函数刷新表（）{
$.getJSON（“graphdata.php”，函数（结果）{
var chart=new CanvasJS.chart（“chartContainer”{
数据：[
{
类型：“样条曲线”，
数据点：结果
}
]
});
chart.render（）；
setTimeout（refreshTable，2000）；
});
}

希望创建类似的东西，但行数/用户数每次都会改变

这里是我的新Json脚本。我只是不知道如何将类型：“line”，dataPoints:part放入json提要中。在Json创建中，或者在接收Json后使用javascript

     <?php

//Include database configuration file
include('dbConfig.php');

header('Content-Type: application/json');


    $data_points = array();

    $result = mysqli_query($db, "SELECT * FROM survey_scores");

    while($row = mysqli_fetch_array($result))
    {        
        $point = array("userid" => $row['user'], "x" => $row['test'] , "y" => $row['score'] );

        array_push($data_points, $point);        
    }

foreach($data_points as $element) {
        $out[$element['userid']][] = ['x' => $element['x'], 'y' => $element['y']];
}


   echo json_encode($out, JSON_PRETTY_PRINT);
  //  echo json_encode($data_points, JSON_NUMERIC_CHECK);

mysqli_close($db);

?>

因为您需要多序列图表，所以需要将不同的数据序列推送到数据中，而不是将结果分配给数据点。为此，您需要处理结果（JSON），以便将其更改为不同的数据系列。要将结果分离为不同数据系列的不同数据点，可以执行以下操作：

if (result[i].userid == "user1") {
    x = result[i].label.replace(/[- :]/g, ",").split(",");
    dataPoints[0].push({x: new Date(x[0], x[1], x[2], x[3], x[4], x[5]), y: result[i].y})
} else if(result[i].userid == "user2") {
    x = result[i].label.replace(/[- :]/g, ",").split(",");
    dataPoints[1].push({x: new Date(x[0], x[1], x[2], x[3], x[4], x[5]), y: result[i].y})
} else {
    x = result[i].label.replace(/[- :]/g, ",").split(",");
    dataPoints[2].push({x: new Date(x[0], x[1], x[2], x[3], x[4], x[5]), y: result[i].y})
}

一旦为不同的数据系列分离了数据点，现在就可以创建数据系列并将其推送到阵列中

for(var i = 0; i < dataPoints.length; i++) {
    if(dataPoints[i].length > 0) {
        myData.push({type: "line", dataPoints: dataPoints[i]})
    }
}

谢谢你的评论。我有两个问题。我应该修改json源代码以减少重新格式化吗？你提到的代码也有一些错误。我对javascript还是相当陌生，所以我提前道歉。在这个块

code

var dataPoints=[]中运行代码时，我遇到了一个错误；对于（var i=0；icode如果你能这样做，修改JSON会更可行。这里有一个实用的提琴：Beevk，虽然我确实看到了你在上面所做的事情，但我不知道它是否适用于我的用例。你知道我如何重新编写php JSON文件，以所需的图形格式为每个用户生成一个数组吗？你可以在中将标签转换为时间戳PHP并将此时间戳分配给JSON中的y。PHP和JS时间戳是不同的。因此，在将PHP时间戳分配给JSON之前，您需要将其转换为JS时间戳。您还可以为不同的用户ID在JSON中创建不同的数组元素。然后，在JS中只需获取正确的数组元素并将其分配给各自的数据序列.我想我的json已经接近应该的位置了，但我不确定我是否理解根据json将数组分配给元素块的过程

var chart = new CanvasJS("divId", {
    data: myData
})