数据库中的图表

Question

I am trying to implement a chart from database, but I'm having a few problems...

I have a Database with 2 rows: Date, Pcr

My files .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);

I get the array: ["2015-06-14","0.77","2015-06-20","0.79","2015-09-24","0.88","2015-10-26","0.8","2015-10-30","0.7"]

I would like to get a dynamic chart from this array, but I don't know how to do that...

I have this static file:

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>

Could someone help me to find what I have to put in Data:[]?

Thank you very much

Answer 1

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;
        }
        )