Home forums Using CanvasJS Errors with mySQL data

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  Anjali 1 year, 6 months ago.

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

    mugenheimer
    Member

    Hi all,

    I’m very new to canvasjs and I was hoping to implement two nice canvasjs charts with data pulled from a SQL query.

    When I create the two charts and use static data they display perfectly, however once i try to use database data (converted to JSON array) nothing gets displayed. I have been at this for 2 days now and I just don’t get what is happening so any advice would be much appreciated.

    I tried to follow the following tutorial but it is not working for me.

    http://canvasjs.com/forums/topic/how-can-i-use-php-mysql-dynamic-data/

    I have the following files saved in localhost/canvasjs/
    -canvasjs.js
    -canvasjs.min.js
    -excanvas.js
    -jquery.canvasjs.js
    -jquery.canvasjs.min.js
    -jquery-1.3.js

    So I have created a php page called data.php very similar to the tutorials.

    <?php
    require(“config.php”); //connection to database
    header(‘Content-Type: application/json’);

    $data_points = array();

    $salessql = “SELECT products.name, sum(orderitems.quantity) as items_sold,
    FROM products INNER JOIN orderitems
    ON products.id=orderitems.product_id
    GROUP BY orderitems.product_id ORDER BY items_sold desc LIMIT 10″;
    $result = mysqli_query($db, $salessql);

    while($row = mysqli_fetch_array($result))
    {
    $point = array(“label” => $row[‘product’] , “y” => $row[‘items_sold’]);

    array_push($data_points, $point);
    }

    echo json_encode($data_points, JSON_NUMERIC_CHECK);

    ?>

    Then my html looks like this.

    <!DOCTYPE html>
    <html xmlns=”http://www.w3.org/1999/xhtml” >
    <head>
    <title></title>
    <script src=”jquery.js”></script>
    <script src=”canvasjs.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {

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

    var chart = new CanvasJS.Chart(“chartContainer”, {
    data: [
    {
    dataPoints: result
    }
    ]
    });

    chart.render();
    });
    });
    </script>
    </head>
    <body>

    <div id=”chartContainer” style=”width: 800px; height: 380px;”></div>

    </body>
    </html>

    I have tinkered with the script src so that it is ./canvasjs/canvasjs.js, I’ve changed it to jquery-1.3.js etc. but it makes no difference.

    Thanks.

    #8730

    Anjali
    Participant

    mugenheimer,

    Can you please post your JSON response here so that we can figure out the issue.

    __
    Anjali

    #8737

    mugenheimer
    Member

    [{“label”:”TP-Link 3G\/3.75G Wireless N Router”,”y”:35},{“label”:”VMWARE Workstation 11″,”y”:33},{“label”:”D-Link Dual Band Router | 900Mbps”,”y”:8},{“label”:”FORENSIC TOOLKIT 5.0″,”y”:7},{“label”:”Paraben Forensic Replicator”,”y”:2},{“label”:”Basics of Information Security”,”y”:2},{“label”:”The InfoSec Handbook”,”y”:1},{“label”:”Virtual Box 5.0″,”y”:1},{“label”:”The Hacker Playbook”,”y”:1}]

    #8855

    Anjali
    Participant

    Hello,

    We just tried your code with above provided data and chart is rendering properly. Can you let us know if you are getting any error in the console??

    __
    Anjali

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

You must be logged in to reply to this topic.