Home › Forums › Chart Support › Problem with MYSQL to PHP to CanvasJS charts

Problem with MYSQL to PHP to CanvasJS charts

Viewing 4 posts - 1 through 4 (of 4 total)
  • March 15, 2018 at 2:34 pm #19931

    naveenkumarnair

    I have PHP code as below also available in the following link http://marviks.com/Charts/myPHPserviceAS.php

    <?php
    /* We first connect to our database */

    $dbhost = “fdbXX.awardspace.net”;
    $user = “2632692_XXXXX”;
    $password = “XXXXXXXX”;
    $database = “XXXX_XXXXXXX”;

    $connection = mysqli_connect($dbhost,$user,$password,$database);

    /* Capture connection error if any */
    if (mysqli_connect_errno($connection)) {
    echo “Failed to connect to DataBase: ” . mysqli_connect_error();
    }
    else {

    /* Declare an array containing our data points */
    $data_points = array();

    /* Usual SQL Queries */
    $query = “SELECT * FROM DailyHistStockData”;
    $result = mysqli_query($connection, $query);

    while($row = mysqli_fetch_array($result))
    {
    /* Push the results in our array */
    $point = array(“x” => $row[‘dDate’] ,”y” => $row[‘Close’]);
    array_push($data_points, $point);
    }

    /* Encode this array in JSON form */
    echo json_encode($data_points, JSON_NUMERIC_CHECK);
    }
    mysqli_close($connection);
    ?>

    I am trying to use the data in the html http://marviks.com/Charts/crosshair.html

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset=”UTF-8″>
    <script src=”js/jquery-1.11.1.min.js”></script>
    <script src=”js/canvasjs.min.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {

    $.getJSON(“myPHPserviceAS.php”, function (result) {

    var chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    title: {
    text: “Data From PHP Result ” + result
    },
    axisX: {
    valueFormatString: “DD MMM”,
    crosshair: {
    enabled: true,
    snapToDataPoint: true
    }
    },
    axisY: {
    title: “Closing Price (in USD)”,
    includeZero: false,
    valueFormatString: “$##0.00”,
    crosshair: {
    enabled: true,
    snapToDataPoint: true,
    labelFormatter: function (e) {
    return “$” + CanvasJS.formatNumber(e.value, “##0.00”);
    }
    }
    },
    data: [{
    type: “area”,
    xValueFormatString: “DD MMM”,
    yValueFormatString: “$##0.00″,
    dataPoints: [
    result
    ]

    }]
    });
    chart.render();

    });
    });
    </script>

    </head>
    <body>
    <div id=”chartContainer” style=”height: 370px; max-width: 920px; margin: 0px auto;”></div>

    </body>
    </html>

    For some reason the JSON value returned into result array is having no value… Any idea WHY?

    March 15, 2018 at 4:14 pm #19934

    Vishwas R

    @naveenkumarnair,

    The php service returns dataPoints, with x-values that are not valid JavaScript Date object. So parsing it and then passing it to chart-options should work fine in your case. Please take a look at this jsfiddle.

    —
    Vishwas R
    Team CanvasJS

    March 15, 2018 at 7:33 pm #19944

    naveenkumarnair

    Thanks Vishwas,

    Now that my chart is rendering I am curious why the X-AXIS labels are offset by a grid and also the they appear multiple time. Is this a software bug?

    http://marviks.com/Charts/crosshair.html

    Regards
    Naveen

    March 16, 2018 at 10:12 am #19952

    Vishwas R

    Naveen,

    You can control number of labels by setting interval property. You can try setting interval to 1 along with intervalType to day in your case.

    The date seems to be repeated as you are showing just date, where the labels are displayed at every 6hours, when the chart width is morethan 1000px. Please check this updated jsfiddle. Setting interval and intervalType should work fine in this case.

    —
    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.