jquery 动态图-怎么改下面代码,能读出数据库中的数据并实时显示?

问题描述

怎么改下面代码,能读出数据库中的数据并实时显示?

数据是时间对应温度,代码是Jquery的一个example。
菜鸟一只,先谢过大神。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <!-- 1. Add these JavaScript inclusions in the head of your page -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="../js/highcharts.js"></script>

        <!-- 1a) Optional: the exporting module -->
        <script type="text/javascript" src="../js/modules/exporting.js"></script>

        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">

            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'spline',
                        marginRight: 10,
                        events: {
                            load: function() {

                                // set up the updating of the chart each second
                                var series = this.series[0];
                                setInterval(function() {
                                    var x = (new Date()).getTime(), // current time
                                        y = Math.random();
                                    series.addPoint([x, y], true, true);
                                }, 1000);
                            }
                        }
                    },
                    title: {
                        text: 'Live random data',
                        style: {
                            margin: '10px 100px 0 0' // center it
                        }
                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: 'Value'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                                Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    series: [{
                        name: 'Random data',
                        data: (function() {
                            // generate an array of random data
                            var data = [],
                                time = (new Date()).getTime(),
                                i;
                            for (i = -19; i <= 0; i++) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        })()
                    }]
                });

            });

        </script>

    </head>
    <body>

        <!-- 3. Add the container -->
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

    </body>
</html>
时间: 2024-11-10 05:18:46

jquery 动态图-怎么改下面代码,能读出数据库中的数据并实时显示?的相关文章

jQuery 动态添加与统计 实现代码

jquery 动态添加与统计 实现代码 (一)创建克隆单元格对象并添加到表格中 var v=$("#tbin");//得到表格的jquery对象        //所有的数据行有一个.myrow的class,得到数据行的大小 var vcount=$("#tbin tr").filter(".myrow").size()+1;//表格有多少个数据行  var vtr=$("#tbin #trdatarow1"); //得到表格

jQuery焦点图轮播特效代码分享(3款)_jquery

本文实例讲述了jQuery焦点图轮播特效代码.分享给大家供大家参考.具体如下: jQuery cxSlide实现的三款多功能大气焦点图轮播特效源码,是一段拥有三种不同风格和效果的焦点图轮播代码,其中有两款最有意思,一款是在将焦点图图片分成了四块,每个图片都连接到不同的地址,并且还拥有鼠标悬浮内图时,其它图片都变暗了的效果,另外一款是,带有带缩略图和文字描述效果的焦点图轮播代码. 运行效果图: ----------------------查看效果 源码下载---------------------

使用Ajax动态获取数据库中的数据

问题描述 求助:.NET怎么用Ajax动态获取SQLServer数据库中的数据?当数据库中的某个表的内容发生变化时,就将这张表读取出来显示. 解决方案 解决方案二:做一个触发器吧,当有insert和update时读取整张表信息,前台ajax绑定代码如下://jqueryajax调用示例functiongetDataByClassid(id,cid){$(document).ready(function(){$.ajax({type:"GET",url:"GetGrid.asp

javascript代码如何向数据库中插入精确到时分秒的date数据?

问题描述 javascript代码如何向数据库中插入精确到时分秒的date数据? 插入到数据库中发现只有年月日..时分秒为0. 有没有办法插入精确到时分秒的日期数据?? 解决方案 从后台给时间呗.干嘛要在前台给 解决方案二: 可以参考这个javascript datetime时间操作函数http://www.111cn.net/wy/js-ajax/39366.htm 解决方案三: 你后台的是什么数据库,数据库字段是什么?不行的话,可以使用timestamp时间戳,转成EPOCH来存储. 解决方

visual studio-vs怎么样代码获取Mysql数据库中的主键

问题描述 vs怎么样代码获取Mysql数据库中的主键 100C 我正在做代码生成器,其中要获取数据库中的主键和外键以及自动增加列.下面是具体的代码,给位大神们我应该怎样升级这个代码 解决方案 解决方案二: 解决方案三: SELECT k.column_nameFROM information_schema.table_constraints tJOIN information_schema.key_column_usage kUSING (constraint_nametable_schemat

如何用struts2把数据库中的数据以折线图的形式展现在jsp文件中

问题描述 如何用struts2把数据库中的数据以折线图的形式展现在jsp文件中 怎么把数据库中的数据以这种形式展示在jsp文件中啊 不要导出为图片 (类似于右图) 急求!!!谢谢大师们指点(http://img.ask.csdn.net/upload/201505/10/1431226115_964866.png) 解决方案 可以用图表插件如amchart.js(收费)或者hightcharts.js(开源的),倾向后者.struts2传递数据给页面,再在页面上用图表插件展示即可. 附上教程:h

向sqlce数据库中插入数据的代码

问题描述 大家好,我是菜鸟,请各位大侠说一下向Sqlce的数据库中插入数据的代码.谢谢-- 解决方案 解决方案二:stringsrtSql="insertintoTableName(数据库字段)Vauels(要插入对应的值)";SqlConnectionconn=newSqlConnection("server=.;database=数据库名称;uid=sa;pwd=;");conn.open();SqlCommandcmd=newSqlCommand(strSql

sql server-sqlserver中导入数据库后,把由windowds验证改成sqlserver后,数据库中的表消失

问题描述 sqlserver中导入数据库后,把由windowds验证改成sqlserver后,数据库中的表消失 解决方案 数据库选对了吗?如果选不对,肯定找不到表的 解决方案二: 新手表示没遇到过这种问题 解决方案三: 用windows账号重新登陆查看下表是否真的消失.然后检查下你使用的sql server账号的权限.

求C#代码!!关于从Excel表中将数据导入Access数据库,以及Access数据库中的数据导出到Excel表的代码。急!!!晚上就得交差啊

问题描述 我需要从Excel表中将数据导入Access数据库,以及Access数据库中的数据导出到Excel表的代码,越具体越好!!望各位高手能不吝赐教 解决方案 解决方案二:不会吧?难道世间真的是如此残忍?为什么没人理我啊?高手们,算小弟我求你们了!难道是分不够多吗?初出江湖实在是身无分文啊----就不要太在意这个了,好不好啊?给我写写吧,万分感谢了!!解决方案三:这里是利用officeapplication方式来操作excel的http://blog.csdn.net/fangxinggoo