Project Categories Chart 2

by jeremyfrank

HTML

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

<div id="container"></div>

CSS

body {
    background: #eee;
    padding: 10px 30px;
}
#container {
    width: 100%;
}
.highcharts-tooltip {
    text-align: center;
}

JavaScript

$(function () {
    var categoryCountData = [
        {name: "carbon", id: 40, y: 1212},
        {name: "beta", id: 39, y: 1174},
        {name: "alloy", id: 38, y: 1152},
        {name: "alum", id: 37, y: 1111},
        {name: "acq", id: 36, y: 1032},
        {name: "cat35", id: 35, y: 1019},
        {name: "cat34", id: 34, y: 923},
        {name: "cat33", id: 33, y: 708},
        {name: "cat32", id: 32, y: 412},
        {name: "cat31", id: 31, y: 326},
        {name: "cat30", id: 30, y: 318},
        {name: "cat29", id: 29, y: 302},
        {name: "cat28", id: 28, y: 194},
        {name: "cat27", id: 27, y: 189},
        {name: "cat26", id: 26, y: 177},
        {name: "cat25", id: 25, y: 163},
        {name: "cat24", id: 24, y: 153},
        {name: "cat23", id: 23, y: 151},
        {name: "cat22", id: 22, y: 150},
        {name: "cat21", id: 21, y: 149},
        {name: "cat20", id: 20, y: 149},
        {name: "cat19", id: 19, y: 149},
        {name: "cat18", id: 18, y: 149},
        {name: "cat17", id: 17, y: 149},
        {name: "cat16", id: 16, y: 149},
        {name: "cat15", id: 15, y: 148},
        {name: "cat14", id: 14, y: 148},
        {name: "cat13", id: 13, y: 148},
        {name: "cat12", id: 12, y: 147},
        {name: "cat10", id: 10, y: 146},
        {name: "cat9", id: 9, y: 146},
        {name: "cat8", id: 8, y: 144},
        {name: "cat7", id: 7, y: 144},
        {name: "cat6", id: 6, y: 144},
        {name: "cat5", id: 5, y: 144},
        {name: "cat4", id: 4, y: 141},
        {name: "cat3", id: 3, y: 140},
        {name: "cat2", id: 2, y: 140},
        {name: "cat1", id: 1, y: 139}
    ];

    var masterChart,
        detailChart,
        previewStart = -0.5, // preview 10 columns to start
        previewEnd = 9.5; // preview 10 columns to start
    
    previewEnd = previewEnd > categoryCountData.length - 0.5 ? categoryCountData.length - 0.5 : previewEnd; // reset preview start if less than -0.5;

    $(document).ready(function() {
        
 ...