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, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #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.


    I have the following files saved in localhost/canvasjs/

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

    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” >
    <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


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


    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.





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




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




    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??


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

You must be logged in to reply to this topic.