Home forums Using CanvasJS Problem with MYSQL to PHP to CanvasJS charts

This topic contains 3 replies, has 2 voices, and was last updated by  Vishwas R 8 months, 4 weeks ago.

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

    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?

    #19934

    Vishwas R
    Keymaster

    @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

    #19944

    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

    #19952

    Vishwas R
    Keymaster

    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.