| 12
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 
 |  
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
 
  <script src="js/jquery.min.js"></script>
    <style type="text/css">
 
     #editor-render-0 {
  width: 340px;
  height: 220px;
  margin: 24px auto;
}
    </style>
    <!--[if IE]>
    <script type="text/javascript" src="/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/flotr2.min.js"></script>
    <script type="text/javascript">
     $(function () {
(function basic_time(container) {
 
    var
    d1 = [],
        start = new Date("2009/01/01 01:00").getTime(),
        options, graph, i, x, o;
 
    for (i = 0; i < 100; i++) {
        x = start + (i * 1000 * 3600 * 24 * 36.5);
        d1.push([x, i + Math.random() * 30 + Math.sin(i / 20 + Math.random() * 2) * 20 + Math.sin(i / 10 + Math.random()) * 10]);
    }
 
    options = {
        xaxis: {
            mode: 'time',
            labelsAngle: 45
        },
        selection: {
            mode: 'x'
        },
        HtmlText: false,
        title: ''
    };
 
    // Draw graph with default options, overwriting with passed options
 
 
    function drawGraph(opts) {
 
        // Clone the options, so the 'options' variable always keeps intact.
        o = Flotr._.extend(Flotr._.clone(options), opts || {});
 
        // Return a new graph.
        return Flotr.draw(
        container, [d1], o);
    }
 
    graph = drawGraph();
 
    Flotr.EventAdapter.observe(container, 'flotr:select', function(area) {
        // Draw selected area
        graph = drawGraph({
            xaxis: {
                min: area.x1,
                max: area.x2,
                mode: 'time',
                labelsAngle: 45
            },
            yaxis: {
                min: area.y1,
                max: area.y2
            }
        });
    });
 
    // When graph is clicked, draw the graph with default area.
    Flotr.EventAdapter.observe(container, 'flotr:click', function() {
        graph = drawGraph();
    });
})(document.getElementById("editor-render-0"));
});</script>
  </head>
  <body>
 
    <div id="editor-render-0"></div>
 
  </body>
</html> | 
Partager