FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Errors with mySQL data

Errors with mySQL data

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

Tagged: ,

  • May 14, 2015 at 1:24 am #8720

    mugenheimer

    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.

    https://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&#8221; >
    <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.

    May 15, 2015 at 6:20 pm #8730

    Anjali

    mugenheimer,

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

    __
    Anjali

    May 15, 2015 at 10:38 pm #8737

    mugenheimer

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

    May 18, 2015 at 7:22 pm #8855

    Anjali

    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)

Tagged: ,

You must be logged in to reply to this topic.