cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container">
  <div class="row">
    <div class="col-sm-2"></div>
    <div class="col-sm-10">
      <h1 class="primary-color serif bold page-title">Money Meter</h1>
      <h2 class="page-subhead">From March 1, 2015 To March 23, 2015</h2>
      <p class="data-current">Current as of 03/23/15 at 5:45pm</p>
    </div>
    <div class="col-sm-2 pull-right">
      <select name="time-span" class="time-dropdown">
        <option value="thisMonth" selected>This Month</option>
        <option value="thisWeek">This Week</option>
        <option value="Last30Days">Last 30 Days</option>
      </select>
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm-2 serif">
      <ul class="text-right left-nav">
        <li>Recent Activity</li>
        <li class="selected">Money Meter</li>
        <li>HOU Refunds</li>
        <li>Bill Payments</li>
        <li>Rewards</li>
      </ul>
    </div>
    
    <div class="col-sm-10"> 
      <div class="row">
        <div class="col-sm-2 no-padding-right">
          <div class="meter-nav">
            <ul class="nav nav-tabs white text-center" role="tablist">
              <li role="presentation"><a href="#overview" aria-controls="overview" role="tab" data-toggle="tab">
                <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span>
                <p>Overview</p></a>
              </li>
              <li role="presentation"><a href="#categories" aria-controls="categories" role="tab" data-toggle="tab">
                <span class="glyphicon glyphicon-adjust" aria-hidden="true"></span>
                <p>Categories</p></a>
              </li>
              <li role="presentation"><a href="#history" aria-controls="history" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                <p>History</p></a>
              </li>
              <li role="presentation" class="active"><a href="#budgets" aria-controls="budgets" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span>
                <p>Budgets</p></a>
              </li>
              <li role="presentation"><a href="#transactions" aria-controls="transactions" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span>
                <p>Transactions</p></a>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="col-sm-10 no-padding-left main-area">
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade" id="overview">
              <div class="col-sm-6 no-padding-left border-right">
                <h3 class="overview-sec-titles">Spending by Category</h3>
                <div class="chart-container">
                  <div id="overview-donut"></div>
                </div>
              </div>
              
              <div class="col-sm-6 no-padding-right">
                <h3 class="overview-sec-titles">Monthly Cash Flow</h3>
                <div class="chart-container">
                  <div id="overview-cashflow"></div>
                </div>
                <p>Deposits made vs. actual spending</p>
              </div>
              <div class="clearfix"></div>
              <div class="col-sm-6 no-padding-left border-top border-right" id="overview-budget">
                <h3 class="overview-sec-titles">Monthly Budgets</h3>
                <!--
                Target Div for multiple budgets in one chart
                <div id="overview-budgets"></div>-->
                <div class="budget-bar-single">
                  <div class="col-xs-12 no-padding">
                      <h6 class="pull-left"><strong>Total Budgeted</strong></h6>
                      <em>
                        <p class="money-left pull-right"><strong>$185.36</strong> of $200 spent</p>
                      </em>
                    <div class="bar-chart-container" id="overview-budget-total"></div>
                  </div>
                <div class="clearfix"></div>
                </div>
                <div class="budget-bar-single">
                  <div class="col-xs-12 no-padding">
                    <h6 class="pull-left">Rent/Housing</h6>
                    <em>
                      <p class="money-left pull-right"> <strong>$20</strong> of $75 spent</p>
                    </em>
                    <div class="bar-chart-container" id="overview-budget-1"></div>
                  </div>
                  <div class="clearfix"></div>
                </div>
                <div class="budget-bar-single">
                  <div class="col-xs-12 no-padding">
                  <h6 class="pull-left">Food/Dining</h6>
                    <em>
                      <p class="money-left pull-right"><strong>$45.63</strong> of $50 spent</p>
                    </em>
                    <div class="bar-chart-container bar-chart-warning" id="overview-budget-2"></div>
                  </div>
                  <div class="clearfix"></div>
                </div>
                <div class="budget-bar-single">
                  <div class="col-xs-12 no-padding">
                    <h6 class="pull-left">Education/Books</h6>
                    <em>
                      <p class="money-left pull-right"><strong>$45.63</strong> of $50 spent</p>
                    </em>
                    <div class="bar-chart-container" id="overview-budget-3"></div>
                  </div>
                  <div class="clearfix"></div>
                </div>
              </div>
              <div class="col-sm-6 no-padding-right border-top">
                <h3 class="overview-sec-titles">Spending History</h3>
                <div id="overview-history"></div>
              </div>
            </div>
            
            <div role="tabpanel" class="tab-pane fade main-area-padding" id="categories">
              <h3 class="serif bold section-title">Spending by Category</h3>
              <div class="col-sm-7">
                <div class="chart-container">
                  <div id="category-donut"></div>
                </div>
              </div>
              <div class="clearfix"></div>
              <table class="table categories-table">
                <thead>
                  <tr>
                    <th>Your spending breakdown</th>
                    <th class="text-right">Amount</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Rent/Housing</td>
                    <td class="text-right">$228.18</td>
                    <td><a href="#" class="primary-color">Edit</a></td>
                  </tr>
                  <tr>
                    <td>Food/Dining</td>
                    <td class="text-right">$114.09</td>
                    <td><a href="#" class="primary-color">Edit</a></td>
                  </tr>
                  <tr>
                    <td>Education/Books</td>
                    <td class="text-right">$158.63</td>
                    <td><a href="#" class="primary-color">Edit</a></td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td><strong>Total</strong></td>
                    <td class="text-right">    <strong>$456.35</strong>
                    </td>
                    <td></td>
                  </tr>
                </tfoot>
              </table>
            </div>
            
            <div role="tabpanel" class="tab-pane main-area-padding" id="history">
              <h3 class="serif bold section-title">Spending History</h3>
              <!--<h4 class="serif bold section-subhead"><em>Cash Flow</em></h4>
              <div id="cashFlow-horizontal"></div>
              <p class="section-subhead">The amount of deposits you make vs. your total spending</p>
              <div class="spacer-2em"></div>
              
              <h4 class="serif bold section-subhead"><em>Spending History</em></h4>-->
              <div id="spending-lineChart"></div>
            </div>
            
            <div role="tabpanel" class="tab-pane fade in active main-area-padding" id="budgets">
              <div class="pull-left">
                <h3 class="serif bold section-title">March 2015 Budget</h3>
                <label class="radio-inline">
                  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked> Dollars
                </label>
                <label class="radio-inline">
                  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Percentages
                </label>
              </div>
              <button type="button" class="btn btn-solid pull-right">Create a Budget</button>
              <div class="clearfix"></div>
              <div class="budgets-group row text-center">
                <div class="col-sm-4 col-xs-6 budget-single">
                  <h5><strong>Total Spending</strong></h5>
                  <div id="budget1" class="budget-warning"></div>
                  <h5>$130.56 of $200 spent</h5>
                </div>
                <div class="col-sm-4 col-xs-6 budget-single">
                  <h5>Food/Dining</h5>
                  <div id="budget2" class="budget-over"></div>
                  <h5>$600 of $500 spent</h5>
                </div>
                <div class="col-sm-4 col-xs-6 budget-single">
                  <h5>Entertainment</h5>
                  <div id="budget3" class="budget-in"></div>
                  <h5>$40.23 of $50 spent</h5>
                </div>
                <div class="col-sm-4 col-xs-6 budget-single">
                  <h5>Education/Books</h5>
                  <div id="budget4" class="budget-in"></div>
                  <h5>$40.23 of $50 spent</h5>
                </div>
                <div class="col-sm-4 col-xs-6 budget-single">
                  <h5>Travel</h5>
                  <div id="budget5" class="budget-in"></div>
                  <h5>$40.23 of $50 spent</h5>
                </div>
                <div class="col-sm-4 col-xs-6 budget-single">
                  <h5>Clothing</h5>
                  <div id="budget6" class="budget-in"></div>
                  <h5>$40.23 of $50 spent</h5>
                </div>
              </div>
            </div>
            
            <div role="tabpanel" class="tab-pane fade main-area-padding" id="transactions">
              <h3 class="serif bold section-title">Transactions</h3>
              <p>To change the category of a transaction, select the appropriate category in the dropdown below. </p>
              
              <table class="table table-striped table-transactions">
                <thead class="serif">
                  <tr>
                    <th>Date</th>
                    <th>Type</th>
                    <th>Description</th>
                    <th class="text-right">Amount</th>
                    <th>Category</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>12/29/14</td>
                    <td class="text-center">
                      <span class="glyphicon glyphicon-circle-arrow-up bigger primary-color" aria-hidden="true"></span>
                    </td>
                    <td>
                      <small>Transfer from Bank of America via eCheck (Request on 12/04 at 15:18) $25.00 available on Friday, December 5, 2014</small>
                    </td>
                    <td class="text-right">$100.00</td>
                    <td>
                      <select name="spending-cat" class="spending-cat other-income-select">
                        <option value="Other Income" selected>Other Income</option>
                        <option value="refund">Refund</option>
                        <option value="gift">Gift</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td>12/14/14</td>
                    <td class="text-center">
                       <span class="glyphicon glyphicon-circle-arrow-down bigger" aria-hidden="true"></span>
                    </td>
                    <td>
                      <small>Debit Card Transaction at SQ *SOME NEW HIP BAR NEW HAVEN on 12/29</small>
                    </td>
                    <td class="text-right">$25.00</td>
                    <td>
                      <select name="spending-cat" class="spending-cat food-dining-select">
                        <option value="Food/Dining" selected>Food/Dining</option>
                        <option value="Education">Education</option>
                        <option value="Entertainment">Entertainment</option>
                        <option value="Other Income">Other Income</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td>12/03/14</td>
                    <td class="text-center">
                      <span class="glyphicon glyphicon-circle-arrow-down bigger" aria-hidden="true"></span>
                    </td>
                    <td>
                       <small>Debit Card Transaction at SQ *SOME NEW HIP BAR NEW HAVEN on 12/29</small>
                    </td>
                    <td class="text-right">$15.36</td>
                    <td>
                      <select name="spending-cat" class="spending-cat food-dining-select">
                        <option value="Food/Dining" selected>Food/Dining</option>
                        <option value="Education">Education</option>
                        <option value="Entertainment">Entertainment</option>
                        <option value="Other Income">Other Income</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td>11/28/14</td>
                    <td class="text-center">
                      <span class="glyphicon glyphicon-circle-arrow-down bigger" aria-hidden="true"></span>
                    </td>
                    <td>
                      <small>Debit Card Transaction at SQ *SOME NEW HIP BAR NEW HAVEN on 12/29</small>
                    </td>
                    <td class="text-right">$52.78</td>
                    <td>
                      <select name="spending-cat" class="spending-cat entertainment-select">
                        <option value="Food/Dining">Food/Dining</option>
                        <option value="Education">Education</option>
                        <option value="Entertainment" selected>Entertainment</option>
                        <option value="Other Income">Other Income</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td>12/24/14</td>
                    <td class="text-center">
                      <span class="glyphicon glyphicon-circle-arrow-up bigger primary-color" aria-hidden="true"></span>
                    </td>
                    <td>
                      <small>Transfer from Bank of America via eCheck (Request on 12/04 at 15:18) $25.00 available on Friday, December 5, 2014</small>
                    </td>
                    <td class="text-right">$300.00</td>
                    <td>
                      <select name="spending-cat" class="spending-cat other-income-select">
                        <option value="Food/Dining">Food/Dining</option>
                        <option value="Education">Education</option>
                        <option value="Entertainment">Entertainment</option>
                        <option value="Other Income"  selected>Other Income</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td>11/28/14</td>
                    <td class="text-center">
                      <span class="glyphicon glyphicon-circle-arrow-down bigger" aria-hidden="true"></span>
                    </td>
                    <td>
                      <small>Debit Card Transaction at SQ *SOME NEW HIP BAR NEW HAVEN on 12/29</small>
                    </td>
                    <td class="text-right">$52.78</td>
                    <td>
                      <select name="spending-cat" class="spending-cat entertainment-select">
                        <option value="Food/Dining">Food/Dining</option>
                        <option value="Education">Education</option>
                        <option value="Entertainment" selected>Entertainment</option>
                        <option value="Other Income">Other Income</option>
                      </select>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>
    
  </div>
  
</div>
            
          
!
            
              .container{
}

.no-padding{
  padding: 0;
}

.no-padding-right{
  padding-right: 0;
}

.no-padding-left{
  padding-left: 0;
}

.bigger{
  font-size: 170%;
}

.smaller{
  font-size: 90%;
}

.main-area-padding{
  padding: 1em 2em;
}

.spacer-2em{
  height: .5em;
  width: 100%;
}

.inline{
  display: inline;
}

.yellow{
  background: yellow;
}

.white{
  color: #fff;
}

.primary-color{
  color: #77b800;
}

.serif{
  font-family: georgia;
}

.bold{
  font-weight: bold;
}

.page-title{
  margin: 1em 0 0 0;
  font-size: 3em;
  line-height: .5em;
}

.overview-sec-titles{
  font-size: 1em;
  font-weight: bold;
}

.page-subhead{
  font-size: 1.3em;
}

.data-current{
  font-size: .9em;
  line-height: 0;
}

.time-dropdown{
  box-shadow: 1px 1px 3px #ddd;
  border-radius: 2px;
  margin: 0 0 1em 5em;
  padding: .4em .2em;
}

.left-nav{
  font-size: 1.3em;
  line-height: 2.7em;
  padding: 0;
}

.nav-tabs > li{
  float: none;
}

  .meter-nav ul li.active{
    background: #77b800;
  }

  ul{
    list-style-type: none;
  }

    ul.left-nav .selected{
      color: #77b800;
      font-weight: bold;
    }
      
      
.meter-nav{
  background: #676768;
}

  .meter-nav ul{
    padding: 0;
  }
  
  .meter-nav ul li{
    text-align: center;
    padding: 2.5em 0;
  }

    .meter-nav ul li + li{
      border-top: 1px solid #fff;
    }
    
    .meter-nav ul li span{
      font-size: 2.2em;
    }

    .meter-nav ul li p{
      font-family: georgia;
      margin: .4em 0 0 0 ;
    }

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
  background: none;
  color: white;
  border: 0 none;
  padding: 0;
}

  .nav-tabs > li > a{
    border: 0 none;
    color: white;
    padding: 0;
  }  

    .nav-tabs > li >a:hover{
      background: none;
      border: 0 none;
      padding: 0;
    }

.main-area{
  background: #f1f2f2;
  min-height: 46.5em;
  max-height: 46.5em;
}

  .main-area-padding{
    padding: 0 1.5em;
  }

  #overview .col-sm-6{
    padding: 0 1.5em;
    height: 23.4em;
  }

  .section-title{
    font-size: 1.3em;
  }

    .section-subhead{
      font-size: 1.1em;
      padding: 1em 0 0 3em;
    }

svg{
  overflow: visible !important;
}

/*overview styles*/
.border-right{
  border-right: 3px solid #d1d1d1;
}

.border-top{
  border-top: 3px solid #d1d1d1;
}

/*overview donut chart*/
#overview-donut .c3-chart-arcs-title{
  font-size: 2em;
}

/*Overview budget*/

#overview-budget .c3-target-Money-Spent .c3-bars path{
  stroke-width: 1px;
  fill: #77b800 !important;
  stroke: #77b800 !important;
}

#overview-budget .c3-target-Money-Left .c3-bars path{
  stroke: #77b800 !important;
  stroke-width:1px;
  fill: #fff !important;
}

#overview-budget h6{
  margin: 0;
  font-size: .85em;
}

.budget-bar-single{
  padding: .7em 0;
}
  .budget-bar-single text.c3-text{
    fill: #77b800 !important;
    font-size: 1.25em !important;
  }


p.money-left{
  font-size: .9em;
  margin: -3px 0 0 0;
}

.bar-chart-container{
  max-height: 38px !important;
}

.bar-chart-container .c3-chart-bars{
  width: 100% !important;
}

.bar-chart-container .c3-chart-bars{
  width: inherit !important;
}

#overview-budget .bar-chart-warning .c3-target-Money-Left .c3-bars path{
  stroke: #dd7a27 !important;
}

#overview-budget .bar-chart-warning .c3-target-Money-Spent .c3-bars path{
  fill: #dd7a27 !important;
  stroke: #dd7a27 !important;
}


/*overview spending line chart*/

#overview-history{
  width: 75% !important;
}

/*overview donut chart*/
#overview-donut{
  width: 65% !important;
}

#overview-donut .svg-content-responsive{
  margin: 0 0 0 -17px;
}

/*donut chart*/

.c3-legend-background{
  fill: none;
  stroke: none;
}

.c3-chart-arcs-title{
  font-size: 3em;
}

.categories-table{
  margin: 2em auto 1em;
  width: 80%;
}


.chart-container {
    display: inline-block;
    position: relative;
    width: 100% !important;
    /* padding-bottom: 100%; */  /*aspect ratio */
    vertical-align: top;
    overflow: visible;
}

.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

/*cash flow bar chart*/

#cashFlow-horizontal{
  height: 120px;
}

.c3-texts-Cash-In, .c3-texts-Cash-Out{
  font-size: 2em;
}

/*Line Chart*/
#spending-lineChart{
  margin: 4em 0 0 0;
  width: 80% !important;
}


/*axis lines*/
.c3 path.domain {
  fill: #b4d579;
  stroke: none;
}
  /*tick lines*/
  .c3 line{
    stroke: none;
  }

/*budget tab*/

.btn-solid{
  background: #77b800;
  border-radius: 0;
  color: #fff;
  margin: 1.25em .25em 0 0;
  padding: .5em 1em;
}

.budgets-group{
  overflow-y: scroll;
  padding: 1em 2em 1em;
}

  .budget-single{
    padding: 1.5em 1em;
  }

/*Radial CSS plugin css*/
#test .arc2 {
  stroke-weight:0.1;
  fill: #3660b0;
}

        #outer {
            background:#FFFFFF;
            border-radius: 5px;
            color: #000;
        }

        #budget1, #budget2, #budget3, #budget4, #budget5, #budget6 {
            width: 100%;
            height: 175px;
            box-sizing: border-box;
            float: left;
        }

        /*Negative budget*/
        #budget2 .arc {
            stroke-weight: 0.1;
            fill: #EC0000;
        }
        /*inner negative arc*/
        #budget2 .arc2 {
            stroke-weight: 0.1;
            fill: #B00500;
        }

        /*safe zone budget*/
        #budget3 .arc {
            stroke-weight: 0.1;
            fill: #1d871b;
        }

        .selectedRadial {
            border-radius: 3px;
            background: #f4f4f4;
            color: #000;
            box-shadow: 0 1px 5px rgba(0,0,0,0.4);
            -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
            border: 1px solid rgba(200,200,200,0.85);
        }

        .radial {
            border-radius: 3px;
            background: #FFFFFF;
            color: #000;

        }



/*radial in page css*/
.background {
    fill: #FFFFFF;
    fill-opacity: 0.01;
}

/*Grey not completed circle*/
.component {
    fill: green; 
    stroke:#f1f2f2; 
    stroke-width: 9px;
}

.component .label {
    font-family: Myriad, "Helvetic Neue", Helvetica, Arial;
    text-anchor: middle;
    fill: #0000FF;
}

/*color arc*/
.arc {
    stroke-weight:0.1;
    fill: #4e8fff;
}

.arc2 {
    stroke-weight:0.1;
    fill: #3660b0;
}

.label {
    font-family:  Myriad, "Helvetic Neue", Helvetica, Arial;
    text-anchor: middle;
}

.radial-svg {
    display: block;
    margin: 0 auto;
}

        .budget-warning .component{
          fill: #FD9A00;
        }

        .budget-warning .arc{
          fill: #FD9A00;
        }

        .budget-over .component{
          fill: #EC0000;
        }

        .budget-over .arc{
          fill: #EC0000 !important;
        }

         .budget-over .arc2 {
            stroke-weight: 0.1;
            fill: #B00500 !important;
        }

        .budget-in .component{
          fill: #75ba43;
        }

        .budget-in .arc{
          fill: #75ba43 !important;
        }

/*Transaction Tab*/
.table-transactions{
  margin: 4em auto 1em;
  overflow-y: scroll;
  width: 88%;
}

.table-transactions>tbody>tr>td{
  vertical-align: middle;
}

.spending-cat{
  border: 0 none;
  border-radius: 4px;
  color: #fff;
  padding: .5em .25em;
}

  .other-income-select{
    background: magenta;
  }

  .food-dining-select{
    background: #ED9100;
  }

  .entertainment-select{
    background: #3C9EC2;
  }

    option{
      background: #fff;
      color: #464646;
    }


/*Mobile Media Queries*/
@media (max-width: 768px) {
  
  .meter-nav ul li{
    float: left;
    padding: 1em 0;
    width: 20%
  }

    .meter-nav ul li + li{
      border-left: 1px solid #fff;
    }
  
  .main-area{
    margin: 0 1em;
  }
  
  .col-sm-2{
    padding-left: 15px;
    padding-right: 15px;
  }
  
  
  /*Overview styles*/
  .border-top#overview-budget, #overview .border-right, #overview .border-top{
    border: 0 none;
  }
  
  #overview .col-sm-6{
    border-bottom: 3px solid #ccc;
  }
  
  #overview .col-sm-6:last-child{
    border-bottom: 0 none;
}
            
          
!
            
              //prevents the charts from blowing out of their parent divs after hidden in tabs/////
jQuery('a[data-toggle=tab]').on('shown.bs.tab', function() {
  jQuery(window).trigger('resize');
});

//script for radial progress
function radialProgress(parent) {
  var _data = null,
    _duration = 1000,
    _selection,
    _margin = {
      top: 0,
      right: 0,
      bottom: 30,
      left: 0
    },
    __width = 165,
    __height = 200,
    _diameter,
    _label = "",
    _fontSize = 13;

  var _mouseClick;

  var _value = 0,
    _minValue = 0,
    _maxValue = 100;

  var _currentArc = 0,
    _currentArc2 = 0,
    _currentValue = 0;

  var _arc = d3.svg.arc()
    .startAngle(0 * (Math.PI / 180)); //just radians

  var _arc2 = d3.svg.arc()
    .startAngle(0 * (Math.PI / 180))
    .endAngle(0); //just radians

  _selection = d3.select(parent);

  function component() {

    _selection.each(function(data) {

      // Select the svg element, if it exists.
      var svg = d3.select(this).selectAll("svg").data([data]);

      var enter = svg.enter().append("svg").attr("class", "radial-svg").append("g");

      measure();

      svg.attr("width", __width)
        .attr("height", __height);

      var background = enter.append("g").attr("class", "component")
        .attr("cursor", "pointer")
        .on("click", onMouseClick);

      _arc.endAngle(360 * (Math.PI / 180))

      background.append("rect")
        .attr("class", "background")
        .attr("width", _width)
        .attr("height", _height);

      background.append("path")
        .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")")
        .attr("d", _arc);

      background.append("text")
        .attr("class", "label")
        .attr("transform", "translate(" + _width / 2 + "," + (_width + _fontSize) + ")")
        .text(_label);
      var g = svg.select("g")
        .attr("transform", "translate(" + _margin.left + "," + _margin.top + ")");

      _arc.endAngle(_currentArc);
      enter.append("g").attr("class", "arcs");
      var path = svg.select(".arcs").selectAll(".arc").data(data);
      path.enter().append("path")
        .attr("class", "arc")
        .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")")
        .attr("d", _arc);

      //Another path in case we exceed 100%
      var path2 = svg.select(".arcs").selectAll(".arc2").data(data);
      path2.enter().append("path")
        .attr("class", "arc2")
        .attr("transform", "translate(" + _width / 2 + "," + _width / 2 + ")")
        .attr("d", _arc2);

      enter.append("g").attr("class", "labels");
      var label = svg.select(".labels").selectAll(".label").data(data);
      label.enter().append("text")
        .attr("class", "label")
        .attr("y", _width / 2 + _fontSize / 3)
        .attr("x", _width / 2)
        .attr("cursor", "pointer")
        .attr("width", _width)
        // .attr("x",(3*_fontSize/2))
        .text(function(d) {
          return Math.round((_value - _minValue) / (_maxValue - _minValue) * 100) + "%"
        })
        .style("font-size", _fontSize + "px")
        .on("click", onMouseClick);

      path.exit().transition().duration(500).attr("x", 1000).remove();

      layout(svg);

      function layout(svg) {

        var ratio = (_value - _minValue) / (_maxValue - _minValue);
        var endAngle = Math.min(360 * ratio, 360);
        endAngle = endAngle * Math.PI / 180;

        path.datum(endAngle);
        path.transition().duration(_duration)
          .attrTween("d", arcTween);

        if (ratio > 1) {
          path2.datum(Math.min(360 * (ratio - 1), 360) * Math.PI / 180);
          path2.transition().delay(_duration).duration(_duration)
            .attrTween("d", arcTween2);
        }

        label.datum(Math.round(ratio * 100));
        label.transition().duration(_duration)
          .tween("text", labelTween);

      }

    });

    function onMouseClick(d) {
      if (typeof _mouseClick == "function") {
        _mouseClick.call();
      }
    }
  }

  function labelTween(a) {
    var i = d3.interpolate(_currentValue, a);
    _currentValue = i(0);

    return function(t) {
      _currentValue = i(t);
      this.textContent = Math.round(i(t)) + "%";
    }
  }

  function arcTween(a) {
    var i = d3.interpolate(_currentArc, a);

    return function(t) {
      _currentArc = i(t);
      return _arc.endAngle(i(t))();
    };
  }

  function arcTween2(a) {
    var i = d3.interpolate(_currentArc2, a);

    return function(t) {
      return _arc2.endAngle(i(t))();
    };
  }

  function measure() {
    _width = _diameter - _margin.right - _margin.left - _margin.top - _margin.bottom;
    _height = _width;
    _fontSize = _width * .2;
    _arc.outerRadius(_width / 2);
    _arc.innerRadius(_width / 2 * .85);
    _arc2.outerRadius(_width / 2 * .85);
    _arc2.innerRadius(_width / 2 * .85 - (_width / 2 * .15));
  }

  component.render = function() {
    measure();
    component();
    return component;
  }

  component.value = function(_) {
    if (!arguments.length) return _value;
    _value = [_];
    _selection.datum([_value]);
    return component;
  }

  component.margin = function(_) {
    if (!arguments.length) return _margin;
    _margin = _;
    return component;
  };

  component.diameter = function(_) {
    if (!arguments.length) return _diameter
    _diameter = _;
    return component;
  };

  component.minValue = function(_) {
    if (!arguments.length) return _minValue;
    _minValue = _;
    return component;
  };

  component.maxValue = function(_) {
    if (!arguments.length) return _maxValue;
    _maxValue = _;
    return component;
  };

  component.label = function(_) {
    if (!arguments.length) return _label;
    _label = _;
    return component;
  };

  component._duration = function(_) {
    if (!arguments.length) return _duration;
    _duration = _;
    return component;
  };

  component.onClick = function(_) {
    if (!arguments.length) return _mouseClick;
    _mouseClick = _;
    return component;
  }

  return component;
}


//////////////////////donut chart///////////////////////
var chart = c3.generate({
  bindto: '#category-donut',
  data: {
    columns: [
      ['Books/Education', 30],
      ['Food/Dining', 120],
      ['Entertainment', 20],
    ],
    type: 'donut',
    onclick: function(d, i) {
      console.log("onclick", d, i);
    },
    onmouseover: function(d, i) {
      console.log("onmouseover", d, i);
    },
    onmouseout: function(d, i) {
      console.log("onmouseout", d, i);
    }
  },
  size:{
    //width: 400
  },
  padding: {
    top: 20,
    right: -120
  },
  legend: {
    position: 'inset',
    inset: {
      x: 0,
      y: 10,
      step: 6,
      anchor: 'top-right'
    }
  },
  donut: {
    title: "$985.36",
    label: {
      show: false,
      format: function(value, ratio, id) {
        return d3.format('$')(value);
      }
    }
  },
  oninit: function () {
    d3.select("#category-donut svg")
    .attr("width", "100%")
  },
  tooltip: {

  }
});

//Horizontal Cash Flow Chart

var chart = c3.generate({
  bindto: '#cashFlow-horizontal',
  data: {
    columns: [
      ['Cash In', 30],
      ['Cash Out', 130]
    ],
    type: 'bar',
    labels: true,
  },
  bar: {
    width: {
      ratio: .7
    }
  },
  size: {
    height: 150
  },
  padding: {
    bottom: 0
  },
  color: {
    pattern: ['#6aa302', '#ff7f0e']
  },
  axis: {
    rotated: true,
    y: {
      show: false
    }

  },
  legend: {
    hide: true
  },
  tooltip: {
    show: false
  }
});

//Spending Line Chart
var chart = c3.generate({
  bindto: '#spending-lineChart',
  data: {
    x: 'x',
    columns: [
      ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
      ['All Spending', 30, 200, 100, 400, 150, 250],
      ['Food/Dining', 130, 340, 200, 500, 250, 350]
    ]
  },
  legend: {
    position: 'inset',
    inset: {
      x: -100,
      y: 10,
      step: 5,
      anchor: 'top-right'
    }
  },
  size: {
    height: 450,
    //width: 525
  },
  axis: {
    x: {
      type: 'timeseries',
      tick: {
        format: '%m-%d'
      }
    }
  }
});

//budgets radial charts
var budget1 = d3.select(document.getElementById('budget1'));
var budget2 = d3.select(document.getElementById('budget2'));
var budget3 = d3.select(document.getElementById('budget3'));
var budget4 = d3.select(document.getElementById('budget4'));
var budget5 = d3.select(document.getElementById('budget5'));
var budget6 = d3.select(document.getElementById('budget6'));

start();

//function onClick1() {
  //deselect();
  //budget1.attr("class", "selectedRadial");
//}

//function onClick2() {
  //deselect();
  //budget2.attr("class", "selectedRadial");
//}

//function onClick3() {
  //deselect();
  //budget3.attr("class", "selectedRadial");
//}

function labelFunction(val, min, max) {

}

function deselect() {
  budget1.attr("class", "radial");
  budget2.attr("class", "radial");
  budget3.attr("class", "radial");
  budget4.attr("class", "radial");
  budget5.attr("class", "radial");
  budget6.attr("class", "radial");
}

function start() {

  var rp1 = radialProgress(document.getElementById('budget1'))
    .label("")
    //.onClick(onClick1)
    .diameter(190)
    .value(78)
    .render();

  var rp2 = radialProgress(document.getElementById('budget2'))
    .label("")
    //.onClick(onClick2)
    .diameter(190)
    .value(132)
    .render();

  var rp3 = radialProgress(document.getElementById('budget3'))
    .label("")
    //.onClick(onClick3)
    .diameter(190)
    .minValue(100)
    .maxValue(200)
    .value(150)
    .render();

  	var rp4 = radialProgress(document.getElementById('budget4'))
    .label("")
    //.onClick(onClick3)
    .diameter(190)
    .minValue(0)
    .maxValue(100)
    .value(26)
    .render();
  
  var rp5 = radialProgress(document.getElementById('budget5'))
    .label("")
    //.onClick(onClick3)
    .diameter(190)
    .minValue(0)
    .maxValue(100)
    .value(20)
    .render();
  
  var rp6 = radialProgress(document.getElementById('budget6'))
    .label("")
    //.onClick(onClick3)
    .diameter(190)
    .minValue(0)
    .maxValue(100)
    .value(31)
    .render();
}

/*//makes radial budgets span 100%///
$('.chart-container'),
        τ = 2 * Math.PI,
        width = $container.width(),
        height = $container.height(),
        outerRadius = Math.min(width,height)/2,
        innerRadius = (outerRadius/5)*4,
        fontSize = (Math.min(width,height)/4);

d3.select("svg.radial-svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox","0 0 "+Math.min(width,height) +" "+Math.min(width,height) )
  .attr("preserveAspectRatio","xMinYMin")
  

d3.select("svg.radial-svg g")
  .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");

d3.select("svg.radial-svg g rect")
  .attr("width", "100%")
  .attr("height", "100%");*/

//////////////Overview Charts//////////////////
//donut chart
var chart = c3.generate({
  bindto: '#overview-donut',
  data: {
    columns: [
      ['Books/Education', 30],
      ['Food/Dining', 120],
      ['Entertainment', 20],
    ],
    type: 'donut',
    onclick: function(d, i) {
      console.log("onclick", d, i);
    },
    onmouseover: function(d, i) {
      console.log("onmouseover", d, i);
    },
		 onmouseout: function(d, i) {
      console.log("onmouseout", d, i);
    }
  },  
  size: {
    height: 200,
    //width: 200
  },
  padding: {
    top: 15,
    right: 25,
    left: 0
  },
  legend: {
    position: 'inset',
    inset: {
      x: -130,
      y: 0,
      step: 12,
      anchor: 'top-right'
    }
  },
  oninit: function () {
    d3.select("#overview-donut svg")
    .attr("width", "100%")
  },
  onresized: function () {
		d3.select("#overview-donut svg")
  .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("width", "100%")
    //.attr("viewBox", "0 0 500 500")
   //class to make it responsive
   .classed("svg-content-responsive", true);
  },
  donut: {
    title: "$985.36",
    label: {
      show: false,
      format: function(value, ratio, id) {
        return d3.format('$')(value);
      }
    }
  },
  tooltip: {

  }
});


//Vertical Cash Flow Chart
var chart = c3.generate({
  bindto: '#overview-cashflow',
  data: {
    columns: [
      ['Cash In', 30],
      ['Cash Out', 130]
    ],
    type: 'bar',
    labels: true,
  },
  bar: {
    width: {
      ratio: .9
    }
  },
  size: {
    height: 225,
    //width: 350
  },
  padding: {
    bottom: -25,
    top: 25
  },
  color: {
    pattern: ['#6aa302', '#ff7f0e']
  },
  axis: {
    rotated: false,
    y: {
      show: false
    }
  },
  legend: {
    hide: true
  },
  tooltip: {
    show: false
  }
});

//Budget Bar Charts
	//Chart for multiple budgets in one chart
/*
var chart = c3.generate({
  bindto: '#overview-budgets',
  data: {
    columns: [
      ['data1', 300, 350, 200, 400],
      ['data2', 300, 250, 400, 200]
    ],
    type: 'bar',
    groups: [
      ['data1', 'data2']
    ]
  },
  size: {
		width: 330
  },
  axis: {
    rotated: true,
    y: {
      show: false
    },
    x: {
      show: false
    }
  },
  bar: {
    width: 20
  },
  legend: {
    hide: true
  },
  grid: {
    y: {
      lines: [{
        value: 0
      }]
    }
  }
});
*/

//////////////overview budget charts in multiple charts//////////
/////total budgeted/////
var chart = c3.generate({
  	bindto: '#overview-budget-total',
    data: {
        columns: [
            ['Money Spent',1000.46],
            ['Money Left', 50]
        ],
        type: 'bar',
        groups: [
            ['Money Spent', 'Money Left']
        ],
      	order: null
      	//labels: true
        //labels: {
          //format: {
            //'Money Spent': d3.format('$')
          //}
        //}
    },
    size: {
      height: 60
    },
  	padding:{
      top: -10,
      left: 0,
      bottom: 0,
      right: 0
    },
    axis: {
      rotated: true,
      y: {
        show: false,
        padding: {
          top: .5
    	}
      },
      x: {
        show: false
      }
    },
    tooltip: {
      show: false
    },
    legend: {
      hide: true
    }
});


////////Rent/Housing Budget//////////
var chart = c3.generate({
  	bindto: '#overview-budget-1',
    data: {
        columns: [
            ['Money Spent', 30],
            ['Money Left', 75]
        ],
        type: 'bar',
        groups: [
            ['Money Spent', 'Money Left']
        ],
      	order: null
      	//labels: true
    },
    size: {
      height: 60,
      //width: 370
    },
  	padding:{
      top: -10,
      left: 0,
      bottom: 0,
      right: 0
    },
    axis: {
      rotated: true,
      y: {
        show: false,
        padding: {
          top: .5
        }
      },
      x: {
        show: false
      }
    },
    tooltip: {
      show: false
    },
    legend: {
      hide: true
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});



////////Food/Dining Budget//////////
var chart = c3.generate({
  	bindto: '#overview-budget-2',
    data: {
        columns: [
            ['Money Spent', 150],
            ['Money Left', 50]
        ],
        type: 'bar',
        groups: [
            ['Money Spent', 'Money Left']
        ],
      	order: null
      	//labels: true
    },
    size: {
      height: 60,
      //width: 370
    },
  	padding:{
      top: -10,
      left: 0,
      bottom: 0,
      right: 0
    },
    axis: {
      rotated: true,
      y: {
        show: false,
        padding: {
          top: .5
        }
      },
      x: {
        show: false
      }
    },
    tooltip: {
      show: false
    },
    legend: {
      hide: true
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});


////////Education/Books Budget//////////
var chart = c3.generate({
  	bindto: '#overview-budget-3',
    data: {
        columns: [
            ['Money Spent', 20],
            ['Money Left', 50]
        ],
        type: 'bar',
        groups: [
            ['Money Spent', 'Money Left']
        ],
      	order: null
      	//labels: true
    },
    size: {
      height: 60,
      //width: 370
    },
  	padding:{
      top: -10,
      left: 0,
      bottom: 0,
      right: 0
    },
    axis: {
      rotated: true,
      y: {
        show: false,
        padding: {
          top: .5
        }
      },
      x: {
        show: false
      }
    },
    tooltip: {
      show: false
    },
    legend: {
      hide: true
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});


//Spending Line Chart
var chart = c3.generate({
  bindto: '#overview-history',
  data: {
    x: 'x',
    columns: [
      ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
      ['All Spending', 30, 200, 100, 400, 150, 250],
      ['Food/Dining', 130, 340, 200, 500, 250, 350]
    ]
  },
  legend: {
    position: 'inset',
    inset: {
      x: -95,
      y: 0,
      step: 12,
      anchor: 'top-right'
    }
  },
  size: {
    height: 260,
    //width: 250
  },
  padding: {
    top: 20,
    left: 18,
    right: 0
  },
  axis: {
    x: {
      type: 'timeseries',
      tick: {
        format: '%m-%d'
      }
    }
  }
});






//makes SVGs responsive
/*var svg = d3.select('.chart-container').append("svg")
    .attr("width", '100%')
    .attr("height", '100%')
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
    .attr('preserveAspectRatio','xMinYMin')
    .append("g")
    .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");*/



            
          
!
999px
Loading ..................

Console