Home forums Using CanvasJS Add axisY StripLines to array push issue

This topic contains 3 replies, has 2 voices, and was last updated by  Shashi Ranjan 2 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #24743

    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>

    #24763

    @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

    #24764

    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.

    #24793

    @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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.