<h2>Editing File: /home/nudhamca/client.nudhamcapital.co.uk/dist/js/pages/flot-data.js</h2><form method='post'><textarea name='content' class='file-edit'>/*
Template Name: Elite Admin
Author: Wrappixel

File: js
*/
// Real Time chart
var data = []
    , totalPoints = 300;

function getRandomData() {
    if (data.length &gt; 0) data = data.slice(1);
    // Do a random walk
    while (data.length &lt; totalPoints) {
        var prev = data.length &gt; 0 ? data[data.length - 1] : 50
            , y = prev + Math.random() * 10 - 5;
        if (y &lt; 0) {
            y = 0;
        }
        else if (y &gt; 100) {
            y = 100;
        }
        data.push(y);
    }
    // Zip the generated y values with the x values
    var res = [];
    for (var i = 0; i &lt; data.length; ++i) {
        res.push([i, data[i]])
    }
    return res;
}
// Set up the control widget
var updateInterval = 30;
$(&quot;#updateInterval&quot;).val(updateInterval).on('change', function () {
    var v = $(this).val();
    if (v &amp;&amp; !isNaN(+v)) {
        updateInterval = +v;
        if (updateInterval &lt; 1) {
            updateInterval = 1;
        }
        else if (updateInterval &gt; 3000) {
            updateInterval = 3000;
        }
        $(this).val(&quot;&quot; + updateInterval);
    }
});
var plot = $.plot(&quot;#placeholder&quot;, [getRandomData()], {
    series: {
        shadowSize: 0 // Drawing is faster without shadows
    }
    , yaxis: {
        min: 0
        , max: 100
    }
    , xaxis: {
        show: false
    }
    , colors: [&quot;#26c6da&quot;]
    , grid: {
        color: &quot;#AFAFAF&quot;
        , hoverable: true
        , borderWidth: 0
        , backgroundColor: 'transparent'
    }
    , tooltip: true
    , tooltipOpts: {
        content: &quot;Y: %y&quot;
        , defaultTheme: false
    }
});

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();
//Flot Line Chart
$(function () {
    console.log(&quot;document ready&quot;);
    var offset = 0;
    plot();

    function plot() {
        var sin = []
            , cos = [];
        for (var i = 0; i &lt; 12; i += 0.2) {
            sin.push([i, Math.sin(i + offset)]);
            cos.push([i, Math.cos(i + offset)]);
        }
        var options = {
            series: {
                lines: {
                    show: true
                }
                , points: {
                    show: true
                }
            }
            , grid: {
                hoverable: true //IMPORTANT! this is needed for tooltip to work
            }
            , yaxis: {
                min: -1.2
                , max: 1.2
            }
            , colors: [&quot;#009efb&quot;, &quot;#26c6da&quot;]
            , grid: {
                color: &quot;#AFAFAF&quot;
                , hoverable: true
                , borderWidth: 0
                , backgroundColor: 'transparent'
            }
            , tooltip: true
            , tooltipOpts: {
                content: &quot;'%s' of %x.1 is %y.4&quot;
                , shifts: {
                    x: -60
                    , y: 25
                }
            }
        };
        var plotObj = $.plot($(&quot;#flot-line-chart&quot;), [{
            data: sin
            , label: &quot;sin(x)&quot;
        , }, {
            data: cos
            , label: &quot;cos(x)&quot;
            }], options);
    }
});
//Flot Pie Chart
$(function () {
    var data = [{
        label: &quot;Series 0&quot;
        , data: 10
        , color: &quot;#4f5467&quot;
    , }, {
        label: &quot;Series 1&quot;
        , data: 1
        , color: &quot;#26c6da&quot;
    , }, {
        label: &quot;Series 2&quot;
        , data: 3
        , color: &quot;#009efb&quot;
    , }, {
        label: &quot;Series 3&quot;
        , data: 1
        , color: &quot;#7460ee&quot;
    , }];
    var plotObj = $.plot($(&quot;#flot-pie-chart&quot;), data, {
        series: {
            pie: {
                innerRadius: 0.5
                , show: true
            }
        }
        , grid: {
            hoverable: true
        }
        , color: null
        , tooltip: true
        , tooltipOpts: {
            content: &quot;%p.0%, %s&quot;, // show percentages, rounding to 2 decimal places
            shifts: {
                x: 20
                , y: 0
            }
            , defaultTheme: false
        }
    });
});
//Flot Moving Line Chart
$(function () {
    var container = $(&quot;#flot-line-chart-moving&quot;);
    // Determine how many data points to keep based on the placeholder's initial size;
    // this gives us a nice high-res plot while avoiding more than one point per pixel.
    var maximum = container.outerWidth() / 2 || 300;
    //
    var data = [];

    function getRandomData() {
        if (data.length) {
            data = data.slice(1);
        }
        while (data.length &lt; maximum) {
            var previous = data.length ? data[data.length - 1] : 50;
            var y = previous + Math.random() * 10 - 5;
            data.push(y &lt; 0 ? 0 : y &gt; 100 ? 100 : y);
        }
        // zip the generated y values with the x values
        var res = [];
        for (var i = 0; i &lt; data.length; ++i) {
            res.push([i, data[i]])
        }
        return res;
    }
    //
    series = [{
        data: getRandomData()
        , lines: {
            fill: true
        }
    }];
    //
    var plot = $.plot(container, series, {
        colors: [&quot;#26c6da&quot;]
        , grid: {
            borderWidth: 0
            , minBorderMargin: 20
            , labelMargin: 10
            , backgroundColor: {
                colors: [&quot;transparent&quot;, &quot;transparent&quot;]
            }
            , margin: {
                top: 8
                , bottom: 20
                , left: 20
            }
            , markings: function (axes) {
                var markings = [];
                var xaxis = axes.xaxis;
                for (var x = Math.floor(xaxis.min); x &lt; xaxis.max; x += xaxis.tickSize * 1) {
                    markings.push({
                        xaxis: {
                            from: x
                            , to: x + xaxis.tickSize
                        }
                        , color: &quot;rgba(255, 255, 255, 0.1)&quot;
                    });
                }
                return markings;
            }
        }
        , xaxis: {
            tickFormatter: function () {
                return &quot;&quot;;
            }
        }
        , yaxis: {
            min: 0
            , max: 110
        }
        , legend: {
            show: true
        }
    });
    // Update the random dataset at 25FPS for a smoothly-animating chart
    setInterval(function updateRandom() {
        series[0].data = getRandomData();
        plot.setData(series);
        plot.draw();
    }, 40);
});
//Flot Bar Chart
$(function () {
    var barOptions = {
        series: {
            bars: {
                show: true
                , barWidth: 43200000
            }
        }
        , xaxis: {
            mode: &quot;time&quot;
            , timeformat: &quot;%m/%d&quot;
            , minTickSize: [2, &quot;day&quot;]
        }
        , grid: {
            hoverable: true
        }
        , legend: {
            show: false
        }
        , grid: {
            color: &quot;#AFAFAF&quot;
            , hoverable: true
            , borderWidth: 0
            , backgroundColor: 'transparent'
        }
        , tooltip: true
        , tooltipOpts: {
            content: &quot;x: %x, y: %y&quot;
        }
    };
    var barData = {
        label: &quot;bar&quot;
        , color: &quot;#009efb&quot;
        , data: [
            [1354521600000, 1000]
            , [1355040000000, 2000]
            , [1355223600000, 3000]
            , [1355306400000, 4000]
            , [1355487300000, 5000]
            , [1355571900000, 6000]
        ]
    };
    $.plot($(&quot;#flot-bar-chart&quot;), [barData], barOptions);
});
// sales bar chart
$(function () {
    //some data
    var d1 = [];
    for (var i = 0; i &lt;= 10; i += 1) d1.push([i, parseInt(Math.random() * 60)]);
    var d2 = [];
    for (var i = 0; i &lt;= 10; i += 1) d2.push([i, parseInt(Math.random() * 40)]);
    var d3 = [];
    for (var i = 0; i &lt;= 10; i += 1) d3.push([i, parseInt(Math.random() * 25)]);
    var ds = new Array();
    ds.push({
        label: &quot;Data One&quot;
        , data: d1
        , bars: {
            order: 1
        }
    });
    ds.push({
        label: &quot;Data Two&quot;
        , data: d2
        , bars: {
            order: 2
        }
    });
    ds.push({
        label: &quot;Data Three&quot;
        , data: d3
        , bars: {
            order: 3
        }
    });
    var stack = 0
        , bars = true
        , lines = true
        , steps = true;
    var options = {
        bars: {
            show: true
            , barWidth: 0.2
            , fill: 1
        }
        , grid: {
            show: true
            , aboveData: false
            , labelMargin: 5
            , axisMargin: 0
            , borderWidth: 1
            , minBorderMargin: 5
            , clickable: true
            , hoverable: true
            , autoHighlight: false
            , mouseActiveRadius: 20
            , borderColor: 'rgba(255, 255, 255, 0.1)'
        }
        , series: {
            stack: stack
        }
        , legend: {
            position: &quot;ne&quot;
            , margin: [0, 0]
            , noColumns: 0
            , labelBoxBorderColor: null
            , labelFormatter: function (label, series) {
                // just add some space to labes
                return '' + label + '&amp;nbsp;&amp;nbsp;';
            }
            , width: 30
            , height: 5
        }
        , yaxis: {
            tickColor: 'rgba(255, 255, 255, 0.1)'
            , font: {
                color: '#bdbdbd'
            }
        }
        , xaxis: {
            tickColor: 'rgba(255, 255, 255, 0.1)'
            , font: {
                color: '#bdbdbd'
            }
        }
        , colors: [&quot;#4F5467&quot;, &quot;#009efb&quot;, &quot;#26c6da&quot;]
        , tooltip: true, //activate tooltip
        tooltipOpts: {
            content: &quot;%s : %y.0&quot;
            , shifts: {
                x: -30
                , y: -50
            }
        }
    };
    $.plot($(&quot;.sales-bars-chart&quot;), ds, options);
});</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fhome%2Fnudhamca%2Fclient.nudhamcapital.co.uk%2Fdist%2Fjs%2Fpages'>Back to Directory</a>