Add axisY StripLines to array push issue

[cronk005]

I’m trying to figure out how to add a few elements to my charts using PHP/json array push; Namely, a Title and the AxisY striplines.

When I render the chart, my datapoints look like they are populating just fine, so I’m not sure what is happening.

dataPoints: [{“label”:”2019-03-25 08:40:00″,”y”:1.1,”name”:”Phosphorus”,”ylineA”:2.5,”ylineB”:4.5},{“label”:”2019-03-26 05:43:00″,”y”:2.5,”name”:”Phosphorus”,”ylineA”:2.5,”ylineB”:4.5}] }]
});

<?php
$path = $_SERVER[‘DOCUMENT_ROOT’];
$path .= “xxx”;
require($path);

$tID = mysqli_real_escape_string($link, $_GET[‘id’]);

$sql = “SELECT *
FROM tbl_test_results tr

LEFT JOIN tbl_test t
ON tr.testID = t.testID

WHERE tr.testID = ‘$tID’

ORDER BY datetime_collected ASC
“;

$data = $link->query($sql);
$dataPoints = array();

if ($data->num_rows > 0) {

while($row = $data->fetch_assoc()) {
$point = array(“label” => $row[‘datetime_collected’], “y” => $row[‘test_result’], “name” => $row[‘test_name’], “ylineA” => $row[‘test_low’], “ylineB” => $row[‘test_high’]);
array_push($dataPoints, $point);
}
}
$link->close();

?>

<div id=”chartContainer2″ style=”width: 100%; height: 300px;”></div>

<script type=”text/javascript”>

$(function () {

CanvasJS.addColorSet(“blueShades2”,
[//colorSet Array
“#074b83”,
“#085a9d”,
“#0a69b7”,
“#0b78d1”,
“#0c87eb”,
“#2196f3”,
“#4daaf6”,
“#79bff8”,
“#a6d4fa”,
“#d2eafd”
]);

var chart2 = new CanvasJS.Chart(“chartContainer2”, {
zoomEnabled: false,
animationEnabled: true,
colorSet: “blueShades2”,
title:{
text: “{name}”
},
toolTip:{content: “{name}: {y}”},
axisY:{
stripLines:[
{
startValue:”{ylineA}”,
endValue:”{ylineB}”,
color:”#d8d8d8″
}
]
},
data: [{
type: “line”,
indexLabelFontSize: 14,
indexLabel: “{y}”,
indexLabelPlacement: “outside”,
indexLabelOrientation: “horizontal”,
dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
}]
});

chart2.render();
});
</script>

[Shashi Ranjan]

@cronk005,

The startValue and endValue of stripLine should be numbers. Kindly check if the ylineA and ylineB that you are passing are numbers if not typecasting it to number should work fine. If you are still facing the issue, can you please share the sample project reproducing the same over Google Drive/One Drive so that we can look into the code, understand it better and help you out.

—
Shashi Ranjan
Team CanvasJS

[cronk005]

Hi Shashi- Thanks for your reply.

Yes, I can confirm that the values ylineA and ylineB are numbers.

Here is a sample project that you may peruse. It is the same code that is listed in the body of this message above.
https://drive.google.com/file/d/1Qrq_MFc5ehzCA_nlIc0ad0N821-3tgkv/view?usp=sharing
to see a live working version you may visit temporarily,
http://cronkflies.com/gezond/charts/test.php?id=17

Let me know if you have any further thoughts or need further information.

[Shashi Ranjan]

@cronk005.

The values ylineA and ylineB that you are trying to pass as startValue and endValue are basically an element within $datapoints array. But you are trying to access it directly, which would be undefined. Accessing the values properly should work fine in this case.

If the issue still persists, kindly share a working sample project along with sample database so that we can run it locally at our end to help you fix the issue.

—
Shashi Ranjan
Team CanvasJS