Flotcharts Line Graph

by kmburke84

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.selection.js"></script>
<div style="float:left">      
    <div id="placeholder" style="width:530px;height:200px"></div>    
</div>    
<br style="clear: both;" /><br />
<div id="miniature" style="float:left;margin-left:20px">       
    <div id="overview" style="width:500px;height:65px"></div>   
    <p id="overviewLegend" style="margin-left:10px"></p>    
</div>

JavaScript

$(function() {
    // setup plot

    function getData() {
        return [ {
            label: "Forecast",
            data: [
                [10, 4], [12, 4], [14, 8]
                ],
            color: "#F87431"
        }, {
            label: "Actual",
            data: [
                [1, 2], [4, 3], [6, -1], [8, 9], [10, 4]
                ],
            color: "#0C0"
        },{
            label: "Forecast",
            data: [
                [1, 3], [4, 3], [6, 4], [8, 10], [10, 5]
                ],
            color: "#C00"
        },{
            data:[[10,-2],[10,11]],
            points: {
                show: false
            },
            color: "#444",
        }];
    }

    var options = {
        legend: {
            show: true,
            noColumns: 2
        },
        series: {
            lines: {
                show: true,
            },
            points: {
                show: true
            },
            shadowSize: 2
        },
        yaxis: {
            ticks: 10
        },
        grid: {
            backgroundColor: {
                colors: ["#FFF", "#DDD"]
            },
            hoverable: true,
        },
    };

    var startData = getData(0, 3 * Math.PI);

    var plot = $.plot($("#placeholder"), startData, options);

    // setup overview
    var overview = $.plot($("#overview"), startData, {
        legend: {
            show: false,
            container: $("#overviewLegend"),
        },
        series: {
            lines: {
                show: true,
                lineWidth: 2,
            },
            shadowSize: 0
        },
        xaxis: {
            show: false
        },
        yaxis: {
            show: false
        },
        grid: {
            backgroundColor:
            {
                colors: ["#FFF", "#DDD"]
            }
        },
        selection: {
            mode: "x"
        },
    });

    // now connect the two
    $("#placeholder").bind("plotselected",...