使用 highcharts 将 mysql 数据库中的动态数据添加到折线图

2024-04-18

我想使用 ajax 或 json 将数据点添加到我的折线图中,现在我必须重新加载整个网页才能在图表上显示我的新数据。但我想通过添加如下链接的点来显示实时数据:

jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/ http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/

www.highcharts.com/studies/live-server.htm http://www.highcharts.com/studies/live-server.htm

我试图从 mysql 检索数据并通过 json 添加到图表上,但什么也没发生。这是我在 live-server-data.php 中的代码:

<?php

header("Content-type: text/json");


 include_once 'include/connection.php';
 $db = new DB_Class(); 


     $query = "select distinct idchip from datatable ";
     $result = mysql_query( $query );
     $rows = array();
     $count = 0;

     while( $row = mysql_fetch_array( $result ) ) {
         $SQL1 =     "SELECT datetime,temperature FROM `datatable` WHERE idchip=".$row['0']." datetime DESC limit 0,1 ";

        $result1 = mysql_query($SQL1);

        while ($rows = mysql_fetch_array($result1)) {
           $data[] = $rows['1'];
           $datatime[] = 'moment('.$rows['0'].').valueOf()';
        }

        // The x value is the current JavaScript time, which is the Unix time multiplied 
        // by 1000.
        $x = $datatime;
        // The y value is a random number
        $y = $data;
     }


// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>

这就是我用来获取数据并在 index.php 页面的图表上显示的方法。

var chart; // global
   /**
     * Request data from the server, add it to the graph and set a timeout to request again
     */
    function requestData() {
        $.ajax({
            url: 'live-server-data.php', 
            success: function(point) {
                var series = chart.series[0],
                    shift = series.data.length > 20; // shift if the series is longer than 20

                // add the point
                chart.series[0].addPoint(eval(point), true, shift);

                // call it again after one second
                setTimeout(requestData, 1000);  
            },
            cache: false
        });
    }

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'spline',
                events: {
                    load: requestData
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'Value',
                    margin: 80
                }
            },
            series: [{
                name: 'Random data',
                data: []
            }]
        });     
    });

这是我的图表,我现在重新加载页面以获取新数据,但我想向图表添加新点以“实时”


我假设您在图中有多个系列,其中后端每次为每个系列提供一个点。

为了简单起见,我建议您以毫秒为单位返回时间。我对 PHP 不太了解,但我想重点很清楚

<?php

header("Content-type: text/json");


 include_once 'include/connection.php';
 $db = new DB_Class(); 


     $query = "select distinct idchip from datatable ";
     $result = mysql_query( $query );
     $rows = array();
     $count = 0;

     while( $row = mysql_fetch_array( $result ) ) {
         $SQL1 =     "SELECT datetime,temperature FROM `datatable` WHERE idchip=".$row['0']." ORDER BY datetime DESC limit 0,1 ";

        $serie = new StdClass;
        $serie->name = $row['0'];
        $result1 = mysql_query($SQL1);

        $points = array();
        while ($rows = mysql_fetch_array($result1)) {
           $points[] = array(strtotime($rows['0']) * 1000, $rows['1']);
        }

        $serie->data = $points;
        $series[] = $serie;
     }


// Create a PHP array and echo it as JSON
$ret = $series;
echo json_encode($ret);
?>

客户端代码将是:

var chart;
var chartSeries = {};
var latestTimeReported = {};

function requestData() {

  $.ajax({
    url: 'live-server-data.php',
    success: function(seriesUpdate) {

      //in case initializer of highcharts is too quick - skip the update
      if (!chart) {
        setTimeout(requestData, 1000);
        return;
      }

      $.each(seriesUpdate, function (serieIndex, serieUpdate) {
        var existingSerie = chartSeries[serieUpdate.name];
        var newPoint = serieUpdate.data[0];
        var lastInsertedTime = latestTimeReported[serieUpdate.name];          

        if (lastInsertedTime  && lastInsertedTime < newPoint[0]) {
          console.log('Attempt inserting old data!!!!');
          return;
        }

        latestTimeReported[serieUpdate.name] = newPoint[0];

        if (existingSerie) {
          var shift = existingSerie.data.length > 20;
          existingSerie.addPoint(newPoint , true, shift);
        } else {
          var newSerie = chart.addSeries({                        
            name: serieUpdate.name,
            data: serieUpdate.data
          }, true);
          chartSeries[serieUpdate.name] = newSerie;
        }

      });

      // call it again after one second
      setTimeout(requestData, 1000);
    },
    cache: false
  });
}

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: []
    });

您可以在此处查看新更新的示例http://plnkr.co/edit/OqMofEGDadF9J3Uit8qD http://plnkr.co/edit/OqMofEGDadF9J3Uit8qD

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 highcharts 将 mysql 数据库中的动态数据添加到折线图 的相关文章

  • 使用 Javascript eval() 100% 安全吗?

    我正在编写一个生成 Javascript 代码的 PHP 库 Javascript 代码有许多名为component001 component002 etc 页面通过 AJAX 动态加载 我需要通过 URL 变量传递组件的名称 然后由脚本进
  • 在 jQuery 中获取 CSS 规则的百分比值

    假设规则如下 largeField width 65 有没有办法以某种方式恢复 65 而不是像素值 Thanks EDIT 不幸的是 在我的例子中使用 DOM 方法是不可靠的 因为我有一个导入其他样式表的样式表 因此cssRules参数以以
  • PHP 的 mb_internal_encoding 实际上是做什么的?

    根据 PHP 网站 http www php net manual en function mb internal encoding php它这样做 coding 是用于 HTTP 输入的字符编码名称 字符编码转换 HTTP输出字符编码 转
  • Oracle Blob 在 PHP 页面中作为 img src

    我有一个网站当前使用文件服务器上的图像 这些图像显示在页面上 用户可以根据需要拖放每个图像 这是使用 jQuery 完成的 图像包含在列表中 每张图片都非常标准 img src network path image png height 8
  • 当表格在 IE 中获得焦点时,表格滚动条会向上跳跃

    问题 我有一个table有包装的div with overflow y auto 一旦table获得焦点 滚动条向上跳 我怎样才能防止这种情况发生 我经历过这种行为IE9 不在 Chrome 中 请注意 我已添加tabindex到桌子上 以
  • PHP 致命错误:未找到“MongoClient”类

    我有一个使用 Apache 的网站 代码如下 当我尝试访问它时 我在 error log 中收到错误 PHP Fatal Error Class MongoClient not found 以下是可能错误的设置 但我认为没有错误 php i
  • Doctrine2:入门教程“没有要处理的元数据类”

    我已经将本教程的第一部分运行了三遍 到目前为止 在这里或其他地方进行的大量搜索都无法帮助我使其发挥作用 我收到 没有要处理的元数据类 当我尝试时 php vendor bin doctrine orm schema tool update
  • 从关系中合并 Laravel 中的集合

    假设我有 3 张桌子 Images Subject Style 关系是多对多 图像 主题 和多对多 图像 样式 现在我想做一些类似的事情 result subjectResult gt images gt merge styleResult
  • selenium-webdriver 与 webdriverjs 有什么区别(以及何时使用)?

    我是一位使用 selenium webdriver 的经验丰富的专业人士 我正在探索有关如何测试 javascript 应用程序的更多选项 我发现了 webdriverJs 不幸的是 我不明白这两者 2 之间有什么区别 有人可以解释一下何时
  • 如何上传文件 - sails.js

    我可以下载图像和 pdf 但无法下载文档文件 doc pptx odt 下载文档 doc pptx odt 时 仅将其下载为 ZIP XML 文件 我可以做什么 我在用着 填写上传文件文档 https github com balderda
  • 计算特定产品类别的购物车商品数量

    我试图仅从 WooCommerce 中的特定产品类别获取购物车中的商品数量 我正在为一家酒厂做一个网站 它有酒精和非酒精产品 所有葡萄酒都属于 葡萄酒 主类别或类别 ID 34 其下有许多子类别和产品 对于属于此类别的任何商品 我需要知道此
  • Promise 构造函数回调的主体何时执行?

    假设我有以下代码构造一个Promise function doSomethingAsynchronous return new Promise resolve gt const result doSomeWork setTimeout gt
  • 不可见的 reCAPTCHA - 缺少必需的参数:sitekey

    我正在为每个带有具有类的按钮的表单动态加载不可见的 reCAPTCHAg recaptcha 我遇到的问题是验证码未正确加载 我不知道为什么 我按照验证码网站上的文档进行操作 但我不确定如何以及为什么会出现此错误 Uncaught Erro
  • mysql 数据库正在复制,但在主服务器上创建的用户未在从服务器上复制

    在主从复制中 我们使用 mysql DB 在从服务器上复制少量数据库 我在主服务器上创建了一个用户 不幸的是它没有在从服务器上复制 Replicate Do DB app1 app2 mysql 用户创建命令 GRANT SELECT on
  • window.open 使用 css 样式

    我想设计我的 window open 目前 我的网页上有一些项目由于解析了某个类而打开 然后在新窗口中打开指定的文本 我想更改字体大小 字体和填充等 这是我的 JavaScript 代码
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲
  • 指定在任何 Jest 设置发生之前运行的代码

    tl dr 是 1 我怎样才能让Jest使用原生的require函数可以在任何地方加载我的测试中的所有模块 2 我将在哪里 如何进行修改 即替换为esm加载程序 https github com standard things esm ht
  • 如何从react-bootstrap复选框获取值/属性?

    我正在尝试使用反应引导复选框 https react bootstrap github io components html forms controls https react bootstrap github io components
  • 将 Angular Web 组件 EventEmitter 监听到 javascript

    我在以下工具的帮助下创建了一个小型网络组件本文 https medium com IMM9O web components with angular d0205c9db08f使用角度元素 其中包括 Input and Output 我能够将
  • R闪亮:使用闪亮的JS从数据表中获取信息

    我想读出所有列名称以及它们在数据表中显示的顺序 由于不同的原因 我无法使用 stateSave 等选项 我对 JS 没有什么把握 但我确信用它可以完成 所以我需要你帮助我 我尝试过类似的代码片段 datatable data callbac

随机推荐

  • NSOpenPanel 的 setDirectoryURL 不起作用

    我正在尝试使用 NSOpenPanel 的新方法并设置其初始目录 问题是它只在第一次起作用 之后它只是 记住 最后选择的文件夹 这是我不想要的 我必须使用已折旧的 runModalForDirectory file 才能使其工作 它不太理想
  • 运行单元测试时如何禁用 PostSharp?

    我希望我的 nunit 测试不应用任何 PostSharp 方面 这样我就可以单独测试我的方法 这可以在测试夹具设置中以某种方式完成 还是只能在每个项目级别上完成 您可以在测试版本上设置 SkipPostSharp 标志 这样它就不会首先编
  • R将列表逐行写入CSV

    我在 R 中有以下代码 library party dat read csv data csv header TRUE train lt dat 1 1000 test lt dat 1000 1200 output tree lt cfo
  • 如何在 Qt 中重写 QApplication::notify

    我正在尝试处理 Qt 应用程序中的异常 我浏览了几篇文章 其中指出了重写 QApplication notify 方法以在 Qt 中以有效的方式处理异常 我不确定应该在哪里添加这个重写方法 是mainwindow h还是main cpp 我
  • 传单 GeoJSON 点*后面*多边形

    我有两个传单 geojson 层 它们都有点和多边形特征 我希望能够在地图上对它们进行排序 但是当我今天这样做时 尝试通过按特定顺序添加它们来排序它们 使用 BringToBack bringToFront 等 两个图层中的点图标都位于所有
  • 如何使用mockMvc检查响应正文中的字符串

    我有简单的集成测试 Test public void shouldReturnErrorMessageToAdminWhenCreatingUserWithUsedUserName throws Exception mockMvc perf
  • SSRS IE8 JavaScript 错误无效字符 ScriptResource.axd

    我的一位同事在 SSRS 中制作了各种报告 我们办公室中有两台机器无法通过 Internet Explorer 8 加载报告 两台机器都在报告 正在加载 屏幕上返回 JavaScript 错误 在这些特定的机器上 报告在 FireFox 中
  • 由于 MIME 类型为 text/html,样式表未加载

    在 Firefox 上运行 MERN 应用程序时 在浏览器控制台中出现此错误 并且未加载 css The stylesheet http localhost 3000 src css component css was not loaded
  • CSS中心显示内联块?

    我这里有一个工作代码 http jsfiddle net WVm5d http jsfiddle net WVm5d 您可能需要将结果窗口放大才能看到对齐中心效果 Question 该代码工作正常 但我不喜欢display table 这是
  • 如何从另一个控制器重定向到 Index?

    我一直在寻找某种方法来重定向到Index从另一个控制器查看 public ActionResult Index ApplicationController viewModel new ApplicationController return
  • 我何时以及为什么应该使用 attr.Factory?

    我应该何时以及为何使用attr ib default attr Factory list over attr ib default 来自docs http attrs readthedocs io en stable api html我看到
  • 如何使用 JQuery 和 Ajax 验证表单字段并将表单数据发布到服务器?

    我正在尝试验证表单字段 例如姓名 不得为空 Email id 必须有效 手机 必须有效 填写所有信息后 我必须将此信息发送到服务器 并将响应重定向到不同的页面 这里什么都不起作用 我的表单 html
  • 如何在 OpenCV 中获取单独的轮廓(并填充它们)?

    我试图分离图像的轮廓 为了找到均匀的区域 所以我应用了 cvCanny 然后应用了 cvFindContours 然后每次按下一个键时 我使用以下代码绘制 1 个轮廓 for contours2 0 contours2 contours2
  • “转到实现”以“符号没有实现”结尾

    当右键单击时 例如Visual Studio 中的方法并选择Go To Implementation它告诉我 该符号没有实现 我尝试过 services AddDbContext
  • swift 2.1 alamofire超时方法

    我对 alamofire 超时方法有疑问 首先 我的英语可能不够好 无法让你们理解我所说的 但我会厌倦解释我的问题 在我的项目中 我使用了 alamofire 出于某种原因 我需要确保我的应用程序在连接不良的区域工作 所以我正在考虑使用超时
  • Node-sass 是 React 项目的开发依赖还是生产依赖?

    在各种 React 文档中 我看到它被添加为产品依赖项 但我不明白为什么 难道它不应该是一个 devDependecy 吗 因为 SASS 只在开发过程中被编译 而当推送到 prod 时 你实际上推送的是编译后的 CSS 文件 由于需要进行
  • redis集群不断打印日志WSA_IO_PENDING

    当我启动redis集群的所有redis服务器时 所有这些服务器不断打印类似WSA IO PENDING clusterWriteDone的日志 9956 03 Feb 18 17 25 044 WSA IO PENDING writing
  • .NET 列表.Distinct

    我正在使用 NET 3 5 为什么我仍然收到 不包含 不同 的定义 用这个代码 using System Collections Generic code List
  • R:进入“内部”环境

    给定一个environment object e gt e
  • 使用 highcharts 将 mysql 数据库中的动态数据添加到折线图

    我想使用 ajax 或 json 将数据点添加到我的折线图中 现在我必须重新加载整个网页才能在图表上显示我的新数据 但我想通过添加如下链接的点来显示实时数据 jsfiddle net gh get jquery 1 9 1 highslid