All geek questions in one place

How to get data from MySQL database in JavaScript to build a chart?

I'm trying to build a chart, and I need to get data from a MySQL database table in a JavaScript variable that will be in the following format: var variable1 = [[1, 19], [2, 11], [3, 14], [4, 16]]. The first number (column) becomes x, and the second becomes y on my chart. My table in a MySQL database looks like this (I simplified it a bit):

column1 column2
   1      19
   2      11
   3      14
   4      16

What is the easiest way to do this? I'm new to this, please excuse me for asking, which can be a very simple question.

EDIT:

Using Wart's answer, I encoded as follows. I made two files: HTML with JavaScript and a PHP file. Here is my HTML file:

<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <script language="javascript" type="text/javascript" src="flot/jquery.js"></script>       <!-- jQuery library -->
    <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>  <!-- Library with charts that I plan to use -->
    <script type="text/javascript">

    $.ajax({
       url : 'serv.php', // my php file
       type : 'GET', // type of the HTTP request
       success : function(result){ 
          var obj = jQuery.parseJSON(result);
          console.log(obj);
       }
    });

    </script>   
</head>
<body>
Hi
</body>
</html>

And this is my PHP file called serv.php , which is in the same directory as the HTML file:

<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "datadb";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 

    $sql = "SELECT column1, column2 FROM chartdata";  //This is where I specify what data to query
    $result = $conn->query($sql);
    echo json_encode($result);
?>

, , , null :

Object {current_field: null, field_count: null, lengths: null, num_rows: null, type: null}

?

+4
1

, , json ( ):

php (me is serv.php):

$data = array([1, 19], [2, 11], [3, 14], [4, 16]);
// replace $data by your code to select in DB
echo json_encode($data);

javascript-. "GET" javascript jQuery (jQuery ):

js :

$.ajax({
   url : 'serv.php', // your php file
   type : 'GET', // type of the HTTP request
   success : function(data){
      var obj = jQuery.parseJSON(data);
      console.log(obj);
   }
});

obj :

enter image description here

, , :

 - obj[0] contains [1, 19], obj[0][0] contains 1 and obj[0][1] contains 19
 - obj[1] contains [2, 11], obj[1][0] contains 2 and obj[1][1] contains 11 ...

variable1 obj

Edit :

, . , , , data.

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "datadb";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT column1, column2 FROM chartdata";  //This is where I specify what data to query
$result = mysqli_query($conn, $sql);

$data = array();
while($enr = mysqli_fetch_assoc($result)){
    $a = array($enr['column1'], $enr['column2']);
    array_push($data, $a);
}

echo json_encode($data);
+3

Source: https://habr.com/ru/post/1629119/

More articles:


All Articles