Highcharts xaxis关闭了几个小时

I'm pulling values from a MySQL database using PHP, and attempting to plot them using Highcharts. The problem I'm finding is the xaxis values seems to be off by 4 hours. Searching through past threads, some people place the useUTC: false in the global chart options, but it did not seem to work for me. global:{ useUTC: false }

Here is the code I'm using to set up the chart. I'm a javascript newbie, so it's very possible I did something stupid in here. Any suggestions?

 <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Temperature Data from XBee</title>

        <script src="js/jquery-1.11.1.min.js"></script> 

        <script type="text/javascript">

        $(document).ready(function() {
            var options = {
                chart: {
                        renderTo: 'container',
                        type: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                        title: {
                            text: 'Wireless Sensor Data: Temperature (F)',
                            x: -20 //center
                    },
                global: {
                    useUTC: false
                    },

                yAxis: {
                    title: {
                        text: 'temperature'
                            },
                    type: 'double',
                    min: 0,

                   },
                xAxis: {
                    title: {
                        text: 'time'
                            },
                    type: 'datetime'                
                   },

                 series: [{             
                    name: 'Temperature',
                    data: []
                     }]
                }

            $.getJSON("data.php", function(json) {
                options.series[0].data = json;
                chart = new Highcharts.Chart(options);
                });
            });   

        </script>

        <script src="js/highcharts.js"></script>    
        <script src="js/themes/grid-light.js"></script>  
    </head>
    <body>
        <div id="container" style="min-width: 800px; height: 800px; margin: 0 auto"></div>
    </body>
</html>

Here is my PHP code that queries the database and puts the data into the JSON format.

<?php
$con = mysql_connect("localhost","root","raspberry");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("xbee", $con);

$result = mysql_query("SELECT time, temperature FROM data WHERE time >= DATE_SUB(NOW(), INTERVAL 1 HOUR)");

$rows = array();
while($r = mysql_fetch_array($result)) {

    extract($r);
    $time = strtotime($r[0]);
    $time *=1000;
    $row[0] = $time;
    $row[1] = $r[1];
    array_push($rows,$row);
}

print json_encode($rows, JSON_NUMERIC_CHECK);

mysql_close($con);
?>

This is what my JSON format looks like.

 [[1414172722000,73.4],[1414172727000,73.4],[1414172732000,73.4],[1414172737000,75.2],[1414172742000,75.2],[1414172747000,75.2],[1414172753000,73.4],[1414172758000,75.2],[1414172763000,73.4],[1414172768000,75.2],[1414172773000,75.2],[1414172778000,75.2],[1414172783000,75.2],[1414172788000,73.4],[1414172793000,73.4],[1414172798000,75.2],[1414172803000,75.2],[1414172809000,75.2],[1414172814000,75.2],[1414172819000,75.2],[1414172824000,73.4],[1414172829000,75.2],[1414172834000,75.2],[1414172839000,75.2],[1414172844000,75.2],[1414172849000,75.2],[1414172854000,75.2],[1414172860000,75.2],[1414172865000,75.2],[1414172870000,75.2],[1414172875000,75.2],[1414172880000,75.2],[1414172885000,75.2],[1414172890000,75.2],[1414172895000,75.2],[1414172900000,75.2],[1414172905000,73.4],[1414172910000,75.2],[1414172916000,75.2],[1414172921000,75.2],[1414172926000,75.2],[1414172931000,75.2],[1414172936000,75.2],[1414172941000,75.2],[1414172946000,75.2],[1414172951000,75.2],[1414172956000,75.2],[1414172961000,75.2],[1414172966000,73.4],[1414172972000,75.2],[1414172977000,75.2],[1414172982000,73.4],[1414172987000,75.2],[1414172992000,75.2],[1414172997000,73.4],[1414173002000,75.2],[1414173007000,75.2],[1414173012000,75.2],[1414173017000,75.2],[1414173022000,75.2],[1414173028000,75.2],[1414173033000,75.2],[1414173038000,75.2],[1414173043000,75.2],[1414173048000,75.2],[1414173053000,75.2],[1414173058000,75.2],[1414173063000,71.6],[1414173068000,75.2],[1414173073000,75.2],[1414173079000,75.2],[1414173084000,75.2],[1414173089000,75.2],[1414173094000,75.2],[1414173099000,75.2],[1414173104000,75.2],[1414173109000,75.2],[1414173114000,75.2],[1414173119000,75.2],[1414173124000,75.2],[1414173129000,75.2],[1414173135000,75.2],[1414173140000,75.2],[1414173145000,75.2],[1414173150000,75.2],[1414173155000,75.2],[1414173160000,75.2],[1414173165000,75.2],[1414173170000,75.2],[1414173175000,75.2],[1414173180000,75.2],[1414173185000,75.2],[1414173191000,75.2],[1414173196000,75.2],[1414173201000,75.2],[1414173206000,75.2],[1414173211000,75.2],[1414173216000,75.2],[1414173221000,75.2],[1414173226000,75.2],[1414173231000,75.2],[1414173236000,75.2],[1414173241000,75.2],[1414173247000,75.2],[1414173252000,75.2],[1414173257000,75.2],[1414173262000,75.2],[1414173267000,75.2],[1414173272000,75.2],[1414173277000,75.2],[1414173282000,75.2],[1414173287000,75.2],[1414173292000,75.2],[1414173298000,75.2],[1414173303000,75.2],[1414173308000,75.2],[1414173313000,75.2],[1414173318000,75.2],[1414173323000,75.2],[1414173328000,75.2],[1414173333000,75.2],[1414173338000,75.2],[1414173343000,75.2],[1414173348000,75.2],[1414173354000,75.2],[1414173359000,75.2],[1414173364000,75.2],[1414173369000,75.2],[1414173374000,75.2],[1414173379000,75.2],[1414173384000,75.2],[1414173389000,75.2],[1414173394000,75.2],[1414173399000,75.2],[1414173404000,75.2],[1414173410000,75.2],[1414173415000,75.2],[1414173420000,75.2],[1414173425000,75.2],[1414173430000,75.2],[1414173435000,75.2],[1414173440000,75.2],[1414173445000,75.2],[1414173450000,75.2],[1414173455000,73.4],[1414173461000,75.2],[1414173466000,75.2],[1414173471000,75.2],[1414173476000,75.2],[1414173481000,75.2],[1414173486000,75.2],[1414173491000,75.2],[1414173496000,75.2],[1414173501000,73.4],[1414173506000,75.2],[1414173511000,75.2],[1414173517000,73.4],[1414173522000,75.2],[1414173527000,75.2],[1414173532000,75.2],[1414173537000,75.2],[1414173542000,75.2],[1414173547000,75.2],[1414173552000,73.4],[1414173557000,75.2],[1414173562000,75.2],[1414173567000,75.2],[1414173573000,75.2],[1414173578000,75.2],[1414173583000,75.2],[1414173590000,32],[1414173651000,75.2],[1414173711000,75.2],[1414173771000,73.4],[1414173831000,75.2],[1414173891000,73.4],[1414173951000,75.2],[1414174011000,73.4],[1414174071000,75.2],[1414174131000,73.4],[1414174191000,75.2],[1414174251000,71.6],[1414174311000,73.4],[1414174372000,73.4],[1414174432000,73.4],[1414174492000,73.4],[1414174552000,73.4],[1414174612000,73.4],[1414174672000,73.4],[1414174732000,73.4],[1414174792000,73.4],[1414174852000,73.4],[1414174912000,73.4],[1414174972000,73.4],[1414175032000,73.4],[1414175093000,73.4],[1414175153000,73.4],[1414175213000,73.4],[1414175273000,73.4],[1414175333000,73.4],[1414175393000,73.4],[1414175453000,73.4],[1414175513000,73.4],[1414175573000,73.4],[1414175633000,73.4],[1414175693000,73.4],[1414175753000,73.4],[1414175814000,73.4],[1414175874000,73.4],[1414175934000,73.4],[1414175994000,73.4],[1414176054000,73.4],[1414176114000,73.4],[1414176174000,73.4],[1414176234000,75.2],[1414176294000,75.2]]

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
dozr13344 2014-10-24 21:55
关注
I found a solution, not sure if this is the most elegant, but it is producing the correct results now. It looks like when using the strtotime conversion in PHP, it was using the default GMT timezone. In the PHP script, I added the date_default_time_set('UTC') and it works. Hopefully this will help someone in the future.

<?php $con = mysql_connect("localhost","root","raspberry"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("xbee", $con); $result = mysql_query("SELECT time, temperature FROM data WHERE time >= DATE_SUB(NOW(), INTERVAL 1 HOUR)"); $rows = array(); while($r = mysql_fetch_array($result)) { date_default_timezone_set('UTC'); extract($r); $time = strtotime($r[0]); $time *=1000; $row[0] = $time; $row[1] = $r[1]; array_push($rows,$row); } print json_encode($rows, JSON_NUMERIC_CHECK); mysql_close($con); ?>
解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

前端highcharts图表问题 css3 html5 前端
2022-01-17 18:52

回答 1 已采纳 lenged 应该可以设置吧 Documentation - Apache ECharts ECharts, a powerful, i
HighCharts线图的多个x系列数据 javascript jquery php
2013-05-06 13:43

回答 1 已采纳 The answer to this question may be what you are looking for: Is it possible in highcharts to have
Highcharts不显示x轴的所有内容 laravel php
2016-11-17 05:54

回答 1 已采纳 Set width of container to greater value.
一文带你快速上手Highcharts框架
2022-04-28 18:00

水星记_的博客一文带你快速上手Highcharts框架
怎么往highcharts heatmap每个单元格里面定义文字内容
2016-03-28 10:07

回答 1 已采纳以前用过，找对应调用的js方法，可以改的
悬停时的Highcharts饼图不透明度变化 javascript jquery php
2019-04-02 09:46

回答 1 已采纳 You can change the opacity property in the inactive state: plotOptions: { pie: { stat
使用highcharts api和mysql显示饼图 javascript mysql php
2019-03-06 04:49

回答 2 已采纳 here is the answer to plot pie chart using highcharts api. when data is in horizontal format.
大屏大概是怎么个开发法（前端）
2023-09-25 09:45

JianZhen✓的博客有大有小的散落着）（相关文章）项目中获取各类时间的地方不少，用的是dayjs 大屏的页面，需求用到无缝滚动列表vue3-seamless-scroll，这个很好用，常用的属性就那么几个，引入后使用，完成列表滚动，说真的这个...
从PHP获取highcharts图像URL json php
2018-05-17 17:20

回答 2 已采纳 I suspect your issue is here: curl_setopt($ch, CURLOPT_POSTFIELDS, $dataString); I believe this
PHP和Highcharts php
2016-11-16 07:10

回答 1 已采纳 You need to create highcharts with your "options " var for example if using highcharts : $(docu
如何在highcharts中显示所有数据？ [关闭] mysql php
2017-04-03 21:53

回答 1 已采纳 Your query has limit set to 10 durasistudi = (new \yii\db\Query()) ->select(['TahunMa
highCharts 设置标示线
2022-10-18 21:01

九持的博客 highcharts的图表配置千千万，需要改个内容需要去看文档，最难受的是文档有些不全，大部分还是英文，想要搞明白太费时间了，往往一个小细节就要花一两个小时才能找到关键位置进行修改。有想着找个一劳永逸的方案，...
highcharts怎么后台查询数据库赋值到前台 java 数据库
2018-12-06 06:13

回答 2 已采纳把请求数据放外面 , 请求数据成功之后再执行 Highcharts.chart('container1', { 图表详细设置 }) , 会更好
highcharts实现多色带折线图
2018-01-02 19:43

cas_nj的博客之前项目中使用highchart绘制了几个统计图，搜寻了许久才找到多色带的实现方式，故做此分享，供大家参考。实现的效果图如下：代码： Document $(document).ready(function() { var chart...
highecharts在线制作柱状图、饼图的几个代码技巧。
2023-12-17 20:20

韭菜盒子白菜饺子的博客 }, legend: { enabled: true, // 设置为 false 关闭图例 itemStyle: { color: 'black', // 图例字体颜色 fontSize: 14 // 图例字体大小 } }, subtitle: { text: '数据来源: WorldClimate.com' }, xAxis: { ...
没有解决我的问题, 去提问

悬赏问题

¥15 Python输入字符串转化为列表排序具体见图，严格按照输入
¥20 XP系统在重新启动后进不去桌面，一直黑屏。
¥15 opencv图像处理，需要四个处理结果图
¥15 无线移动边缘计算系统中的系统模型
¥15 深度学习中的画图问题
¥15 java报错:使用mybatis plus查询一个只返回一条数据的sql，却报错返回了1000多条
¥15 Python报错怎么解决
¥15 simulink如何调用DLL文件
¥15 关于用pyqt6的项目开发该怎么把前段后端和业务层分离
¥30 线性代数的问题，我真的忘了线代的知识了

Highcharts xaxis关闭了几个小时

1条回答 默认 最新

悬赏问题

1条回答默认最新