使用highcharts从数据库预处理数据

时间:2014-07-31 08:19:50

标签: javascript php html database highcharts

我想从数据库表中导入一些数据,并绘制图形。我在这里写了我的PHP代码和js。它没有向我展示任何网络浏览器,除了" Back"按钮。当我使用firebug时,在控制台窗口中我收到消息" SyntaxError:语法错误数据:[
"。 plot.php(第47行,第16栏)。该行是此代码" if($ row [1]< 50){"。谁能帮我?

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Graph</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <style type="text/css">
#container, #sliders {
    min-width: 310px; 
    max-width: 800px;
    margin: 0 auto;
}
#container {
    height: 400px; 
}
        </style>
        <script type="text/javascript">
<?php 
        //header('Refresh: 10');
        // connect to MySQL

        $db_host = "localhost";
        $db_user = "root";
        $db_pass = "";
        $db_name = "testdb";

        //require_once 'phplot.php';

        $con = mysql_connect('localhost', 'root', '') or die("Cannot connect because ".mysql_error());

        $db_selected = mysql_select_db('testdb', $con);
        if (!$db_selected) {
            die ('Can\'t use testdb : ' . mysql_error());
        }
        $sql = "SELECT Doi, Trei FROM `tabela` ORDER BY `tabela`.`id` DESC LIMIT 10";

        $result = mysql_query($sql);
        if (!$result) {
            echo 'Could not run query: ' . mysql_error();
            exit;
        }

        $data = array();
        $valoare = 100;
         while($row = mysql_fetch_row($result)) {
            if($row[1] < 50) {
              $data[] = array($row[0], $valoare, null);
            } else {
                $data[] = array($row[0], null, $valoare);
            }
        }


?>

$(function () {
    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: 'Graph view'
        },
        subtitle: {
            text: 'Time'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series:  [{
         data: [<?php echo join($data, ',') ?>]

      }]

    });


    // Activate the sliders
    $('#R0').on('change', function(){
        chart.options.chart.options3d.alpha = this.value;
        showValues();
        chart.redraw(false);
    });
    $('#R1').on('change', function(){
        chart.options.chart.options3d.beta = this.value;
        showValues();
        chart.redraw(false);
    });

    function showValues() {
        $('#R0-value').html(chart.options.chart.options3d.alpha);
        $('#R1-value').html(chart.options.chart.options3d.beta);
    }
    showValues();
});


        </script>
    </head>
    <body>

     <form><input type="button" value="Back" onClick="window.location.href='source/login-home.php'"></form> 


<div id="container"></div>
<div id="sliders">




<script src="http://localhost/graph/highcharts.js"></script>
<script src="http://localhost/graph/highcharts-3d.js"></script>
<script src="http://localhost/graph/exporting.js"></script>


        <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
        <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>



</div>
    </body>
</html>

0 个答案:

没有答案