数据库中的图表

时间:2015-11-03 10:11:38

标签: php jquery mysql ajax chart.js

我正在尝试从数据库实现图表,但我遇到了一些问题......

我有一个包含2行的数据库:Date,Pcr

我的文件.php:

Data.php

$query = "SELECT * FROM  `table1` ORDER BY Date LIMIT 0 , 100";
    $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());

    $dates=array();

    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
        $dates[] = $row['Date'];
        $dates[] = $row['Pcr']; 
    }
  echo json_encode($dates);

我得到了数组: 的 [ “2015年6月14日”, “0.77”, “二零一五年六月二十零日”, “0.79”, “2015年9月24日”, “0.88”, “2015年10月26日”,“0.8 ”, “二○一五年十月三十零日”, “0.7”]

我想从这个数组中获取动态图表,但我不知道该怎么做......

我有这个静态文件:

chart.php

    <div class="resultados"><canvas id="grafico"></canvas></div>

<script>
        $(document).ready(function(){ 
                $.ajax({
                    type:'POST',
                    url:'data.php',

                    success:function(data){

                        var valores = eval(data);
                        var date1 = valores[0];
                        var pcr1 = valores[1];
                        var date2 = valores[2];
                        var pcr2 = valores[3];
                        var date3 = valores[4];
                        var pcr3 = valores[5];
                        var date4 = valores[6];
                        var pcr4 = valores[7];


                        var Datos = {
                                labels : [date1,date2,date3,date4],
                                datasets : [
                                    {

                                        fillColor : 'rgba(255,0,0,0.1)', 
                                        strokeColor :'rgba(255,0,0,100)',
                                        pointColor : 'rgba(255,0,0,100)',
                                        pointStrokeColor:"#e32636",
                                        pointHighlightFill:"#bbf",
                                        pointHighlightStroke:"rgba(255,0,0,255)",

                                        data : [pcr1,pcr2,pcr3,pcr4]
                                    } 
                                ]
                        }

                        var contexto = document.getElementById('grafico').getContext('2d');
                        window.Barra = new Chart(contexto).Line(Datos, { responsive : true });
                    }
                });
                return false;
            }
            )
</script>

有人可以帮助我找到我要放入数据的内容:[]?

非常感谢

1 个答案:

答案 0 :(得分:0)

PHP:

$dates=array();
$pcrs=array();
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    $dates[] = $row['Date'];
    $pcrs[] = $row['Pcr']; 
}
$data = ["dates"=>$dates,"pcrs"=>$pcrs];
echo json_encode($data);

JS:

 $(document).ready(function(){ 
            $.ajax({
                type:'GET',
                url:'data.php',

                success:function(data){
                    var Datos = {
                            labels : data.dates,
                            datasets : [
                                {

                                    fillColor : 'rgba(255,0,0,0.1)', 
                                    strokeColor :'rgba(255,0,0,100)',
                                    pointColor : 'rgba(255,0,0,100)',
                                    pointStrokeColor:"#e32636",
                                    pointHighlightFill:"#bbf",
                                    pointHighlightStroke:"rgba(255,0,0,255)",

                                    data : data.pcrs
                                } 
                            ]
                    }

                    var contexto = document.getElementById('grafico').getContext('2d');
                    var chrt = new Chart(contexto).Line(Datos, { responsive : true });
                }
            });
            return false;
        }
        )