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)
  • #19931

    I have PHP code as below also available in the following link http://marviks.com/Charts/myPHPserviceAS.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);

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

    <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: [



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


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



    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


    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?





    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.