Bar graph using php and mysql

Question

Requirement Bar chart from MySql data , i have working code for static bar chart the code as follows -->

<script>
var data = [    
    [0, 11], //London, UK
    [1, 15], //New York, USA
    [2, 25], //New Delhi, India
    [3, 24], //Taipei, Taiwan
    [4, 13], //Beijing, China
    [5, 18]  //Sydney, AU
];
var dataset = [
    { label: "barchart", data: data, color: "#5482FF" }
];
var ticks = [
    [0, "London"],
    [1, "New Mumbai"],
    [2, "New Delhi"],
    [3, "Taipei"],
    [4, "Beijing"],
    [5, "Sydney"]
];
<script>

but for dynamic bar chart data is coming from database and data is in also array format as follows

Array
(
    [0] => Array
        (
            [product] => abc
            [total] => 21
        )
    [1] => Array
        (
            [product] => xyz
            [total] => 1
        )
    [2] => Array
        (
            [product] => pqr
            [total] => 13
        )
)

how to create bar chart from this data ? or any suggestion?

Show an example of how you'd use that PHP array in the example in JavaScript. — Shahar
– Shahar, Commented Jan 30, 2015 at 6:17
@Shahar this is what i want to know , how should i add this array above script — webpic
– webpic, Commented Jan 30, 2015 at 6:20
I actually meant use that specific example and show how it would look like if you did it manually. — Shahar
– Shahar, Commented Jan 30, 2015 at 6:20

Ankur Bhadania · Accepted Answer · 2015-01-30 06:57:53Z

1

used chart.js
document of chart http://www.chartjs.org/docs/

example of bar chart.I hope this help you

<!doctype html>
<html>
    <head>
        <title>Bar Chart</title>
        <script src="Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="600"></canvas>
<?php 
$array=array
(
    '0' => array
        (
            'product' => 'abc',
            'total' => 21
        ),
    '1' => array
        (
            'product' => 'xyz',
            'total' => 1
        ),
    '2' => array
        (
            'product' => 'pqr',
            'total' => 13
        )
);

?>


<script>
        var lab=[];
        var data=[];
        <?php 
        foreach($array as $tem)
        {

            ?>

            lab.push('<?php echo $tem['product']; ?>');
            data.push('<?php echo $tem['total']; ?>');
        <?php }

        ?>

        var barChartData = {
            labels : lab,
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    data : data
                },

            ]

        }

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

    </script>
    </body>
</html>

edited Jan 30, 2015 at 6:57

answered Jan 30, 2015 at 6:19

Ankur Bhadania

4,1681 gold badge25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

webpic Over a year ago

i want implement this Bar chart with data coming from database

Ankur Bhadania Over a year ago

@itsoftware wait i will create for you

Ankur Bhadania Over a year ago

@itsoftware check now

webpic Over a year ago

this is working but the array you have written i m getting this array in $results format then i have to do foreach($results as $result) how to implement that in <script> array you have mention its static

Ankur Bhadania Over a year ago

yes you can change the array name and first you get data from data base using the query.and used the results array with loop

|

Abhi · Accepted Answer · 2015-01-30 06:44:26Z

0

 $results = "data From the DB";

  $ticks = array();

  foreach($results as $result){

      $data[0] = $result['product'];

      $data[1] = $result['total'];

      $ticks[] = $data;

    }

    <script>
    var ticks =  <?php print_R($ticks); ?> 
    </script>

edited Jan 30, 2015 at 6:44

answered Jan 30, 2015 at 6:37

Abhi

1,1152 gold badges12 silver badges29 bronze badges

7 Comments

webpic Over a year ago

i have tried your code but i m not getting any output , its blank page

Abhi Over a year ago

@itsoftware I updated var ticks = <?php print_R($ticks); ?> did u tried that

webpic Over a year ago

thanks for reply i have tried but again not getting any output

Abhi Over a year ago

are you able to get data for $results

webpic Over a year ago

yes i m getting data for $results when i did pr($results) i m getting array as i mention in above question you can see the array

|

Collectives™ on Stack Overflow

Bar graph using php and mysql

2 Answers 2

6 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related