1 2 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