<div class="page-header">
    <h3>Live overview</h3>
</div>

<div class="row">
    <div class="span6">

        <div># Queries: {count}</div>
        <div>Time span: {deltaTime} ({fromTime} - {toTime})</div>
        <div>Avg. time/query: {avgTime}</div>
    </div>
</div>

<ul class="nav nav-pills">
    <li {if(sortTotalTime)}class="active"{/if}><a onclick="return Sjs.submit('sortTotalTime')">Total time</a></li>
    <li {if(sortAvgTime)}class="active"{/if}><a onclick="return Sjs.submit('sortAvgTime')">Avg. time</a></li>
    <li {if(sortTotalCalls)}class="active"{/if}><a onclick="return Sjs.submit('sortTotalCalls')"># Calls</a></li>
</ul>

<canvas id="chart" width="800" height="200"></canvas>

<script type="text/javascript">
    // Randomly add a data point every 500ms
    var random = new TimeSeries();

    setInterval(function() \{
        random.append(new Date().getTime(), Math.random() * 10000);
    \}, 500);

    $(document).ready(function() \{
            var chart = new SmoothieChart(
            \{
            grid: \{

                strokeStyle: 'rgba(75, 75, 75, 0.4)',
                fillStyle: 'rgba(255, 255, 255, 0.2)',
                lineWidth: 2,
                millisPerLine: 500,
                verticalSections: 6
                \}
            \}
       );

       chart.addTimeSeries(random,
        \{

            strokeStyle: 'rgba(0, 255, 0, 1)',
            fillStyle: 'rgba(0, 255, 0, 0.2)',
            lineWidth: 2
        \});

        chart.streamTo(document.getElementById("chart"), 500);
    \});
</script>