CODEWITHSUNDEEP
javascriptphpchartscanvasjs
Manu Manohara
Manu Manohara

Reputation: 49

Php and Html chart using Canvas.js using mysql database

I am trying to fetch data from mysql database and plot a line graph using canvas.js way.....I just want to know how to pass values which I have fetched from database into the dataPoints: x and y values....i;e..X will contain Time and Y contains Temperature.I am trying to plot Time vs Temperature Graph here..

I have received these two data values from my database in php using this code.

$sql1 = "SELECT Time FROM sdata ORDER BY ID DESC LIMIT 10;";
$response1 = mysqli_query($connect, $sql1) or die(mysqli_error($connect));
while($row1 = mysqli_fetch_all($response1)){
    $r1[]= $row1;
}

$sql2 = "SELECT Temperature FROM sdata ORDER BY ID DESC LIMIT 10;";
$response2 = mysqli_query($connect, $sql2) or die(mysqli_error($connect));
while($row2 = mysqli_fetch_all($response2)){
    $r2[]= $row2;
}

Here when i give echo and see the r1 and r2 values I am able to see the database values....

--These are DateTime values from my database:

[[["8/30/2016 9:37"],["8/30/2016 9:33"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:31"],["8/30/2016 9:31"],["8/30/2016 9:31"]]]

--These are Temperature values from my database:

[[[25],[25],[28.91],[28.82],[28.84],[28.91],[29.05],[29.05],[28.92],[29.11]]]

Now i want to pass these varaibles to dataPoints: x and y as shown in below code:

<script type="text/javascript">
window.onload = function() {

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Line Chart"
        },
        axisX: {

            interval: 5,
            title: "Time",
            valueFormatString: "hh:mm TT",

        },
        axisY: {

            interval: 20,
            title: "Temp"

        },
        data: [{
            type: "line",
            dataPoints: ???????????(HOW DO I PASS THE r1 and r2 values here for x and y respectively so that it give me a line chart is my question)

        }]
    });
    chart.render();

}
</script>

Plz help me in this....

Upvotes: 1

Views: 1771

Answers (2)

Ashish Khatri
Ashish Khatri

Reputation: 493

You need to parse data in the format which CanvasJS accepts. Check the code below

$r1=[[["8/30/2016 9:37"],["8/30/2016 9:33"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:31"],["8/30/2016 9:31"],["8/30/2016 9:31"]]];

$r2=[[[25],[25],[28.91],[28.82],[28.84],[28.91],[29.05],[29.05],[28.92],[29.11]]];
$dataPoints=array();
for($i=0;$i<count($r1[0]);$i++){
    array_push($dataPoints,array('x'=> strtotime($r1[0][$i][0])*1000,'y'=>$r2[0][$i][0]));
}

var chart = new CanvasJS.Chart("chartContainer", {
.
.
dataPoints: <?php echo json_encode($dataPoints); ?> // edited
.
.
});

Upvotes: 3

Vishwas R
Vishwas R

Reputation: 3420

You can download CanvasJS Samples from this page, that includes rendering chart with data from mySQL database.

Upvotes: 4

Related Questions