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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console