highchart根据选择sql数据出现不同图表

因为数据库过于庞大所以现在有两个问题想要解决
现在我作出来的是把图表和数据连接
接下来想做的是
1 出现下拉框,选择日期
2 筛选当前选择日期前三个月的数据作为表格数据

我把部分主页的代码和调用数据的代码贴出来,还有数据库里数据的格式,请大家帮忙看看,怎么加下拉框和如何筛选所选日期的今三个月数据

主页

    $(function () {
 var chart = null;
   
      $.getJSON("1113series.php", function(jsonser) {
       $.getJSON("catsql.php", function(jsoncat) {
            $('#container3').highcharts({   
                chart: {
                    renderTo: 'container3',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25,
                     zoomType: 'x'
                },
                title: {
                    text: 'Uniq User by webapps/days',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: jsoncat
                },
                yAxis: {
                    title: {
                        text: 'Amount'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                plotOptions: {
            series: {
             
                showCheckbox: true
            },
        line:{
                events :{
                    checkboxClick: function(event) {
                        if(event.checked==true) {
                            this.show();
                        }
                        else {
                            this.hide();
                        }
                    },
                    legendItemClick:function(event) {
                        return false;
                    }
                }
            }
        },
        
                series: jsonser
            },//highcharts
    function(c) {
        chart = c;
    }
            );//container1
            
             $('.change3').click(function(){
        var self = $(this);
        for(var i=0;i<chart.series.length;i++) {
            var serie = chart.series[i];
            serie.update({
                type: self.data('type')
            });
        }
    });//change
            
            
            
            
            
            });//getjson
        });//getjson
});//function    


调用sql
<?php
$con = mysql_connect("localhost","root","");

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

mysql_select_db("usestats", $con);

$sth = mysql_query("SELECT  
   COUNT_NB
FROM    usestats.pim_logs
ORDER BY EXTRACT_DATE ASC;
");
$rows = array();
$rows['name'] = 'server';
while($r = mysql_fetch_array($sth)) {
    $rows['data'][] = $r['COUNT_NB'];
}
$rows['selected'] = true;



$result = array();
array_push($result,$rows);


print json_encode($result, JSON_NUMERIC_CHECK);

mysql_close($con);
?>


 
date.PNG schema.PNG sql.PNG
已邀请:

john - 个人微博:http://weibo.com/u/2175683160

赞同来自: /ty阿龙/mg

何必搞的这么复杂,我来简单给你分析一下:
 
1、后台数据接口
 
后台接口只需要更具传入的时间查询出对应的数据并返回给前端就行了,
 
所以一般是这么写的
 
<?php

$startTime = $_POST['startTime'];
$endTime = $_POST['endTime'];

/**
* 数据库操作
* 其中 SQL 部分加上时间范围
*/
$sql = 'select * from xxxx where xxx = xxx and startTime >= $startTime and endTime <= $endTime';
// 省略代码...

/**
* 处理数据,最后用 json 返回
*/

echo json_encode($data);

?>

 
2、前端请求及交互
 
前端就比较简单了,写个函数,出入起止时间,通过调数据接口获得数据,并见数据用图表形式展现,简单代码如下
 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<input type="text" id="startTime">
<input type="text" id="endTime">
<button>确定</button>
<div id="container">
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript">
var params = {
startTime: '2015-08-01'
endTime: '2015-10-01'
};


function generateChart() {

$.post('/question/115/data.html', params, function(data) {

// 将数据处理成数据列格式
//
var series = [{
name: '111',
data: [1, 2, 3, 4]
}];

// 开始生成图表
$('#container').highcharts({
series: series
});

});
}

// 初始化时调用生成图表函数
generateChart();

// 按钮点击时调用图表生成函数
$('button').click(function(){
params.startTime = $('#startTime').val();
params.endTime = $('#endTime').val();
generateChart();
})
</script>
</body>

</html>

另外,我最近也在筹备编写 Highcharts 与数据交互的相关教程,届时将发布在中文网上,请关注。
 

chro008 - java coder

赞同来自:

根据你页面选择的日期 你可以得到你需要查询的数据起止时间
类似 楼上所示 sql:select col1,col2 from *** where date>=? and date<=?
得到你需要的数据转成hc需要的数据格式传给前台即可

要回复问题请先登录注册