JSFiddle - React, Tailwind, and code Playground

by raviolicode

HTML

<script src="http://www.jqplot.com/jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="http://www.jqplot.com/jquery.jqplot.css">
<script src="http://www.jqplot.com//plugins/jqplot.dateAxisRenderer.min.js"></script>
<div id="chart1"></div>

JavaScript

$.jqplot.config.enablePlugins = true; // on the page before plot creation.
var cosPoints = [];
for (var i = 0; i < 2 * Math.PI; i += 0.1) {
    cosPoints.push([i, Math.cos(i)]);
}

/*var line1 = [['2008-09-30', 4], ['2008-10-30', 6.5], ['2008-11-30', 5.7], ['2008-12-30', 9], ['2009-01-30', 8.2]];
*/
var line1 = [["2011-02-11", 69.3], ["2011-02-12", 69.3], ["2011-02-13", 68.5], ["2011-02-14", 67.7], ["2011-02-15", 66.9], ["2011-02-16", 65.9], ["2011-02-17", 65.2], ["2011-02-18", 65.2], ["2011-02-19", 64.9], ["2011-02-20", 64.4], ["2011-02-21", 64.4]]; /* , ["2011-02-22", nil] */

function average(arr, start, end) {
    var i;
    for (i = start; i <= end; i++) {
        sum += arr[i];
    }
    return sum / (end - start + 1);
}

function movingAverageFn(arr, i) {
    if (i < 9) {
        return average(arr, 0, i);
    } else {
        return average(arr, i - 9, i);
    }
}

function averages() {
var line2 = [];

for(i=0; i<line1.length; i++) {
    line2.push([line1[i], movingAverageFn(line1, i)]);
}
    alert(line2);
    return line2;
}


$.jqplot('chart1', [line1, averages()], {
    title: 'Default Date Axis',
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer
        }
    },
    
series:[
        {label:'Rising line', markerOptions:{style:'square'}}, 
        {label:'Declining line'}
    ]
    /*series: [{
        lineWidth: 4,
        markerOptions: {
            style: 'square'
        }}]*/
});