Php and Html chart using Canvas.js using mysql database

Question

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

Vishwas R · Accepted Answer · 2016-11-10 12:40:02Z

4

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

answered Nov 10, 2016 at 12:40

Vishwas R

3,4301 gold badge20 silver badges41 bronze badges

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

4 Comments

Manu Manohara Over a year ago

@Vishwas....Yes i went through that already..but they have given direct values in dataPoints like: dataPoints: [ { x: 10, y: 45 }, ]....But i want to to give values fetched from database table..like: dataPoints: "select time from sdata";...something like this...here static values are in examples ..I want to give database values for x and y....

Vishwas R Over a year ago

@manu-manohara, I just downloaded, checked and found dataPoints are read from database and not static like [ { x: 10, y: 45 }, ].... dataPoints line looks like 'dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>' where $dataPoints is read from 'canvasjs_db' database. Kindly download and check.

Manu Manohara Over a year ago

....So can you plz help me out in how to put my database values for x and y axis respectively...My database values which I have in my db is Time and Temperature....So i want to fetch these values and fed them to x and y axis respectively...Which I am not able to find out from past week...plz help...

Manu Manohara Over a year ago

....So can you plz help me out in how to put my database values for x and y axis respectively...My database values which I have in my db is Time and Temperature....So i want to fetch these values and fed them to x and y axis respectively...Which I am not able to find out from past week...plz help

Rishabh Rajgarhia · Accepted Answer · 2016-11-22 12:55:21Z

3

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

edited Nov 22, 2016 at 12:55

Rishabh Rajgarhia

7485 silver badges11 bronze badges

answered Nov 16, 2016 at 10:19

Ashish Khatri

4935 silver badges14 bronze badges

2 Comments

Manu Manohara Over a year ago

Khatri....Thanks for the reply...I tried as you said, but not displaying any values in the graph....But when i echo the datapoints I am able to see the values of x and y respectively but the chart is not displaying anything, infact the chart module is only not shown when i run it...

Ashish Khatri Over a year ago

@ManuManohara I tested the code and it is working fine at my end. Could you please share your new PHP code and the error you are facing, so that I can look into it properly and resolve the issue.

Collectives™ on Stack Overflow

Php and Html chart using Canvas.js using mysql database

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related