jQuery - Bar Chart with data-set selection

by pythondave

HTML

<script src="http://launchpad.brainhost.com/lib/external/js/jqBarGraph.1.1.min.js"></script>
<div id="divBarChart1"></div>
<hr/>
<div id="divBarChart2"></div>
<div id="divDropdown"></div>

JavaScript

$(document).ready(function() {
    CreateHouseBarChart1({ JQuerySelector:'#divBarChart1', HouseDataArray:[103,152,131] });
    
    var a2 = [[103,152,131,'8 Sep 2011'],[283,252,231,'14 Oct 2011']];
    CreateHouseBarChart2({ JQuerySelector:'#divBarChart2', HouseDataMultiArray:a2 });
    
    var aDropdown = ['8 Sep 2011','14 Oct 2011'];
    CreateDropdown({ JQuerySelector:'#divDropdown', Array:aDropdown });
});

function CreateDropdown(Options) {
    var o = Options || {};
    var JQuerySelector = o.JQuerySelector || '#divDropdown';
    var a = o.Array; //[v1,v2,...] or [[id1,v1],[id2,v2],...]
    $(JQuerySelector).append('<select></select>')
    $.each(a, function(i,v) {
        $(JQuerySelector + ' select').append('<option>' + v + '</option>')
    });
    $(JQuerySelector + ' select').change(function() { alert('changed') });
}

function CreateHouseBarChart2(Options) {
    var o = Options || {};
    var a = o.HouseDataMultiArray; //[[O,P,R,id],[O,P,R,id]]
    o.HouseDataArray = a[1];
    CreateHouseBarChart1(o);
}

function CreateHouseBarChart1(Options) {
    var o = Options || {};
    var a = o.HouseDataArray; //[O,P,R]
    var DataArray = [];
    DataArray.push([a[0],'<b>Orange</b>','Orange']);
    DataArray.push([a[1],'<b>Purple</b>','Purple']);
    DataArray.push([a[2],'<b>Red</b>','Red']);
    o.DataArray = DataArray;
    CreateBarChart(o);
}

function CreateBarChart(Options) {
    var o = Options || {};
    var JQuerySelector = o.JQuerySelector || '#divBarChart';
    var DataArray = o.DataArray;
    var Height = o.Height || 200;
    var Width = o.Width || 180;
    var Title = o.Title || '<b>Bar Chart</b>';
    $(JQuerySelector).jqbargraph({ data:DataArray, height:Height, width:Width, title:Title });
}