Home forums Using CanvasJS Errors with mySQL data

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  Anjali 4 years, 1 month ago.

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

    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.

    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

    mugenheimer,

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

    __
    Anjali

    #8737

    [{“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

    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.