使用 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 数据库中的动态数据添加到折线图 的相关文章

随机推荐

  • 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