Home › Forums › Chart Support › How can I use PHP MySQL Dynamic data

How can I use PHP MySQL Dynamic data

Viewing 8 posts - 46 through 53 (of 53 total)
1 2 3 4

Tagged: , , ,

  • April 21, 2018 at 10:28 pm #20422

    connect.javed001

    Hello sir, I am storing sensor data in mysql database ,now I want to use canvasJS to show realtime data from mysql database on web page.
    Jquery code for updating chart data 

    function fData(){
    var lastid= $('#lastId').val(); 
   $.ajax({
                        url: httppath+"pages/fetchData",
                        type: "post",
                        data:{pId:$('#pid').val(),'lastId':lastid},
                        dataType:"json",
                        success: function (res) {
                             if(res['Pt']!=='' || res['Pt']!=" "){
                               $('#lastId').val(res["Pt"]['id']);
                                 updateChart(res['Pt']);
                             }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
//                           console.log(textStatus, errorThrown);
                        }
                    });
}   
   var dps = []; // dataPoints
   var xVal;
   var yVal;	
   var chart = new CanvasJS.Chart("chartContainer",{
      	title :{
      		text: "Live Data"
      	},
      	axisX: {						
      		title: "Axis X Title"
      	},
      	axisY: {						
      		title: "Pulse Rate"
      	},
      	data: [{
      		type: "line",
      		dataPoints : dps
      	}]
      });

      chart.render();
      
      var updateChart = function (data) {
      	yVal = data['sensor_value'];
      	dps.push({x: xVal,y: yVal});
      	console.log(dps);
        xVal++;
        if (dps.length >  10 )
      	{
      		dps.shift();				
      	}
      	chart.render();		
	// update chart after specified time. 
      };
    April 23, 2018 at 10:15 am #20427

    Indranil

    @connect-javed001,

    Please check this sample project to create dynamic charts using data from MySQL database in PHP. Also, please refer to this documentation page to create a Live Updating Charts from JSON API & AJAX.
    Dynamic Chart with Data from external JSON

    ___________
    Indranil Deo,
    Team CanvasJS

    December 21, 2018 at 3:18 am #23818

    gereby

    I have a somewhat similiar case. I want to create a dynamic Chart from an Mysql-DB

    Unfortunatelly, I get the Msg “TypeError: chart is undefined”
    I am “only” a Graphic Designer and no programmer :()

    =============================================================================================================
    SCRIPT
    =============================================================================================================

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

  <script type="text/javascript">
	var updateInterval = 100;
	var chart;
	var dps;
	$(document).ready(function () {

		$.getJSON("testdata.php", function (result) {
			dps = result;
			var chart = new CanvasJS.Chart("chartContainer", {
				title:{
					text: "Test",
				},
				axisY:{
					minimum: 0,
					maximum: 1000
				},
				data: [
					{
						type: "stackedBar",
						dataPoints: dps
					}
				]
			});
			
		chart.render();
	});

var updateChart = function () {
	$.getJSON("testdata.php", function (result) {
		dps.splice(0, dps.length);
		$.each(result, function (index, value) {
			dps.push(value);
		});
	});

chart.render();
};

setInterval(function(){updateChart()}, updateInterval);

});

</script> 
</head>
<body>
BODY
    <div id="chartContainer" style="width: 800px; height: 380px;"></div>

</body>
</html>

    =============================================================================================================
    DATA
    =============================================================================================================

    <?php

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

$con = mysqli_connect("localhost","wp1","QPZBtAe7","wp1");

// Check connection
if (mysqli_connect_errno($con))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
    $data_points = array();
    
    $result = mysqli_query($con, "SELECT id,Laserschneider_Druckluft_Volumenstrom_Nm3h FROM blb ORDER BY id DESC LIMIT 500");
    
    while($row = mysqli_fetch_array($result))
    {        
        $point = array("label" => $row['id'] , "y" => $row['Laserschneider_Druckluft_Volumenstrom_Nm3h']);
        array_push($data_points, $point);        
    }
    
    echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);
    December 21, 2018 at 2:57 pm #23824

    Vishwas R

    @gereby,

    The issue seems to be with the scope of the variables – chart, please refer this stackoverflow thread for more info on scope of a variable in JavaScript. Please find the working code-snippet below.

    var updateInterval = 100;
var chart;
var dps;
$(document).ready(function() {
	$.getJSON("testdata.php", function(result) {
		dps = result;
		chart = new CanvasJS.Chart("chartContainer", {
			title: {
				text: "Test",
			},
			axisY: {
				minimum: 0,
				maximum: 1000
			},
			data: [{
				type: "stackedBar",
				dataPoints: dps
			}]
		});

		chart.render();
	});

	var updateChart = function() {
		$.getJSON("testdata.php", function(result) {
			dps.splice(0, dps.length);
			$.each(result, function(index, value) {
				dps.push(value);
			});
		});

		chart.render();
	};

	setInterval(function() {
		updateChart()
	}, updateInterval);
});

    Please take a look at this php file for complete code.

    —
    Vishwas R
    Team CanvasJS

    May 12, 2019 at 3:58 pm #25145

    Ganesh

    Hi, I am trying to implement CanvasJS in my code so that I can display my mysql data in different charts and apply filter later like Select results Year wise, Department wise

    But I am getting the plain text displayed in webpage when I follow this code like this :

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
[{"label":"Sample size calculation","y":42},{"label":"Statistical analysis","y":206},{"label":"Data management","y":25},{"label":"Research method","y":7},{"label":"Writing a manuscript","y":2},{"label":"Health technology assessment \/ Economic Evaluation","y":7},{"label":"Data Logical","y":5},{"label":"Others","y":2}]<div id="chartContainer" style="height: 380px; width: 800; margin: 0px auto;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    
    <script src="jquery.js"></script>
    <script src="canvasjs.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $.getJSON("getjson.php", function (result) {

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

                chart.render();
            });
        });
    </script>
</body>
</html>

    I have two php files like you suggested:
    1. getjson.php
    2. render.php

    1. getjson.php

    <?php

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

include "console/connect_db.php";

    $data_points = array();
    $sql = "SELECT COUNT(*) as count,a.id_skill,s.skill FROM appointment a,skills_data s WHERE 
        a.id_skill=s.id_skill and a.ap_status ='complete' GROUP BY `id_skill`";
    $result = $conn->query($sql);
    while($row = $result->fetch_assoc())
    {
        $point = array("label" => $row['skill'] , "y" => $row['count']);
        
        array_push($data_points, $point);
    }
    
    echo json_encode($data_points, JSON_NUMERIC_CHECK);

?>

    2. render.php

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
require "getjson.php";
?>
<div id="chartContainer" style="height: 380px; width: 800; margin: 0px auto;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    
    <script src="jquery.js"></script>
    <script src="canvasjs.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $.getJSON("getjson.php", function (result) {

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

                chart.render();
            });
        });
    </script>
</body>
</html>
    May 14, 2019 at 6:34 pm #25171

    Manoj Mohan

    @ganesh,

    Removing the following line seems to be working fine require "getjson.php";. If the issue still persists, kindly share sample project along with sample database over Google Drive or Onedrive so that we can run it locally at our end, understand the issue better and help you out.

    ——
    Manoj Mohan
    Team CanvasJS

    September 7, 2021 at 12:46 pm #35635

    m.usman

    can we use dates in x-axis in dynamic charts

    September 8, 2021 at 6:25 pm #35652

    Manoj Mohan

    @m-usman,

    Yes, you can use datetime in x-axis. In order to use datetime in x-axis, you need to first convert PHP date to timestamp using strtotime and then convert PHP timestamp to JavaScript timestamp by multiplying it with 1000. 

    $phpDate = date("Y-m-d h:i:sa");
$phpTimestamp = strtotime($phpDate);
$javaScriptTimestamp = $phpTimestamp * 1000;

    You can refer to this thread for more information on using datetime on x-axis in PHP. Also, you can check out this gallery page for an example on using JavaScript timestamp in x-axis in PHP.

    —-
    Manoj Mohan
    Team CanvasJS

Viewing 8 posts - 46 through 53 (of 53 total)
1 2 3 4

Tagged: , , ,

You must be logged in to reply to this topic.