Javascript 将PHP解析的JSON数据从MySQL馈送到Morris.js图表_Javascript_Php_Mysql_Json_Morris.js

Javascript 将PHP解析的JSON数据从MySQL馈送到Morris.js图表

javascript php mysql json

Javascript 将PHP解析的JSON数据从MySQL馈送到Morris.js图表,javascript,php,mysql,json,morris.js,Javascript,Php,Mysql,Json,Morris.js,潜入一个新项目，尝试自学JSON、PHP、MySQL和Morris.js 了解我正在努力实现的目标的一些背景我有一个PHP文件，它可以转到一个网页并获取JSON数据。（现在我只是把它设置成可以抓取所有东西）。然后，它将获取的数据放入mysql数据库。我现在已经设置了一个Cron作业，每1分钟运行一次这个文件，这样我就可以得到一些流入这个数据库的数据 <?php //connect to mysql db $con = mysql_connect('localhost','user','p

潜入一个新项目，尝试自学JSON、PHP、MySQL和Morris.js

了解我正在努力实现的目标的一些背景

我有一个PHP文件，它可以转到一个网页并获取JSON数据。（现在我只是把它设置成可以抓取所有东西）。然后，它将获取的数据放入mysql数据库。我现在已经设置了一个Cron作业，每1分钟运行一次这个文件，这样我就可以得到一些流入这个数据库的数据

<?php
//connect to mysql db
$con = mysql_connect('localhost','user','password',"") or die('Could not connect: ' . mysql_error());
//connect to the database
mysql_select_db('database', $con);

//read the json file contents
$jsondata = file_get_contents('http://192.168.10.243/j');

//convert json object to php associative array
$data = json_decode($jsondata, true);

//get the device details
$id = $data['data']['id'];
$type = $data['data']['type'];
$detector = $data['data']['detector'];
$cpm = $data['data']['cpm'];
$temperature = $data['data']['temperature'];
$uptime = $data['data']['uptime'];

//insert into mysql table
$sql = "INSERT INTO database_table_1(id, type, detector, cpm, temperature, uptime)
VALUES('$id', '$type', '$detector', '$cpm', '$temperature', '$uptime')";
if(!mysql_query($sql,$con))
{
    die('Error : ' . mysql_error());
} 
?>

现在我的计划是让这些信息使用morris.js charts更新网页上的一个或多个图表。下面是我当前的index.html页面，PHP脚本和morris.js部分位于底部附近

<!DOCTYPE html>
<html lang="en">

<!-- morris.js dependencies -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Chart V0.1</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/simple-sidebar.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>

    <div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Start Bootstrap
                </a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
  <div id="myfirstchart" style="height: 300px;"></div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Simple Sidebar</h1>
                    <p> This template has a responsive menu toggling system.</p>
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

<!-- PHP from Mysql to Json array -->
<?php
//open connection to mysql db
$connection = mysqli_connect('localhost','user','password','database_table_1') or die("Error " . mysqli_error($connection));

//fetch table rows from mysql db
$sql = "select * from database_table_1";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));

//create an array
$emparray[] = array();
while($row =mysqli_fetch_assoc($result))
{
   array_push(
    $emparray,
    array( 
       'a' => $row['timestamp'],
       'w' => $row['id'],
       'x' => $row['cpm'],
       'y' => $row['temperature'],
       'Z' => $row['uptime']
         )
              );
 }

   // $emparray[] = $row;
   echo json_encode($emparray);

   //close the db connection
   mysqli_close($connection);
?>
<!-- Json Pull -->
<script>
     Morris.Area({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on the chart.
    data: <?php echo json_encode($emparray);?>, 
  // The name of the data record attribute that contains x-values.
  xkey: 'a',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['x'],
  // Labels for the ykeys -- will be displayed when you hover over the chart.
  labels: ['x-test'] 
  });
</script>

<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
</script>


图V0.1






简单边栏
此模板具有响应菜单切换系统
莫里斯地区({
//要在其中绘制图表的元素的ID。
元素：“myfirstchart”，
//图表数据记录——此数组中的每个条目对应于图表上的一个点。
数据：，
//包含x值的数据记录属性的名称。
xkey:'a'，
//包含y值的数据记录属性的名称列表。
ykeys:['x']，
//当您将鼠标悬停在图表上时，将显示YKEY的标签。
标签：['x-test']
});
$（“#菜单切换”）。单击（功能（e）{
e、 预防默认值（）；
$（“#包装器”）.toggleClass（“toggled”）；
});

到目前为止，我已经了解了这个新项目的大部分内容，不过我目前还不知道如何从PHP脚本中提取数据并将其提供给morris.js图表。我希望它能让图表每1分钟更新一次，morris.js图表能从我的PHP脚本中获取数据

任何帮助、想法、链接或最佳实践都会大有帮助。我的编码经验很少，所以我提前道歉

多谢各位

更新：

我从HTML页面迁移了PHP脚本，并尝试通过HTML页面中的$.getJSON调用PHP结果。尽管我仍然无法让morris.js使用解析的数据。我连图表都没有，有什么想法吗

    <!-- Ajax  -->
<script>
$.getJSON('export_php_test_1.php', function( data ){
     Morris.Area({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on the chart.
    data: data,  
  // The name of the data record attribute that contains x-values.
  xkey: 'a',
  // A list of names of data record attributes that contain y-values.
  ykeys: 'x',
  // Labels for the ykeys -- will be displayed when you hover over the chart.
  labels: 'x-test' 
  });
});
</script>


$.getJSON（'export\u php\u test\u 1.php'，函数（数据）{
莫里斯地区({
//要在其中绘制图表的元素的ID。
元素：“myfirstchart”，
//图表数据记录——此数组中的每个条目对应于图表上的一个点。
数据：数据，
//包含x值的数据记录属性的名称。
xkey:'a'，
//包含y值的数据记录属性的名称列表。
ykeys:'x'，
//当您将鼠标悬停在图表上时，将显示YKEY的标签。
标签：“x测试”
});
});

您可以使用。以下代码将在60秒后自动刷新整个html页面

如果只想刷新图表部分，那么必须将内联php代码删除到单独的源代码中，并使用Ajax为morris获取数据。如果您这样做，那么您可以使用JS函数setInterval定期运行Ajax。

Sweet元刷新效果很好。现在我将开始研究如何通过Ajax获取数据。当您的意思是“将内联PHP代码删除到单独的源代码”时，您的意思是让Ajax从index.html页面之外的其他位置调用PHP文件吗？是的，将该代码放在单独的PHP文件中（例如chart data.PHP）。然后使用Ajax访问chart-data.php。如果使用jQuery，那么就可以轻松地执行Ajax get请求。

<!DOCTYPE html>
<html lang="en">

<!-- morris.js dependencies -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Chart V0.1</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/simple-sidebar.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>

    <div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Start Bootstrap
                </a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
  <div id="myfirstchart" style="height: 300px;"></div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Simple Sidebar</h1>
                    <p> This template has a responsive menu toggling system.</p>
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

</div>
<!-- /#wrapper -->

<!-- PHP from Mysql to Json array -->
<?php
//open connection to mysql db
$connection = mysqli_connect('localhost','user','password','database_table_1') or die("Error " . mysqli_error($connection));

//fetch table rows from mysql db
$sql = "select * from database_table_1";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));

//create an array
$emparray[] = array();
while($row =mysqli_fetch_assoc($result))
{
   array_push(
    $emparray,
    array( 
       'a' => $row['timestamp'],
       'w' => $row['id'],
       'x' => $row['cpm'],
       'y' => $row['temperature'],
       'Z' => $row['uptime']
         )
              );
 }

   // $emparray[] = $row;
   echo json_encode($emparray);

   //close the db connection
   mysqli_close($connection);
?>
<!-- Json Pull -->
<script>
     Morris.Area({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on the chart.
    data: <?php echo json_encode($emparray);?>, 
  // The name of the data record attribute that contains x-values.
  xkey: 'a',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['x'],
  // Labels for the ykeys -- will be displayed when you hover over the chart.
  labels: ['x-test'] 
  });
</script>

<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});
</script>

    <!-- Ajax  -->
<script>
$.getJSON('export_php_test_1.php', function( data ){
     Morris.Area({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on the chart.
    data: data,  
  // The name of the data record attribute that contains x-values.
  xkey: 'a',
  // A list of names of data record attributes that contain y-values.
  ykeys: 'x',
  // Labels for the ykeys -- will be displayed when you hover over the chart.
  labels: 'x-test' 
  });
});
</script>