MySQL DateTime - XAXIS HIGHCHART

时间:2017-08-03 09:50:49

标签: php mysql datetime highcharts

我是这个社区的新手。几天后,我正在尝试使用Highstock实现图表。该图表将显示随时间变化的温度监测。

这些值是通过PHP获取并存储在MySQL中的。我能够在Highchart的XAXIS中显示温度值,但不能显示DateTime。

我没有使用Javascript,如果我找到解决方案如何在Javascript中将DateTime转换为Timestamp并将其显示为DateTime,我认为我的问题可能会被发布。

请在下面找到我的代码:

    <?php

        //Récupération des valeurs stockées dans MySQL
        mysql_connect("localhost","root","root");       //connexion à la base de données mysql
        mysql_select_db("Chart");                       //connexion à la base de données concernées

?>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container">

<script>

<?php
        //récuparation de la colonne "value" dans le tableau "temperature"
        $query = mysql_query("SELECT value FROM inside_temp");
        while($ligne = mysql_fetch_array($query)){
                $inside_temp[] = $ligne[0];
        }
        //récupération de la colonne date dans le tableau date
        $query = mysql_query("SELECT date FROM inside_temp");
        while($row = mysql_fetch_array($query)){
                //$date_inside[] = $row[0];
                $date_inside_temp[] = strtotime($row[0]) *1000;
                $date_inside_temp[] = date_format($row[0]," Y-m-d H:i:s,");
        }
        //récuparation de la colonne "value" dans le tableau "temperature"
        $query = mysql_query("SELECT value FROM outside_temp");
        while($ligne = mysql_fetch_array($query)){
                $outside_temp[] = $ligne[0];
        }
        //récuparation de la colonne "value" dans le tableau "temperature"
        $query = mysql_query("SELECT value FROM thermostat_setpoint");
        while($ligne = mysql_fetch_array($query)){
                $therm_setpoint[] = $ligne[0];
        }
        //récuparation de la colonne "value" dans le tableau "temperature"
        $query = mysql_query("SELECT value FROM consumption");
        while($ligne = mysql_fetch_array($query)){
                $consumption[] = $ligne[0] / 1000;
        }

?>

    Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 4
        },

        title: {
                text: 'Consumption & Temperature monitoring'
        },

        subtitle: {
                text: 'Heating experiment - LTU, Summer 2017'
        },

        xAxis: {
                type: 'datetime',
                        //categories: [<?php echo join($date_inside_temp,',') ?>],
                        categories: Date.UTC(<?php echo $date_inside_temp;?>),
                tickInterval: 15,
                labels: {
                        format: '{value:%Y-%b-%e %H:%m}'
                }
        },

        yAxis: {
                title: {
                        text: 'Measured values (°C or kW)'
                        }
        },


        series: [{
                name: 'Wall plug consumption',
                data:[<?php echo join($consumption,',') ?>]

        }, {

                name: 'Inside temperature',
                data: [<?php echo join($inside_temp,',') ?>]

        }, {

                name: 'Thermostat setpoint',
                data:[<?php echo join($therm_setpoint,',') ?>]

        }, {

                name: 'Outside temperature',
                data:[<?php echo join($outside_temp,',') ?>]

     }] //fin de series

    });

The current result in picture

2 个答案:

答案 0 :(得分:2)

对于highcharts,您必须将dateTime不仅转换为时间戳,而且还应将时间戳转换为毫秒。

当我遇到这样的问题时。我在PHP中将dateTime转换为timeStamp,毫秒。在PHP中很方便。

<强> PHP

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box sidebar2">Sidebar 2</div>
  <div class="box content">Content
    <div class="panelwrap">
      <div class="panel">Panel A</div>
      <div class="panel">Panel B</div>
      <div class="panel tall-panel">Panel C</div>
      <div class="panel">Panel D</div>
      <div class="panel">Panel E</div>
      <div class="panel">Panel F</div>
      <div class="panel tall-panel">Panel G</div>
      <div class="panel tall-panel">Panel H</div>
      <div class="panel">Panel I</div>
      <div class="panel">Panel J</div>
      <div class="panel wide-panel">Panel K</div>
    </div>
  </div>
  <div class="box footer">Footer</div>
</div>

<强> MYSQL 这个查询CONVERT DATETIME到UNIX时间戳记

strtotime({your_dateTime})*1000

但是如果你只想在JavaScript中进行转换,那么:

converting-a-datetime-string-to-timestamp-in-javascript

how-do-you-get-a-timestamp-in-javascript

06.08.2017 - 更新

官方文档:  data-from-a-database如何从mysql获取数据并转换为highcharts。

php沙箱中的转换:php_sand_box

jsFiddle http://jsfiddle.net/1gbpzeho/

答案 1 :(得分:0)

请参阅Highcharts API on series.data.x

  

x:数字

     

该点的x值。对于日期时间轴,X值是自1970年以来以毫秒为单位的时间戳。

在您的代码中,您首先将>=转换为毫秒

<

然后在代码中添加日期时间格式

DateTime

然后,您尝试通过在混合日期对象数组上使用Date.UTC()将其转换回毫秒。

$date_inside_temp[] = strtotime($row[0]) *1000;