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="widget">
      <ol class="widget-list" id="spending-over-time-line">
            <li>
                <div id="line" style="margin: 0 auto"></div>
            </li>
        </ol>
  
  <ol class="widget-list" id="spending-over-time">
            <li>
                <div id="bar" style="margin: 0 auto"></div>
            </li>
        </ol>
  
        <ol class="widget-list" id="category-spending-drilldown">
            <li>
                <div id="drilldown" style="margin: 0 auto"></div>
            </li>
        </ol>



          <ol class="widget-list" id="category-spending-donut">
            <li>
                <div id="donut" style="margin: 0 auto"></div>
            </li>
        </ol>
  
         
            
        <ul class="widget-tabs">
            <li class="widget-tab">
                <a class="widget-tab-link" href="#spending-over-time-line">Spending Over Time - Line</a>
            </li>

          <li class="widget-tab">
                <a class="widget-tab-link" href="#spending-over-time">Spending Over Time</a>
            </li>

            <li class="widget-tab">
                <a class="widget-tab-link" href="#category-spending-drilldown">Category Spending -
                Drill Down</a>
            </li>
          
            <li class="widget-tab">
                <a class="widget-tab-link" href="#category-spending-donut">Category Spending</a>
            </li>
  </ul>
    </div>
            
          
!
            
              body {
  font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #FFF;
  background: #eee;
}

.widget {
  position: relative;
  margin: 20px auto 10px;
  width: 850px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.07);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.07);
}

.widget-tabs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 9px 12px 0;
  text-align: left;
  direction: rtl;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  border-radius: 3px 3px 0 0;
}

.widget-tab,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child ~ .widget-tab,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) ~ .widget-tab,
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child ~ .widget-tab {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-top: 3px;
  line-height: 36px;
  font-weight: normal;
  color: #999;
  background: #fcfcfc;
  border: solid #ddd;
  border-width: 1px 1px 0;
  border-radius: 5px 5px 0 0;
  padding-bottom: 0;
  bottom: auto;
}

.widget-tab > .widget-tab-link,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child ~ .widget-tab > .widget-tab-link,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) ~ .widget-tab > .widget-tab-link,
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child ~ .widget-tab > .widget-tab-link {
  margin: 0;
  border-top: 0;
}

.widget-tab + .widget-tab {
  margin-right: -1px;
}

.widget-tab:last-child,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2),
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child {
  bottom: -1px;
  margin-top: 0;
  padding-bottom: 2px;
  line-height: 34px;
  font-weight: bold;
  color: #555;
  background: white;
  border-top: 0;
}

.widget-tab:last-child > .widget-tab-link,
.widget-list:target:first-of-type ~ .widget-tabs > .widget-tab:first-child > .widget-tab-link,
.widget-list:target:nth-of-type(2) ~ .widget-tabs > .widget-tab:nth-child(2) > .widget-tab-link,
.widget-list:target:last-of-type ~ .widget-tabs > .widget-tab:last-child > .widget-tab-link {
  margin: 0 -1px;
  border-top: 4px solid #4cc8f1;
}

.widget-tab-link {
  display: block;
  min-width: 60px;
  padding: 0 15px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  border-radius: 4px 4px 0 0;
}

.widget-list {
  display: none;
  padding-top: 50px;
}

.widget-list > li + li {
  border-top: 1px solid #e8e8e8;
  margin: 1px;
  padding: 1px;
}

.widget-list:last-of-type {
  display: block;
}

.widget-list:target {
  display: block;
}

.widget-list:target ~ .widget-list {
  display: none;
}

.widget-list-link {
  display: block;
  line-height: 18px;
  padding: 10px 12px;
  font-weight: bold;
  color: #555;
  text-decoration: none;
  cursor: pointer;
}

.widget-list-link:hover {
  background: #f7f7f7;
}

li:last-child > .widget-list-link {
  border-radius: 0 0 3px 3px;
}

.widget-list-link > img {
  float: left;
  width: 32px;
  height: 32px;
  margin: 2px 12px 0 0;
}

.widget-list-link > span {
  display: block;
  font-size: 11px;
  font-weight: normal;
  color: #999;
}

            
          
!
            
              //// Category Spending        //////////////////////////////////////////////////////
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'donut',
        type: 'pie'
    },
    title: {
        text: 'Category Spending'
    },
    credits: {
        enabled: false
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
            plotOptions: {
               pie: {
                   showInLegend: true,
                  dataLabels: {
                enabled: false,
            }
        }
            },
    tooltip: {
        formatter: function () {
            return '</b>Amount: $' + this.y + '</b><br/>Transactions: ' + this.point.options.transactions}
    },
    series: [{
       name: 'Categories',
        colorByPoint: true,
        innerSize: '50%',
        data: [{
            name: 'Hotels',
            y: 939.69,
            transactions: 14,
            drilldown: 'hotels'
        }, {
            name: 'Travel/Entertainment',
            y: 1456.40,
            transactions: 15,
            drilldown: 'travel'
        }, {
            name: 'Merchandise',
            y: 3601.67,
            transactions: 44,
            drilldown: 'merchandise'
        }, {
            name: 'Services',
            y: 1189.03,
            transactions: 50,
            drilldown: 'services'
        }, {
            name: 'Restaurants',
            y: 862.41,
            transactions: 16,
            drilldown: 'restaurants'
        }, {
            name: 'Government Services',
            y: 376.35,
            transactions: 4,
            drilldown: 'government'
        }]

    }]
});

//// END Category Spending        //////////////////////////////////////////////////////

//// Category Drill Down        //////////////////////////////////////////////////////
$('#drilldown').highcharts({
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Category Spending'
    },
    xAxis: {
        type: 'category'
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            showInLegend: false,
            dataLabels: {
                enabled: true,
            }
        }
    },
  credits: {
        enabled: false
    },  
  legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    tooltip: {
        formatter: function () {
            return '</b>Amount: $' + this.y + '</b><br/>Transactions: ' + this.point.options.transactions
        }
    },
    series: [{
        name: 'Categories',
        colorByPoint: true,
        innerSize: '50%',
        data: [{
            name: 'Hotels',
            y: 939.69,
            transactions: 14,
            drilldown: 'hotels'
        }, {
            name: 'Travel/Entertainment',
            y: 1456.40,
            transactions: 15,
            drilldown: 'travel'
        }, {
            name: 'Merchandise',
            y: 3601.67,
            transactions: 44,
            drilldown: 'merchandise'
        }, {
            name: 'Services',
            y: 1189.03,
            transactions: 50,
            drilldown: 'services'
        }, {
            name: 'Restaurants',
            y: 862.41,
            transactions: 16,
            drilldown: 'restaurants'
        }, {
            name: 'Government Services',
            y: 376.35,
            transactions: 4,
            drilldown: 'government'
        }]
    }],
    drilldown: {
        series: [{
            id: 'hotels',
            innerSize: '50%',
            data: [{
                name: 'Westin Chicago',
                y: 544.45,
                transactions: 4
            }, {
                name: 'Hyatt Deerfield',
                y: 270.96,
                transactions: 2
            }, {
                name: 'Hotel Felix Chicago',
                y: 124.28,
                transactions: 2
            }]
        }, {
            id: 'services',
            innerSize: '50%',                             
            data: [{
                name: 'GIGANEWS',
                y: 774.74,
                transactions: 1
            }, {
                name: 'Grubhub',
                y: 321.00,
                transactions: 1
            }, {
                name: 'GOGOAIR.COM',
                y: 8.95,
                transactions: 2
            }, {
                name: 'Microsoft',
                y: 195.85,
                transactions: 2
            }, ]
              },
                             {
            id: 'government',
            innerSize: '50%',
            data: [{
                name: 'US Customs Trusted Traveler',
                y: 100.00,
                transactions: 1
            }, {
                name: 'New York State DMV',
                y: 80.50,
                transactions: 1
            }, {
                name: 'Intuit Turbotax',
                y: 195.85,
                transactions: 2
            }, ]
              },{
            id: 'travel',
            innerSize: '50%',
            data: [{
                    name: 'Delta Airlines',
                    y: 1315.40,
                    transactions: 6
                }, {
                    name: 'UBER TECHNOLOGIES',
                    y: 141,
                    transactions: 9
                }]
            }, {
            id: 'merchandise',
            innerSize: '50%',
            data: [{
                    name: 'AMAZON.COM',
                    y: 1481.32,
                    transactions: 20
                }, {
                    name: 'Sids Bikes NY',
                    y: 249.99,
                    transactions: 3
                }, {
                    name: 'CVS PHARMACY NY',
                    y: 32.99,
                    transactions: 1
                }, {
                    name: 'Paragon Athletic NY',
                    y: 621.91,
                    transactions: 3
                }, {
                    name: 'Penguin NY',
                    y: 32.89,
                    transactions: 1
                }, {
                    name: 'John Varvatos NY',
                    y: 86.11,
                    transactions: 1
                }, {
                    name: 'Feelings Gift Shop Wheeling IL',
                    y: 11.1,
                    transactions: 1
                }, {
                    name: 'Sids Bikes NY',
                    y: 141,
                    transactions: 9
                }, ]
            }, {
            id: 'restaurants',
            innerSize: '50%',
            data: [{
                    name: 'Dorsia NY',
                    y: 370.00,
                    transactions: 3
                }, {
                    name: 'Texarkana NY',
                    y: 121.38,
                    transactions: 3
                }, {
                    name: 'Cho Dang GOL NY',
                    y: 57.80,
                    transactions: 1
                }, {
                    name: 'Pongsri Thai NY',
                    y: 106.20,
                    transactions: 1
                }, {
                    name: 'RAK CAFE',
                    y: 17.58,
                    transactions: 3
                }, {
                    name: 'Rogue NY',
                    y: 46.84,
                    transactions: 1
                }, {
                    name: 'Blue Dog NY',
                    y: 17.31,
                    transactions: 1
                }, {
                    name: 'Palace Korean Federal Way WA',
                    y: 121.38,
                    transactions: 1
                }, {
                    name: 'Banjara NY',
                    y: 114.45,
                    transactions: 2
                }]
            }]
        }
        })

    //// END Category Drill Down        //////////////////////////////////////////////////////


    //// Spending Over Time - column   //////////////////////////////////////////////////////
    $('#line').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'Spending Over Time'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
                'Nov', 'Dec']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Amount'
            }
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return '</b>Amount: $' + this.y + '</b><br/>Transactions: ' + this.point.options.transactions
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                color: "#1893B4",
                borderWidth: 0
            }
        },
        series: [{
            name: '2014',
            data: [{
                name: 'January',
                y: 350,
                transactions: 10,
            }, {
                name: 'February',
                y: 200,
                transactions: 10,
            }, {
                name: 'March',
                y: 75,
                transactions: 10,
            }, {
                name: 'February',
                y: 200,
                transactions: 10,
            }, {
                name: 'February',
                y: 200,
                transactions: 10,
            }, {
                name: 'February',
                y: 200,
                transactions: 10,
            }, {
                name: 'February',
                y: 200,
                transactions: 10,
            }, ]
        }]
    });

    //// END Spending Over Time         //////////////////////////////////////////////////////
                 
                 //// Spending Over Time - column   //////////////////////////////////////////////////////
    $('#bar').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Spending Over Time'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
                'Nov', 'Dec']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Amount'
            }
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return '</b>Amount: $' + this.y + '</b><br/>Transactions: ' + this.point.options.transactions
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                color: "#1893B4",
                borderWidth: 0
            }
        },
        series: [{
            name: '2014',
            data: [{
                name: 'January',
                y: 350,
                transactions: 10,
            }, {
                name: 'February',
                y: 200,
                transactions: 10,
            }, {
                name: 'March',
                y: 75,
                transactions: 10,
            }, {
                name: 'February',
                y: 200,
                transactions: 10,
            }, {
                name: 'February',
                y: 200,
                transactions: 10,
            }, {
                name: 'February',
                y: 200,
                transactions: 10,
            }, {
                name: 'February',
                y: 200,
                transactions: 10,
            }, ]
        }]
    });

    //// END Spending Over Time         //////////////////////////////////////////////////////
            
          
!
999px
Loading ..................

Console