#1
  1. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,246
    Rep Power
    220

    Table is upside down


    Hi;

    I wanna make a date based sales report with bootstrap but my table is upside down

    Can you help me trun it around and make it look pretty like this?


    Here is my generated code:
    Code:
    <div class="col-md-12" style="text_align:bottom">	
    <div style="height:51px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-18, 17</small></div>
    	<div style="height:21px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-19, 7</small></div>
    	<div style="height:30px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-20, 10</small></div>
    	<div style="height:36px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-21, 12</small></div>
    	<div style="height:24px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-22, 8</small></div>
    	<div style="height:30px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-23, 10</small></div>
    	<div style="height:24px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-24, 8</small></div>
    	<div style="height:12px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-25, 4</small></div>
    	<div style="height:15px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-26, 5</small></div>
    	<div style="height:9px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-27, 3</small></div>
    	<div style="height:174px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-28, 58</small></div>
    	<div style="height:210px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-29, 70</small></div>
    	<div style="height:141px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-30, 47</small></div>
    	<div style="height:237px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2016-12-31, 79</small></div>
    	<div style="height:285px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2017-01-01, 95</small></div>
    	<div style="height:108px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2017-01-02, 36</small></div>
    	<div style="height:30px; width:60px; float:left; background-color:green; margin-right:2px;"><small>2017-01-03, 10</small></div>
    
    
    
    </div>

    And here is the php
    PHP Code:
    <div class = "col-md-12" style = "text_align:bottom">    
            <?php 
            
    function getDatesFromRange($start$end$format 'Y-m-d') {
                
    $array = array();
                
    $interval = new DateInterval('P1D');

                
    $realEnd = new DateTime($end);
                
    $realEnd->add($interval);

                
    $period = new DatePeriod(new DateTime($start), $interval$realEnd);

                foreach(
    $period as $date) { 
                    
    $array[] = $date->format($format); 
                }

                return 
    $array;
            }
            
    $dates getDatesFromRange('2016-12-18''2017-01-03');
            
    ?>
                
      
                  
                        <?php foreach($dates as $day)
                            {
                                
    $days_sales=1;
                                
    $bg='blue';
                                
    $sales_counter="&nbsp;";
                                foreach(
    $all_transactions as $transaction=>$row)
                                    {
                                        if(
    $row['transaction_time']!=NULL && date('Y-m-d',strtotime($row['transaction_time']))==$day)
                                            {
                                                
    $sales_counter=$days_sales++;
                                                
    $bg='green';
                                            }
                                    }
                                
    ?>
                                <div style = "height:<?php echo $days_sales*3;?>px; width:60px; float:left; background-color:<?php echo $bg;?>; margin-right:2px;"><small><?php echo $day;?><?php echo $days_sales;?></small></div>
                          <?php ?>
                       
                  
                           
            </div>    
        </div>

    Thanks
  2. #2
  3. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,437
    Rep Power
    9645
  4. #3
  5. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,246
    Rep Power
    220
    Very beautiful.

    Is it possible to keep all the columns in one line? Make them skinnier rather than dropping to the next line.

    Because my date range is gonna be like 2 years I wanna see it all in one line.

    Thanks
    Last edited by English Breakfast Tea; October 26th, 2017 at 11:08 PM.
  6. #4
  7. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,437
    Rep Power
    9645
    Learn about the wonder that is flexbox. Really, spend a few minutes reading it right now.

    Make the container of all the columns be display:flex to enable it. For each of the columns (note that's the outer container, not the inner thing with the green background) you can get rid of the display: because flexbox will take over.
    Then think about how you want each of those columns to respond within flex. Your answer should be along the lines of "don't expand, allow it to shrink, and use a default width of 60px". Then write the appropriate flex: rule, which replaces the width.

    Then think about imposing a minimum width on the main container so the columns can't resize too small.
    Last edited by requinix; October 27th, 2017 at 12:29 AM.

IMN logo majestic logo threadwatch logo seochat tools logo