Flot Combine Chart

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(function () {    
    var data1 = [
        [1354586000000, 153], [1364587000000, 658], [1374588000000, 198],
        [1384589000000, 663], [1394590000000, 801], [1404591000000, 1080],
        [1414592000000, 353], [1424593000000, 749], [1434594000000, 523],
        [1444595000000, 258], [1454596000000, 688], [1464597000000, 364]
    ];

    var data2 = [
        [1354586000000, 53], [1364587000000, 65], [1374588000000, 98],
        [1384589000000, 83], [1394590000000, 980], [1404591000000, 808],
        [1414592000000, 720], [1424593000000, 674], [1434594000000, 23],
        [1444595000000, 79], [1454596000000, 88], [1464597000000, 36]
    ];

    var data = [{
        label: "data1",
        data: data1,
        bars: {
            show: true,
            barWidth: 30 * 60 * 60 * 1000 * 80
        }
    },{
        label: "data2",
        data: data2,
        lines: {
            show: true
        },
        points:{
            show:true
        }
    }];

    var options = {
            xaxis: {
                mode: "time"
            },
            grid:{
                backgroundColor: { colors: ["#969696", "#5C5C5C"] }
            }
    };

    var plot = $.plot($("#example-section25 #flotcontainer"), data, options);  
});
</script>

<!-- HTML -->
<div id="example-section25">
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;">
    </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(function () {    
    var data24Hours = [
        [0, 601],[1, 520],[2, 337],[3, 261],[4, 157],[5, 78],[6, 58],[7, 48],[8, 54],[9, 38],[10, 88],[11, 214],[12, 364],
        [13, 449],[14, 558],[15, 282],[16, 379],[17, 429],[18, 518],[19, 470],[20, 330],[21, 245],[22, 358],[23, 74]
    ];

    var data48Hours = [
        [0, 445],[1, 592],[2, 738],[3, 532],[4, 234],[5, 143],[6, 147],[7, 63],[8, 64],[9, 43],[10, 86],[11, 201],[12, 315],
        [13, 397],[14, 512],[15, 281],[16, 360],[17, 479],[18, 425],[19, 453],[20, 422],[21, 355],[22, 340],[23, 801]
    ];

    var dataDifference = [
        [23, -727],[22, 18],[21, -110],[20, -92],[19, 17],[18, 93],[17, -50],[16, 19],[15, 1],[14, 46],[13, 52],[12, 49],
        [11, 13],[10, 2],[9, -5],[8, -10],[7, -15],[6, -89],[5, -65],[4, -77],[3, -271],[2, -401],[1, -72],[0, 156]
    ];

    var ticks = [
        [0, "22h"],[1, ""],[2, "00h"],[3, ""],[4, "02h"],[5, ""],[6, "04h"],[7, ""],[8, "06h"],[9, ""],[10, "08h"],
        [11, ""],[12, "10h"],[13, ""],[14, "12h"],[15, ""],[16, "14h"],[17, ""],[18, "16h"],[19, ""],[20, "18h"],
        [21, ""],[22, "20h"],[23, ""]
    ];

    var data = [{
        label: "Last 24 Hours",
        data: data24Hours,
        lines: {show: true},
        points: {show:true}
    },{
        label: "Last 48 Hours",
        data: data48Hours,
        lines: {show: true},
        points: {show:true}
    },{
        label: "Difference",
        data: dataDifference,
        bars: {show: true}
    }];

    var options = {
            xaxis: {
                ticks: ticks
            },
            grid:{
                backgroundColor: { colors: ["#C9E3FF", "#8CC4FF"] }
            },
            legend: {            
            labelBoxBorderColor: "#000000",
            container: $("#legendcontainer"),
            noColumns: 0
        },
    };

    var plot = $.plot($("#example-section26 #flotcontainer"), 
        data
    , options);  
});
</script>

<!-- HTML -->
<div id="example-section26">
    <div id="legendcontainer" style="width: 600px;"></div>
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;">
    </div>
</div>