JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.stack.js"></script>
<div id="pop_up" class="hidden">
   <p class="close">x</p>
   <h3>Foo</h3>
   <div id="graph"></div>
</div>


<input type="button" id="g1" value="create 1st graph" />
<input type="button" id="g2" value="create 2nd graph" />

CSS

.hidden { display:none; }
#pop_up {
    background-color:white;
    border:1px solid #ABABAB;
    box-shadow: 0 0 5px #DCDCDC;
    left: 50%;
    margin: -175px -150px;
    padding:18px;
    position: absolute;
    top: 50%;
    vertical-align: middle;
    z-index: 200;
}
#graph {
    height:200px;
    width:350px;
}
.close {
    color: #ABABAB;
    cursor: pointer;
    float: right;
    height: 20px;
    line-height: 1.9em;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 20px;
    right: 0;
}

JavaScript

/* SCROLL WAY DOWN */
var date = '2012-9-17',
    day  = 17,
    hour = 7,
    sales        = [];
    sales[9]     = [];
    sales[9][17] = {"7":{"199 Water St":{"total":2741,"coffee":{"black":534,"macchiato":842,"hazelnut":283,"total":1659},"cocoa":{"dark":158,"white":325,"regular":234,"total":717},"tea":{"black":102,"green":159,"total":206}},"930 W Cordova St":{"total":3926,"coffee":{"black":797,"macchiato":337,"hazelnut":585,"total":1719},"cocoa":{"dark":504,"white":664,"regular":292,"total":1460},"tea":{"black":153,"green":365,"total":382}},"999 Canada Place":{"total":3844,"coffee":{"black":956,"macchiato":559,"hazelnut":671,"total":2186},"cocoa":{"dark":187,"white":563,"regular":156,"total":906},"tea":{"black":203,"green":379,"total":373}}},"8":{"199 Water St":{"total":4540,"coffee":{"black":590,"macchiato":1450,"hazelnut":508,"total":2548},"cocoa":{"dark":382,"white":347,"regular":250,"total":979},"tea":{"black":351,"green":443,"total":570}},"930 W Cordova St":{"total":1382,"coffee":{"black":296,"macchiato":242,"hazelnut":275,"total":813},"cocoa":{"dark":57,"white":122,"regular":54,"total":233},"tea":{"black":82,"green":203,"total":133}},"999 Canada Place":{"total":980,"coffee":{"black":296,"macchiato":180,"hazelnut":93,"total":569},"cocoa":{"dark":112,"white":84,"regular":77,"total":273},"tea":{"black":43,"green":59,"total":79}}},"9":{"199 Water St":{"total":4078,"coffee":{"black":268,"macchiato":1450,"hazelnut":293,"total":2011},"cocoa":{"dark":518,"white":173,"regular":314,"total":1005},"tea":{"black":380,"green":495,"total":567}},"930 W Cordova St":{"total":3219,"coffee":{"black":374,"macchiato":417,"hazelnut":292,"total":1083},"cocoa":{"dark":844,"white":452,"regular":151,"total":1447},"tea":{"black":154,"green":339,"total":350}},"999 Canada Place":{"total":2414,"coffee":{"black":383,"macchiato":203,"hazelnut":158,"total":744},"cocoa":{"dark":510,"white":273,"regular":110,"total":893},"tea":{"black":129,"green":403,"total":374}}},"10":{"199 Water...