RubyGems - alchemy - Versions diffs - 1.0.0 - Mend

alchemy 1.0.0

Files changed (620) hide show

data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/realtime.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!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>You can update a chart periodically to get a real-time effect
+    by using a timer to insert the new data in the plot and redraw it.</p>
+    <p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
+<script type="text/javascript">
+$(function () {
+    // we use an inline data source in the example, usually data would
+    // be fetched from a server
+    var data = [], totalPoints = 300;
+    function getRandomData() {
+        if (data.length > 0)
+            data = data.slice(1);
+        // do a random walk
+        while (data.length < totalPoints) {
+            var prev = data.length > 0 ? data[data.length - 1] : 50;
+            var y = prev + Math.random() * 10 - 5;
+            if (y < 0)
+                y = 0;
+            if (y > 100)
+                y = 100;
+            data.push(y);
+        }
+        // zip the generated y values with the x values
+        var res = [];
+        for (var i = 0; i < data.length; ++i)
+            res.push([i, data[i]])
+        return res;
+    }
+    // setup control widget
+    var updateInterval = 30;
+    $("#updateInterval").val(updateInterval).change(function () {
+        var v = $(this).val();
+        if (v && !isNaN(+v)) {
+            updateInterval = +v;
+            if (updateInterval < 1)
+                updateInterval = 1;
+            if (updateInterval > 2000)
+                updateInterval = 2000;
+            $(this).val("" + updateInterval);
+        }
+    });
+    // setup plot
+    var options = {
+        series: { shadowSize: 0 }, // drawing is faster without shadows
+        yaxis: { min: 0, max: 100 },
+        xaxis: { show: false }
+    };
+    var plot = $.plot($("#placeholder"), [ getRandomData() ], options);
+    function update() {
+        plot.setData([ getRandomData() ]);
+        // since the axes don't change, we don't need to call plot.setupGrid()
+        plot.draw();
+        setTimeout(update, updateInterval);
+    }
+    update();
+});
+</script>
+ </body>
+</html>

data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/resize.html ADDED Viewed

@@ -0,0 +1,61 @@
+<!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>
+    <script language="javascript" type="text/javascript" src="../jquery.flot.resize.js"></script>
+    <style type="text/css">
+    html, body {
+        height: 100%; /* make the percentage height on placeholder work */
+    }
+    .message {
+        padding-left: 50px;
+        font-size: smaller;
+    }
+    </style>
+ </head>
+ <body>
+    <h1>Flot Examples</h1>
+    <div id="placeholder" style="width:80%;height:40%;"></div>
+    <p class="message"></p>
+    <p>Sometimes it makes more sense to just let the plot take up the
+    available space. In that case, we need to redraw the plot each
+    time the placeholder changes its size. If you include the resize
+    plugin, this is handled automatically.</p>
+    <p>Try resizing the window.</p>
+<script 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 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
+    var placeholder = $("#placeholder");
+    var plot = $.plot(placeholder, [d1, d2, d3]);
+    // the plugin includes a jQuery plugin for adding resize events to
+    // any element, let's just add a callback so we can display the
+    // placeholder size
+    placeholder.resize(function () {
+        $(".message").text("Placeholder is now "
+                           + $(this).width() + "x" + $(this).height()
+                           + " pixels");
+    });
+});
+</script>
+ </body>
+</html>

data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/selection.html ADDED Viewed

@@ -0,0 +1,114 @@
+<!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>
+    <script language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>
+ </head>
+    <body>
+    <h1>Flot Examples</h1>
+    <div id="placeholder" style="width:600px;height:300px"></div>
+    <p>1000 kg. CO<sub>2</sub> emissions per year per capita for various countries (source: <a href="http://en.wikipedia.org/wiki/List_of_countries_by_carbon_dioxide_emissions_per_capita">Wikipedia</a>).</p>
+    <p>Flot supports selections through the selection plugin.
+       You can enable rectangular selection
+       or one-dimensional selection if the user should only be able to
+       select on one axis. Try left-click and drag on the plot above
+       where selection on the x axis is enabled.</p>
+    <p>You selected: <span id="selection"></span></p>
+    <p>The plot command returns a plot object you can use to control
+       the selection. Click the buttons below.</p>
+    <p><input id="clearSelection" type="button" value="Clear selection" />
+       <input id="setSelection" type="button" value="Select year 1994" /></p>
+    <p>Selections are really useful for zooming. Just replot the
+       chart with min and max values for the axes set to the values
+       in the "plotselected" event triggered. Enable the checkbox
+       below and select a region again.</p>
+    <p><label><input id="zoom" type="checkbox" />Zoom to selection.</label></p>
+<script type="text/javascript">
+$(function () {
+    var data = [
+        {
+            label: "United States",
+            data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]
+        },
+        {
+            label: "Russia",
+            data: [[1992, 13.4], [1993, 12.2], [1994, 10.6], [1995, 10.2], [1996, 10.1], [1997, 9.7], [1998, 9.5], [1999, 9.7], [2000, 9.9], [2001, 9.9], [2002, 9.9], [2003, 10.3], [2004, 10.5]]
+        },
+        {
+            label: "United Kingdom",
+            data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]]
+        },
+        {
+            label: "Germany",
+            data: [[1990, 12.4], [1991, 11.2], [1992, 10.8], [1993, 10.5], [1994, 10.4], [1995, 10.2], [1996, 10.5], [1997, 10.2], [1998, 10.1], [1999, 9.6], [2000, 9.7], [2001, 10.0], [2002, 9.7], [2003, 9.8], [2004, 9.79]]
+        },
+        {
+            label: "Denmark",
+ 	    data: [[1990, 9.7], [1991, 12.1], [1992, 10.3], [1993, 11.3], [1994, 11.7], [1995, 10.6], [1996, 12.8], [1997, 10.8], [1998, 10.3], [1999, 9.4], [2000, 8.7], [2001, 9.0], [2002, 8.9], [2003, 10.1], [2004, 9.80]]
+        },
+        {
+            label: "Sweden",
+            data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]]
+        },
+        {
+            label: "Norway",
+            data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]]
+        }
+    ];
+    var options = {
+        series: {
+            lines: { show: true },
+            points: { show: true }
+        },
+        legend: { noColumns: 2 },
+        xaxis: { tickDecimals: 0 },
+        yaxis: { min: 0 },
+        selection: { mode: "x" }
+    };
+    var placeholder = $("#placeholder");
+    placeholder.bind("plotselected", function (event, ranges) {
+        $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
+        var zoom = $("#zoom").attr("checked");
+        if (zoom)
+            plot = $.plot(placeholder, data,
+                          $.extend(true, {}, options, {
+                              xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
+                          }));
+    });
+    placeholder.bind("plotunselected", function (event) {
+        $("#selection").text("");
+    });
+    var plot = $.plot(placeholder, data, options);
+    $("#clearSelection").click(function () {
+        plot.clearSelection();
+    });
+    $("#setSelection").click(function () {
+        plot.setSelection({ xaxis: { from: 1994, to: 1995 } });
+    });
+});
+</script>
+ </body>
+</html>

data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/setting-options.html ADDED Viewed

@@ -0,0 +1,61 @@
+<!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>There are plenty of options you can set to control the precise
+    looks of your plot. You can control the ticks on the axes, the
+    legend, the graph type, etc. The idea is that Flot goes to great
+    lengths to provide sensible defaults so that you don't have to
+    customize much for a good result.</p>
+<script type="text/javascript">
+$(function () {
+    var d1 = [];
+    for (var i = 0; i < Math.PI * 2; i += 0.25)
+        d1.push([i, Math.sin(i)]);
+    var d2 = [];
+    for (var i = 0; i < Math.PI * 2; i += 0.25)
+        d2.push([i, Math.cos(i)]);
+    var d3 = [];
+    for (var i = 0; i < Math.PI * 2; i += 0.1)
+        d3.push([i, Math.tan(i)]);
+    $.plot($("#placeholder"), [
+        { label: "sin(x)",  data: d1},
+        { label: "cos(x)",  data: d2},
+        { label: "tan(x)",  data: d3}
+    ], {
+        series: {
+            lines: { show: true },
+            points: { show: true }
+        },
+        xaxis: {
+            ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
+        },
+        yaxis: {
+            ticks: 10,
+            min: -2,
+            max: 2
+        },
+        grid: {
+            backgroundColor: { colors: ["#fff", "#eee"] }
+        }
+    });
+});
+</script>
+ </body>
+</html>

data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/stacking.html ADDED Viewed

@@ -0,0 +1,77 @@
+<!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>
+    <script language="javascript" type="text/javascript" src="../jquery.flot.stack.js"></script>
+ </head>
+    <body>
+    <h1>Flot Examples</h1>
+    <div id="placeholder" style="width:600px;height:300px;"></div>
+    <p>With the stack plugin, you can have Flot stack the
+    series. This is useful if you wish to display both a total and the
+    constituents it is made of. The only requirement is that you provide
+    the input sorted on x.</p>
+    <p class="stackControls">
+    <input type="button" value="With stacking">
+    <input type="button" value="Without stacking">
+    </p>
+    <p class="graphControls">
+    <input type="button" value="Bars">
+    <input type="button" value="Lines">
+    <input type="button" value="Lines with steps">
+    </p>
+<script id="source">
+$(function () {
+    var d1 = [];
+    for (var i = 0; i <= 10; i += 1)
+        d1.push([i, parseInt(Math.random() * 30)]);
+    var d2 = [];
+    for (var i = 0; i <= 10; i += 1)
+        d2.push([i, parseInt(Math.random() * 30)]);
+    var d3 = [];
+    for (var i = 0; i <= 10; i += 1)
+        d3.push([i, parseInt(Math.random() * 30)]);
+    var stack = 0, bars = true, lines = false, steps = false;
+    function plotWithOptions() {
+        $.plot($("#placeholder"), [ d1, d2, d3 ], {
+            series: {
+                stack: stack,
+                lines: { show: lines, fill: true, steps: steps },
+                bars: { show: bars, barWidth: 0.6 }
+            }
+        });
+    }
+    plotWithOptions();
+    $(".stackControls input").click(function (e) {
+        e.preventDefault();
+        stack = $(this).val() == "With stacking" ? true : null;
+        plotWithOptions();
+    });
+    $(".graphControls input").click(function (e) {
+        e.preventDefault();
+        bars = $(this).val().indexOf("Bars") != -1;
+        lines = $(this).val().indexOf("Lines") != -1;
+        steps = $(this).val().indexOf("steps") != -1;
+        plotWithOptions();
+    });
+});
+</script>
+ </body>
+</html>

data/vendor/assets/javascripts/alchemy/jquery/plugins/flot-0.7/examples/symbols.html ADDED Viewed

@@ -0,0 +1,49 @@
+<!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>
+    <script language="javascript" type="text/javascript" src="../jquery.flot.symbol.js"></script>
+ </head>
+ <body>
+    <h1>Flot Examples</h1>
+    <div id="placeholder" style="width:600px;height:300px"></div>
+    <p>Various point types. Circles are built-in. For other
+    point types, you can define a little callback function to draw the
+    symbol; some common ones are available in the symbol plugin.</p>
+<script type="text/javascript">
+$(function () {
+    function generate(offset, amplitude) {
+        var res = [];
+        var start = 0, end = 10;
+        for (var i = 0; i <= 50; ++i) {
+            var x = start + i / 50 * (end - start);
+            res.push([x, amplitude * Math.sin(x + offset)]);
+        }
+        return res;
+    }
+    var data = [
+        { data: generate(2, 1.8), points: { symbol: "circle" } },
+        { data: generate(3, 1.5), points: { symbol: "square" } },
+        { data: generate(4, 0.9), points: { symbol: "diamond" } },
+        { data: generate(6, 1.4), points: { symbol: "triangle" } },
+        { data: generate(7, 1.1), points: { symbol: "cross" } }
+    ];
+    $.plot($("#placeholder"), data, {
+        series: { points: { show: true, radius: 3 } },
+        grid: { hoverable: true }
+    });
+});
+</script>
+ </body>
+</html>