Chart from Database - php

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