Subversion Repositories SmartDukaan

Rev

Blame | Last modification | View Log | RSS feed 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <link href="layout.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
 </head>
    <body>
    <h1>Flot Examples</h1>

    <div id="placeholder" style="width:600px;height:300px;"></div>

    <p>Flot has support for simple background decorations such as
    lines and rectangles. They can be useful for marking up certain
    areas. You can easily add any HTML you need with standard DOM
    manipulation, e.g. for labels. For drawing custom shapes there is
    also direct access to the canvas.</p>

<script type="text/javascript">
$(function () {
    // generate a dataset
    var d1 = [];
    for (var i = 0; i < 20; ++i)
        d1.push([i, Math.sin(i)]);
    
    var data = [{ data: d1, label: "Pressure", color: "#333" }];

    // setup background areas
    var markings = [
        { color: '#f6f6f6', yaxis: { from: 1 } },
        { color: '#f6f6f6', yaxis: { to: -1 } },
        { color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } },
        { color: '#000', lineWidth: 1, xaxis: { from: 8, to: 8 } }
    ];
    
    var placeholder = $("#placeholder");
    
    // plot it
    var plot = $.plot(placeholder, data, {
        bars: { show: true, barWidth: 0.5, fill: 0.9 },
        xaxis: { ticks: [], autoscaleMargin: 0.02 },
        yaxis: { min: -2, max: 2 },
        grid: { markings: markings }
    });

    // add labels
    var o;

    o = plot.pointOffset({ x: 2, y: -1.2});
    // we just append it to the placeholder which Flot already uses
    // for positioning
    placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Warming up</div>');

    o = plot.pointOffset({ x: 8, y: -1.2});
    placeholder.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:smaller">Actual measurements</div>');

    // draw a little arrow on top of the last label to demonstrate
    // canvas drawing
    var ctx = plot.getCanvas().getContext("2d");
    ctx.beginPath();
    o.left += 4;
    ctx.moveTo(o.left, o.top);
    ctx.lineTo(o.left, o.top - 10);
    ctx.lineTo(o.left + 10, o.top - 5);
    ctx.lineTo(o.left, o.top);
    ctx.fillStyle = "#000";
    ctx.fill();
});
</script>

 </body>
</html>