SO tabs flot demo

by adishardis

HTML

<script src="http://dl.dropbox.com/u/8237070/jquery.flot.0.7.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css">
<script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Kommer snart Fredrik, ta det lugnt :) " +
                        "" );
                }
            }
        });
    });
    </script>
<script type="text/javascript">
$(function() {
    $('div.tabs').tabs();
});
</script>


<div id="tabs">
    <ul>
        <li><a href="#tabs-1">BLABLA11</a></li>
        <li><a href="#tabs-2">BLABLA22</a></li>
        <li><a href="#tabs-3">BLABLA333</a></li>
    </ul>
    <div id="tabs-1">
<div id="tabs-min" class="tabs">
    <ul>
        <li><a href="#tabs-min-1" name="tabs-min">XXX</a></li>
        <li><a href="#tabs-min-2">YYY</a></li>
        <li><a href="#tabs-min-3">ZZZ</a></li>    </ul>
     <div id="tabs-min-1">
          <div id="graphLoaderDiv"></div>
        </div>
        <div id="tabs-min-2">
              <div id="graphLoaderDiv2"></div>
    </div>
        <div id="tabs-min-3">
        <p>3333333333333333333333333333333333333333</p>
    </div>
</div></div>
  <div id="tabs-2"><p>22222222222222222222222222222222</p></div>
<div id="tabs-3"><p>3333333333333333333333333333333333333333</p></div>
</div>

CSS

#graphLoaderDiv{
    width: 400px;
    height: 150px;
}#graphLoaderDiv2{
    width: 400px;
    height: 150px;
}
#tabs-min {
    background: transparent;
    border: none;
}
#tabs-min .ui-widget-header {
    background: transparent;
    border: none;
    border-bottom: 1px solid #c0c0c0;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
#tabs-min .ui-state-default {
    background: transparent;
    border: none;
}
#tabs-min .ui-state-active {
    background: transparent url(img/uiTabsArrow.png) no-repeat bottom center;
    border: none;
}
#tabs-min .ui-state-default a {
    color: #c0c0c0;
}
#tabs-min .ui-state-active a {
    color: #459E00;
    
}

JavaScript

var data= [{
                    "label": "line1",
                    "data": [[0, 4.4], [1, 3.7], [2, 0.8], [3, 1.6], [4, 2.5], [5, 3.6], [6, 2.9]], 
                    
                    bars: {
                        barWidth: 0.1, 
                        order: 1,
                        lineWidth : 2
                    }
                }, 
                {
                    "label": "Line2",
                    "data": [[0, -0.1], [1, 2.9], [2, 0.2], [3, 0.3], [4, 1.4], [5, 2.7], [6, 1.9]],
                     bars: {
                        barWidth: 0.1, 
                        order: 1,
                        lineWidth : 2
                    }
                }
];  
                $.plot($('#graphLoaderDiv'), data, {
                    grid : {hoverable : true},
                    xaxis: { ticks:[[0,'A'],[1,'B'],[2,'C'],[3,'D'],[4,'E'],[5,'F'],[6,'G']]},
                    yaxis: { max: 10, position: "left"}, // or "right" 
                    colors: ["#00eb0b", "#eea0a0"],
                    series : { lines: { fill: false, fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.01 } ] } }}
                });

var income = [[0,310.00],[1,417.99],[2,3228.12],[3,1945.14],[4,2065.20],[5,2444.27],[6,2327.58],[7,1823.28],[8,2083.47],[9,1918.52],[10,3960.69],[11,1893.97]];


var data = [
        {
            data: income,
            color: '#409628',
            label:'Income',
            bars: { show: true, align:'center', barWidth:0.3 }
        }
    ];
    $.plot($("#graphLoaderDiv2"), data, {});

$('#tabs-min').tabs();