Flot Example

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking. The plugin works with Internet Explorer 6+, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas Javascript emulation helper is used for IE < 9).

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<hmtl>
<body>
<h1>SBS.Insight chart example</h1> 
    <div id="legendPlaceholder">
        <table class="legend">
            <tbody>
                <tr>
                    <td class="legendColorBox">
                        <div style=border:transparent">
                            <div style="style="width:4px;height:0;border:5px solid rgb(237,194,64);overflow:hidden"</div>
                        </div>
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="placeholder" style="width:600px;height:300px;"></div>
</body>
</html>

CSS

h1 {
    font-family; 'Helvetica', Arial, sans-serif;
}

.legendPlaceholder{
    width: 100px;
    height: 50px;
    float: right;
}

table.legend {
    font-size:smaller;
    color:#545454;
    width: 100%;
}

td.legendColorBox {
    border: transparent;
}

.legend {
    border: transparent;
    padding:1px
}

.legendLabel{
    padding: 10px;
}

JavaScript

$(function () {
    var trendDataMyCenter = [[0, 5000], [1, 5500], [2, 5100], [4, 4700], [6, 5100], [9, 5200],[11, 4900]];
    var trendDataBestCenter = [[0, 4900], [1, 5300], [2, 5400], [4, 4600], [6, 5300], [9, 5400],[11, 5500]];
    
    
    var chartData = [
                    {
                        label: "My center",
                        data: trendDataMyCenter,
                        lines: { show: true },
                    },
                    {
                        label: "Best center",
                        data: trendDataBestCenter,
                        lines: { show: true }
                    }
                    ];
 
     var options = {
         xaxis: { ticks: [[0, 'Jan'], [1, 'Feb'], [2, 'Mar'], [3, 'Apr'], [4, 'May'], [5, 'Jun'], [6, 'Jul'], [7, 'Aug'], [8, 'Sep'], [9, 'Oct'], [10, 'Nov'], [11, 'Dec']] },
         legend: {
             container: '#legendPlaceholder',
             noColumns: 2
         },
         grid: {
				backgroundColor: { colors: [ "#fff", "#eee" ] }
			}
         };
   

    
    $.plot($("#placeholder"), chartData, options);
});