All I want is to be able to run my for loop on JSON and according to the name of the test plot a new line on the Canvas chart with it's values.
I am not able to get different horizontal lines displayed on the chart
$(document).ready(function(){
$("#find").click(function(e){
e.preventDefault();
$.ajax({
// the URL for the request
url: "bloodTest.php",
// the data to send (will be converted to a query string)
data: {pnhsno: "1001001002"},
// whether this is a POST or GET request
type: "GET",
// the type of data we expect back
dataType : "json",
// code to run if the request succeeds;
// the response is passed to the function
success: function(json){
if(json.length !=0){
var dataPoints = json.map(function (p) {
p.x = new Date(p.x);
return p;
});
dp = [];
for(var i=0; i<dataPoints.length; i++){
if(dataPoints[i].t =="t3"){
dp.push({x:dataPoints[i].x, y:dataPoints[i].y})
else if(dataPoints[i].t =="tsh"){
dp.push({x:dataPoints[i].x, y:dataPoints[i].y})}
$("#chart").CanvasJSChart({ //Pass chart options
title:{text:"Blood Test Results"},
axisX:{valueFormatString:"DD-MM-YYYY",labelAngle:-45},
data: [{
type: "line",
dataPoints:dp}]});
}//if
}//for
}//if
}//json
});});
});
JSON data
[
{
"t": "t3",
"y": 6.8,
"x": "2004-07-05"
},
{
"t": "t4",
"y": 29,
"x": "2004-07-05"
},
{
"t": "tsh",
"y": 0.01,
"x": "2004-07-05"
},
{
"t": "thyroglobulin level",
"y": 0.5,
"x": "2004-07-05"
},
{
"t": "t3",
"y": 5.2,
"x": "2005-06-15"
},
{
"t": "t4",
"y": 30,
"x": "2005-06-15"
},
{
"t": "tsh",
"y": 0.02,
"x": "2005-06-15"
},
{
"t": "thyroglobulin level",
"y": 0.5,
"x": "2005-06-15"
}
]
here is the answer to my question.
$(document).ready(function(){
$("#find").click(function(e){
e.preventDefault();
$.ajax({
// the URL for the request
url: "bloodTest.php",
// the data to send (will be converted to a query string)
data: {pnhsno: "1001001002"},
// whether this is a POST or GET request
type: "GET",
// the type of data we expect back
dataType : "json",
// code to run if the request succeeds;
// the response is passed to the function
success: function(json){
if(json.length !=0){
var dataPoints = json.map(function (p) {
p.x = new Date(p.x);
return p;
});
var dp1 = [];
var dp2 = [];
var dp3 = [];
var dp4 = [];
var name;
var lt1; var lt2; var lt3; var lt4;
for(var i=0; i<dataPoints.length; i++){
if(dataPoints[i].t =="t3"){
lt1 =dataPoints[i].t;
name = "series1";
dp1.push({x:dataPoints[i].x, y:dataPoints[i].y})}
else if(dataPoints[i].t =="tsh"){
lt2 =dataPoints[i].t;
name = "series2";
dp2.push({x:dataPoints[i].x, y:dataPoints[i].y})}
else if(dataPoints[i].t =="t4"){
lt3 =dataPoints[i].t;
name = "series3";
dp3.push({x:dataPoints[i].x, y:dataPoints[i].y})}
else if(dataPoints[i].t =="thyroglobulin level"){
lt4 =dataPoints[i].t;
name = "series4";
dp4.push({x:dataPoints[i].x, y:dataPoints[i].y})}
}
$("#chart").CanvasJSChart({ //Pass chart options
title:{text:"Blood Test Results"},
axisX:{valueFormatString:"DD-MM-YYYY",labelAngle:-45},
data: [
{
type: "line",
legendText:lt1,
name:name,
showInLegend:true,
dataPoints:dp1
},
{
type: "line",
legendText:lt2,
name:name,
showInLegend:true,
dataPoints:dp2
},
{
type: "line",
legendText:lt3,
name:name,
showInLegend:true,
dataPoints:dp3
},
{
type: "line",
legendText:lt4,
name:name,
showInLegend:true,
dataPoints:dp4
}
]});
//}
}//if
}//json
});});});