<html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>Highcharts Example</title>

 <?php

     $conn=mysql_connect("localhost","root","") or die ("连接失败");

     mysql_query("set names utf8",$conn);

     mysql_select_db("office",$conn);

     $sql="SELECT convert(SUM(`total2`) ,decimal(10,2)) as total,`payment_date`as day FROM `toa_order`WHERE TIMESTAMPDIFF(DAY,`payment_date`,DATE(NOW()))<7 group by `payment_date`";

 $result=mysql_query($sql,$conn);

 $day[] = array();

 $count[] =array();

 while($row = mysql_fetch_array($result))

 {

 $day[]=$row['day'];

 $count[]=intval($row['total']);

 }

 $day = json_encode($day);

 $data1 = array(array("name"=>"day","data"=>$count));

 $data1 = json_encode($data1); //把获取的数据对象转换成json格式

 ?>

 <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

 <script src="js/highcharts.js"></script>

 <script src="js/modules/exporting.js"></script>

 <script type="text/javascript">

 $(function () {

 $('#container').highcharts({

 title: {

 text: 'Publish times',

 x: -20 //center

 },

 subtitle: {

 text: 'write by:DongGe',

 x: -20

 },

 xAxis: {

 categories: <?php echo $day; ?>

 },

 yAxis: {

 title: {

 text: '金 额'

 },

 plotLines: [{

 value: 0,

 width: 1,

 color: '#808080'

 }]

 },

 tooltip: {

 valueSuffix: '元'

 },

 legend: {

 layout: 'vertical',

 align: 'right',

 verticalAlign: 'middle',

 borderWidth: 0

 },

 series: <?php echo $data1; ?>

 });

 });

 </script>

 </head>

 <body>

 <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

 </body>

 </html>

需引用的js:highcharts.js、jquery.highchartTable.js、jquery-1.8.2.min.js

php+mysql折线图的更多相关文章

  1. highcharts实例教程一：结合php与mysql生成折线图

    Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中 ...

  2. C# 实时折线图，波形图

    此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...

  3. Android开发学习之路-自定义控件（天气趋势折线图）

    之前写了个天气APP,带4天预报和5天历史信息.所以想着要不要加一个折线图来显示一下天气变化趋势,难得有空,就写了一下,这里做些记录,脑袋不好使容易忘事. 先放一下效果: 控件内容比较简单,就是一个普 ...

  4. react-echarts之折线图的显示

    react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...

  5. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. MPAndroidChart 3.0——LineChart（折线图）

    显示效果 MPAndroidChart每一种图表的基本使用方式都基本相同 了解一种图表的实现 参考项目源码其他的图表也就差不多哩 在布局文件中定义 <com.github.mikephil.ch ...

  7. echart折线图小知识

    1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 var selected = {}; sel ...

  8. hellocharts的折线图与柱状图的结合之ComboLineColumnChartView

    哼哼,网上找了半天都不全,所以决定自己写一个完整的可以直接贴代码的 test.xml <?xml version="1.0" encoding="utf-8&quo ...

  9. Android自定义折线图

    老师布置了个作业:http://www.cnblogs.com/qingxu/p/5316897.html 作业中提到的 “玩了几天以后,大家发现了一些很有意思的现象,比如黄金点在逐渐地往下移动.” ...

随机推荐

  1. golang and intellij

    有一个项目,混合了java和go,需要在intellij中安装go的插件. OK,网上的信息简直混乱不堪,两个流派,一个流派就是装插件,一个流派就是编译插件,各种折腾,还是安装不了,谁知柳暗花明又一村 ...

  2. js+jquery 常用选择器函数

    一.获取当前标签 JS: this,如下: <button onclick="fun(this)"></button> Jquery,如下: $(" ...

  3. JAVA调用Oracle存储过程和函数

    连接数据库的工具类: import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; imp ...

  4. 获取Parameter参数值，方便调试使用

    #region #warning 调试使用,获取sql参数化,拼接出完整的sql语句,复制sql明文到mssql中运行 string debugSql = queryHelper.CommandTex ...

  5. Codeforces Round #350 (Div. 2) A

    A. Holidays time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...

  6. Ubuntu 12.04更新源（转）

    1.首先备份Ubuntu12.04源列表 sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup (备份下当前的源列表) 2.修改更新源 ...

  7. 在Ubuntu下编译WebKit源码--qt

    转载自:http://www.cnblogs.com/panderen/archive/2011/10/18/2216154.html 在朋友的介绍下有幸認识了WebKit这个让人心动的开源浏览器内核 ...

  8. JS学习笔记之页面信息滚动效果

    效果截图: 1.无缝滚动效果 JS代码: <script> window.onload=function(){ var oInfobox=document.getElementById(' ...

  9. AMD 和 CMD的区别

    AMD 是 RequireJS 在推广过程中对模块定义的规范化产出.CMD 是 SeaJS 在推广过程中对模块定义的规范化产出.类似的还有 CommonJS Modules/2.0 规范,是 Brav ...

  10. [bzoj1030][JSOI2007]文本生成器——AC自动机

    Brief Description 给定一些模式串,您需要求出满足以下要求的字符串的个数. 长度为m 包含任意一个模式串 Algorithm Design 以下内容来自神犇博客 首先运用补集转换,转而 ...