Dynamic Javascript Multiline Chart with dynamic datasets

Question

I'm trying to create a dynamic Javascript graph which will display multiple lines.

Each line should represent a unique user in a survey with the X axis = time and the y axis being the score 0-100. Each user will be responding to multiple questions throughout the survey which is why I have multiple data points for the same user.

The issue I have run into is I can't seem to find out how to dynamically create a new dataset for each unique user. Everything seems to be defining the datasets ahead of time.

My data looks like this. Sample MySQL Table

Based on the comments below I was able to modify my 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"
    }
]

}

The code i'm using. This is the HTML I was using to generate a single line graph on a refresh. I'm using Canvas JS but am open to any solution.

    <!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>

Looking to create something like this but the number of lines/users will change everytime.

Goal

Here iis my new Json script. I just cant figure out how to get the type: "line", dataPoints: part into the json feed. either in the Json creation or with javascript after receiving the Json.

     <?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);

?>

Bivek · Accepted Answer · 2017-03-27 06:23:18Z

1

Since you need multiSeries chart, you need to push different dataSeries to data instead of assigning result to dataPoints. For this, you need to process your result(JSON) in order to change it to different dataSeries. To separate the result into different dataPoints of different dataSeries, you can do something like this:

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})
}

Once you have separated dataPoints for different dataSeries, you can now create dataSeries and push it to array.

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

After, separating different dataSeries, you can simply assign this variable(myData) to the data of canvasjs

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

answered Mar 27, 2017 at 6:23

Bivek

1,39810 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chris Over a year ago

Thank you for your comment. I have two questions. Should I modify my json source to reduce the reformatting? i'm also getting some errors with the code you mentioned. I'm still pretty new to javascript so I apologize in advance. I'm getting a error when running your code in this block codevar dataPoints = []; for( var i = 0; i < result.length; i++) { 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}); code

Bivek Over a year ago

Modifying JSON would be more feasible if you can do so. Here is a working fiddle for you: jsfiddle.net/beevk/v5mzfysc

Chris Over a year ago

Beevk, While I do see what you did above I don't know if it will work for my use case. Do you know how I can re-write my php json file to generate an array for each user in the needed graph format?

Bivek Over a year ago

You can convert the label to timeStamp in PHP and assign this timeStamp to y in JSON. PHP and JS timeStamp are different. So, you'll need to convert PHP timeStamp to JS timeStamps before assigning it to JSON. You can also create different array elements in JSON for different userId. Then, all you need to do in JS is fetch correct array element and assign it to their respective dataSeries.

Chris Over a year ago

I think I got my json close to where it should be but I'm not sure I understand the assigning the array to the element piece in terms of my Json

Collectives™ on Stack Overflow

Dynamic Javascript Multiline Chart with dynamic datasets

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related