CODEWITHSUNDEEP
javascriptjsonchartscanvasjs
Chris
Chris

Reputation: 1

Dynamic Javascript Multiline Chart with dynamic datasets

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

?>

Upvotes: 0

Views: 1716

Answers (1)

Bivek
Bivek

Reputation: 1398

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

Upvotes: 1

Related Questions