Project Categories Chart

by jeremyfrank

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>

<div class="chart-container">
    <div id="chart" class="chart-visual"></div>
    <div class="chart-tooltip"></div>
</div>

<p>
    View as
    <button type="button" data-type="#">#</button>
    <button type="button" data-type="%">%</button>
</p>

CSS

body {
    background: #eee;
    padding: 10px 30px;
}
.chart-container {
    border: 20px solid #fff;
    position: relative;
}
.chart-visual {
    height: 320px;
    min-width: 300px;
}
.chart-tooltip {
    -webkit-filter: drop-shadow(0 0 5px rgba(0,0,0,.3));
       -moz-filter: drop-shadow(0 0 5px rgba(0,0,0,.3));
        -ms-filter: drop-shadow(0 0 5px rgba(0,0,0,.3));
         -o-filter: drop-shadow(0 0 5px rgba(0,0,0,.3));
            filter: drop-shadow(0 0 5px rgba(0,0,0,.3));
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    color: #333;
    font: 12px Arial;
    left: -999px;
    margin-top: -25px;
    min-height: 14px;
    padding: 10px;
    position: absolute;
    bottom: -999px;
    white-space: nowrap;
    width: auto;
}
.chart-tooltip:before,
.chart-tooltip:after {
    border: 10px solid transparent;
    content: '';
    display: inline-block;
    margin-left: -10px;
    left: 50%;
    position: absolute;
    top: 100%;
}
.chart-tooltip:before {
    border-top-color: #aaa;
}
.chart-tooltip:after {
    border-top-color: #fff;
    border-width: 9px;
    margin-left: -9px;
}

JavaScript

// Category Count Data    
var categoryCountData = [{
    name: "cat1",
    y: 4
}, {
    name: "cat2",
    y: 7
}, {
    name: "cat3",
    y: 9
}, {
    name: "cat4",
    y: 11
}, {
    name: "cat5",
    y: 14
}, {
    name: "cat6",
    y: 14
}, {
    name: "cat7",
    y: 14
}, {
    name: "cat8",
    y: 14
}, {
    name: "cat9",
    y: 16
}, {
    name: "cat10",
    y: 16
}, {
    name: "cat",
    y: 17
}, {
    name: "cat",
    y: 18
}, {
    name: "cat",
    y: 18
}, {
    name: "cat",
    y: 21
}, {
    name: "cat",
    y: 26
}, {
    name: "cat",
    y: 26
}, {
    name: "cat",
    y: 30
}, {
    name: "cat",
    y: 30
}, {
    name: "cat",
    y: 30
}, {
    name: "cat",
    y: 31
}, {
    name: "cat",
    y: 32
}, {
    name: "cat",
    y: 33
}, {
    name: "cat",
    y: 33
}, {
    name: "cat",
    y: 33
}, {
    name: "cat",
    y: 37
}, {
    name: "cat",
    y: 39
}, {
    name: "cat",
    y: 44
}, {
    name: "cat",
    y: 52
}, {
    name: "cat",
    y: 78
}, {
    name: "cat",
    y: 126
}, {
    name: "cat",
    y: 412
}, {
    name: "cat",
    y: 708
}, {
    name: "cat",
    y: 923
}, {
    name: "cat",
    y: 1119
}, {
    name: "cat",
    y: 1257
}, {
    name: "acq",
    y: 1432
}, {
    name: "alum",
    y: 1611
}, {
    name: "alloy",
    y: 1752
}, {
    name: "beta",
    y: 1874
}, {
    name: "carbon",
    y: 1912
}];

// Category PercentData
var categoryPercentData = [{
    name: "cat1",
    y: 0.1
}, {
    name: "cat2",
    y: 0.1
}, {
    name: "cat3",
    y: 0.1
}, {
    name: "cat4",
    y: 0.1
}, {
    name: "cat5",
    y: 0.1
}, {
    name: "cat6",
    y: 0.1
}, {
    name: "cat7",
    y: 0.1
}, {
    name: "cat8",
    y: 0.1
}, {
    name: "cat9",
    y: 0.1
}, {
    name: "cat10",
    y: 0.3
}, {
    name: "cat",
    y: 0.3
}, {
    name: "cat",
    y: 0.3
}, {
    name: "cat",
    y: 0.3
}, {
    name: "cat",
    y: 0.3
}, {
    name: "cat",
    y: 0.3
}, {
    name: "cat",
    y: 0.3
}, {
    name: "cat",
    y: 0.5
}, {
   ...