JSFiddle - React, Tailwind, and code Playground

by Glutamat

HTML

<script src="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css">
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.highlighter.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.trendline.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<div id="chart"></div>

JavaScript

function f(a) {b=(a%6)-3; return ((1 - ~~(((a%6)+1)/4)) * (Math.pow (2,((a%6)+2)) - (~~(((a%6)+1)/3))))  + (~~(((a%6)+1)/4)*(16+8*b*b-Math.pow(6,b*(b-1)/2)*Math.round(b/2)))}

function g(x) { return -0.225 * Math.pow (x,5) + 4.25 * Math.pow (x,4) -29.375 * Math.pow (x,3) + 91.75 * Math.pow (x,2) - 122.4 * x + 60;}

var s=5;
for (var i=0,c=[];i<12*s;i += 1/s) {
     c.push ([i*s,f (i)]) }

$.jqplot('chart', [c], {
    title: '...',
    axes: {
        yaxis: {
            min: 0
        }
    },
    highlighter: {
        show: false,
        sizeAdjust: 7.5
    },
    legend: {
        placement: "outside",
        marginTop: "50px",
        renderer: $.jqplot.EnhancedLegendRenderer,
        show: true,
        location: 's',
        showSwatches: true,
        rendererOptions: {
            seriesToggle: 'normal',
        },
    },
    seriesDefaults: {
        markerOptions: {show:false}
    }
});