FORUMS

Select any forum below to ask question

Home › forums › Using CanvasJS › How can I use PHP MySQL data to create a bar chart like this

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 3 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • January 29, 2016 at 10:42 am #9837

    SungminIpsul

    This is my data.php
    <?php

    header(‘Content-Type: application/json’);

    include(“dbFunctions.php”);

    $data_points1 = array();
    $data_points2 = array();
    $data_points3 = array();

    $result1 = mysqli_query($link,”SELECT facility_cat, COUNT(facility_cat) WHERE YEAR(CURDATE()) -2 FROM booking GROUP BY facility_cat”);
    $result2 = mysqli_query($link,”SELECT facility_cat, COUNT(facility_cat) ,YEAR(CURDATE()) -1 FROM booking GROUP BY facility_cat”);
    $result3 = mysqli_query($link,”SELECT facility_cat, COUNT(facility_cat) ,YEAR(CURDATE()) FROM booking GROUP BY facility_cat”);

    while($row = mysqli_fetch_array($result1))
    {
    $point1 = array(“indexLabel” =>$row[‘facility_cat’], “label” => $row[‘facility_cat’] , “y” => $row[‘COUNT(facility_cat)’]);

    array_push($data_points1, $point1);
    }

    while($row = mysqli_fetch_array($result2))
    {
    $point2 = array(“indexLabel” =>$row[‘facility_cat’], “label” => $row[‘facility_cat’] , “y” => $row[‘COUNT(facility_cat)’]);

    array_push($data_points2, $point2);
    }
    while($row = mysqli_fetch_array($result3))
    {
    $point3 = array(“indexLabel” =>$row[‘facility_cat’], “label” => $row[‘facility_cat’] , “y” => $row[‘COUNT(facility_cat)’]);

    array_push($data_points3, $point3);
    }

    echo json_encode($data_points1, JSON_NUMERIC_CHECK);
    echo json_encode($data_points2, JSON_NUMERIC_CHECK);
    echo json_encode($data_points3, JSON_NUMERIC_CHECK);

    mysqli_close($link);

    ?>

    This is my DataBarChart.php
    <?php
    include(“dbFunctions.php”);
    session_start();

    ?>
    <html>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <link href=”stylesheets/style.css” rel=”stylesheet”/>
    <script type=”text/javascript” src=”script/jquery.validate.min.js”></script>
    <script type=”text/javascript” src=”script/canvasjs.min.js”></script></head>
    <script type=”text/javascript” src=”js/jquery-1.6.1.min.js”></script></head>
    <title>Online Booking System</title>
    <script type=”text/javascript”>
    $(document).ready(function () {

    $.getJSON(“DataBarChart.php”, function (result1,result2,result3) {

    var chart = new CanvasJS.Chart(“BarChart”, {

    theme: “theme2”,
    title:{
    text: “Bookings over the years”
    },
    exportFileName: “Bookings over the years”, //Give any name accordingly
    exportEnabled: true,
    axisY: {
    includeZero: false,

    },
    axisX: {
    interval: 10
    },
    axisY: {
    title: “Number of Bookings Made over the years”,
    maximum: 250
    },

    data: [
    {
    type: “bar”,
    showInLegend: true,
    toolTipContent: “{y} – #percent %”,
    legendText: “{indexLabel}”,
    color: “gold”,
    dataPoints: result1
    },
    {
    type: “bar”,
    showInLegend: true,
    toolTipContent: “{y} – #percent %”,
    legendText: “{indexLabel}”,
    color: “silver”,
    dataPoints: result2
    },
    {
    type: “bar”,
    showInLegend: true,
    toolTipContent: “{y} – #percent %”,
    legendText: “{indexLabel}”,
    color: “#DCA978″,
    dataPoints: result3
    },
    ]
    });

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

    <div id=”MainContent”>
    <div class=”sub_contents”>
    <h8>Number of Facility Book Pie Chart</h8>
    <div id=”BarChart” style=”height: 300px; width: 100%; float: right;”></div>
    </div>

    </div>

    </body>

    February 5, 2016 at 11:59 am #9849

    Vishwas R

    Hi SungminIpsul,
    Can you kindly provide us the json-data, so that we can look into it and check the issue. Refer this thread to know how to display MySQL data on CanvasJS

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.