In this tutorial, we are going to learn how to create Graph using Database Driven in PHP/MySQL. This tutorial helps you make a simple graph and your data came from your database. This simple graph shows the different kind of motorcycle and their corresponding quantity. We are going to use jQuery and PHP/MySQL to create this simple graph.

Creating our Database Connection

1. <?php
   
2. 
   
3. mysql_select_db
   
   (
   
   'product'
   
   ,
   
   mysql_connect
   
   (
   
   'localhost'
   
   ,
   
   'root'
   
   ,
   
   ''
   
   )
   
   )
   
   or die
   
   (
   
   mysql_error
   
   (
   
   )
   
   )
   
   ;
   
4. 
   
5. ?>
   

This script is used to display the quantity of different kinds of motorcycle.

1. <
   
   script type=
   
   "application/javascript"
   
   >
   
2. var
   
   motorcycle_chart =
   
   new
   
   AwesomeChart(
   
   'motorcycle_graph'
   
   )
   
   ;
   
3. motorcycle_chart.data
   
   =
   
   [
   
4. <?
   
   php
   
5. $query =
   
   mysql_query(
   
   "select * from product"
   
   )
   
   or die(
   
   mysql_error(
   
   )
   
   )
   
   ;
   
6. while (
   
   $row =
   
   mysql_fetch_array(
   
   $query)
   
   )
   
   {
   
7. ?>
   
8. <?
   
   php echo $row[
   
   'Qty'
   
   ]
   
   . ','
   
   ;
   
   ?>
   
9. <?
   
   php }
   
   ;
   
   ?>
   
10. ]
    
    ;
    
11. </
    
    script>
    

Next, this script is to display the name of different kinds of motorcycle.

1. <
   
   script type=
   
   "application/javascript"
   
   >
   
2. motorcycle_chart.labels
   
   =
   
   [
   
3. <?
   
   php
   
4. $query =
   
   mysql_query(
   
   "select * from product"
   
   )
   
   or die(
   
   mysql_error(
   
   )
   
   )
   
   ;
   
5. while (
   
   $row =
   
   mysql_fetch_array(
   
   $query)
   
   )
   
   {
   
6. ?>
   
7. <?
   
   php echo "'"
   
   . $row[
   
   'name'
   
   ]
   
   . "'"
   
   . ','
   
   ;
   
   ?>
   
8. <?
   
   php }
   
   ;
   
   ?>
   
9. ]
   
   ;
   
10. </
    
    script>
    

To change the color of the graph, this is the sour code to help you to change one by one.

1. <
   
   script type=
   
   "application/javascript"
   
   >
   
2. motorcycle_chart.colors
   
   =
   
   [
   
   'gold'
   
   ,
   
   'skyblue'
   
   ,
   
   '#FF6600'
   
   ,
   
   'pink'
   
   ,
   
   'darkblue'
   
   ,
   
   'lightpink'
   
   ,
   
   'green'
   
   ]
   
   ;
   
3. motorcycle_chart.randomColors
   
   =
   
   true
   
   ;
   
4. motorcycle_chart.animate
   
   =
   
   true
   
   ;
   
5. motorcycle_chart.animationFrames
   
   =
   
   20
   
   ;
   
6. motorcycle_chart.draw
   
   (
   
   )
   
   ;
   
7. </
   
   script>
   

The complete source code.

1. <
   
   script type=
   
   "application/javascript"
   
   >
   
2. var
   
   motorcycle_chart =
   
   new
   
   AwesomeChart(
   
   'motorcycle_graph'
   
   )
   
   ;
   
3. motorcycle_chart.data
   
   =
   
   [
   
4. <?
   
   php
   
5. $query =
   
   mysql_query(
   
   "select * from product"
   
   )
   
   or die(
   
   mysql_error(
   
   )
   
   )
   
   ;
   
6. while (
   
   $row =
   
   mysql_fetch_array(
   
   $query)
   
   )
   
   {
   
7. ?>
   
8. <?
   
   php echo $row[
   
   'Qty'
   
   ]
   
   . ','
   
   ;
   
   ?>
   
9. <?
   
   php }
   
   ;
   
   ?>
   
10. ]
    
    ;
    
11. 
    
12. motorcycle_chart.labels
    
    =
    
    [
    
13. <?
    
    php
    
14. $query =
    
    mysql_query(
    
    "select * from product"
    
    )
    
    or die(
    
    mysql_error(
    
    )
    
    )
    
    ;
    
15. while (
    
    $row =
    
    mysql_fetch_array(
    
    $query)
    
    )
    
    {
    
16. ?>
    
17. <?
    
    php echo "'"
    
    . $row[
    
    'name'
    
    ]
    
    . "'"
    
    . ','
    
    ;
    
    ?>
    
18. <?
    
    php }
    
    ;
    
    ?>
    
19. ]
    
    ;
    
20. motorcycle_chart.colors
    
    =
    
    [
    
    'gold'
    
    ,
    
    'skyblue'
    
    ,
    
    '#FF6600'
    
    ,
    
    'pink'
    
    ,
    
    'darkblue'
    
    ,
    
    'lightpink'
    
    ,
    
    'green'
    
    ]
    
    ;
    
21. motorcycle_chart.randomColors
    
    =
    
    true
    
    ;
    
22. motorcycle_chart.animate
    
    =
    
    true
    
    ;
    
23. motorcycle_chart.animationFrames
    
    =
    
    20
    
    ;
    
24. motorcycle_chart.draw
    
    (
    
    )
    
    ;
    
25. </
    
    script>
    

This is the result.


Hope that this tutorial will help you a lot.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download