Skip to content

F
flot
Switch branch/tag
Find file
Normal viewHistoryPermalink
graph-types.html 1.82 KB
Newer Older
olau@iola.dk's avatar
Added first version
87390ae7
 
olau@iola.dk committed
1 2 3 4 5 6 
<!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"></link>
olau@iola.dk's avatar
Add and use packed version of excanvas
742ec5d7
 
olau@iola.dk committed
7 
    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
olau@iola.dk's avatar
Added first version
87390ae7
 
olau@iola.dk committed
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 
    <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 supports lines, points, filled areas, bars and any
    combinations of these, in the same plot and even on the same data
    series.</p>

<script id="source" language="javascript" type="text/javascript">
$(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    var d3 = [];
    for (var i = 0; i < 14; i += 0.5)
        d3.push([i, Math.cos(i)]);

    var d4 = [];
olau@iola.dk's avatar
Refactored the axis adjustment code for bars
de724cf7
 
olau@iola.dk committed
33 
    for (var i = 0; i < 14; i += 0.1)
olau@iola.dk's avatar
Added first version
87390ae7
 
olau@iola.dk committed
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 
        d4.push([i, Math.sqrt(i * 10)]);
    
    var d5 = [];
    for (var i = 0; i < 14; i += 0.5)
        d5.push([i, Math.sqrt(i)]);
    
    $.plot($("#placeholder"), [
        {
            data: d1,
            lines: { show: true, fill: true }
        },
        {
            data: d2,
            bars: { show: true }
        },
        {
            data: d3,
            points: { show: true }
        },
        {
            data: d4,
            lines: { show: true }
        },
        {
            data: d5,
            lines: { show: true },
            points: { show: true }
        }
    ]);
});
</script>

 </body>
</html>