使用highchart从ms sql显示图表

时间:2012-09-16 16:49:27

标签: php highcharts

我正在尝试显示来自MSSQL的数据。我在http://www.blueflame-software.com/blog/using-highcharts-with-php-and-mysql看到了一个例子。 Y轴的值已经很好,但X轴无法在我的图表上显示,因此图表的值仅在0 Xaxis中,

data.php

mssql_select_db("CU-CAB01", $con);

$result = mssql_query("select count(nba) sumnba, datein from tbl_anggota where tgl_masuk > '2012-06-01'group by tgl_masuk");

while($row = mssql_fetch_array($result)) {
  echo $row['tgl_masuk'] . "\t" . $row['jumlah']. "\n";

的index.php

<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="js/highcharts.js" ></script>
<script type="text/javascript" src="js/themes/dark-blue.js"></script>

<script type="text/javascript">
    var chart;
            $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: 'Hourly Visits',
                        x: -20 //center
                    },
                    subtitle: {
                        text: '',
                        x: -20
                    },
                    xAxis: {
                    type: 'datetime',
                        tickInterval: 10000 * 1000, // one hour
                        tickWidth: 0,
                        gridLineWidth: 1,
                        labels: {
                            align: 'center',
                            x: -3,
                            y: 20,
                            formatter: function() {
                                return Highcharts.dateFormat('%e', this.value);
                            }
                        }
                    },
                    yAxis: {
                    tickInterval: 2,
                        title: {
                            text: 'Anggota'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return Highcharts.dateFormat('%l%p', this.x-(1000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>';
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [{
                        name: 'Count'
                    }]
                }

                jQuery.get('data.php', null, function(tsv) {
                    var lines = [];
                    traffic = [];
                    try {
                        // split the data return into lines and parse them
                        tsv = tsv.split(/\n/g);
                        jQuery.each(tsv, function(i, line) {
                            line = line.split(/\t/);
                            date = Date.parse(line[0] +' UTC');
                            traffic.push([
                                date,
                                parseInt(line[1].replace(',', ''),10)
                            ]);
                        });
                    } catch (e) {  }
                    options.series[0].data = traffic;
                    chart = new Highcharts.Chart(options);
                });
            });
</script>

和tbl_anggota中的数据查询结果如下

sumnba  datein
1       2012-07-03 00:00:00.000
4       2012-07-04 00:00:00.000
5       2012-07-05 00:00:00.000
5       2012-07-06 00:00:00.000
2       2012-07-16 00:00:00.000
5       2012-07-17 00:00:00.000
1       2012-07-18 00:00:00.000
2       2012-07-19 00:00:00.000

我认为我在datein字段上用jquery解析数据时出错,所以我的Xaxis只有空值..

有人可以让我的图表显示Xaxis值吗?

1 个答案:

答案 0 :(得分:0)

如果输出查询与上面类似,则在解析时会反转X和Y.日期字段位于计数字段之后:

   // split the data return into lines and parse them
   tsv = tsv.split(/\n/g);
   jQuery.each(tsv, function(i, line) {
       line = line.split(/\t/);
        date = Date.parse(line[1] +' UTC'); //your datin is after the '\t'
        traffic.push([
            date,
            parseInt(line[0].replace(',', ''),10) //your count is before the '\t'
        ]);
    });

请,请修好空挡块。忽略代码的关键部分中的错误绝不是一个好主意。