JSFiddle - React, Tailwind, and code Playground

by whelkaholism

HTML

<script src="https://enbox.co.uk/scripts/jquery.jqplot.1.0.7r1224/jquery.jqplot.cFrontNoiseDBBuild.min.js?_=1&amp;cdv=636227587547168624"></script>
<script src="https://enbox.co.uk/scripts/jquery.jqplot.1.0.7r1224/plugins/jqplot.barRenderer.min.js?_=1&amp;cdv=636227587547168624"></script>
<script src="https://enbox.co.uk/scripts/jquery.jqplot.1.0.7r1224/plugins/jqplot.highlighter.min.js?_=1&amp;cdv=636227587547168624"></script>
<script src="https://enbox.co.uk/scripts/jquery.jqplot.1.0.7r1224/plugins/jqplot.pieRenderer.min.js?_=1&amp;cdv=636227587547168624"></script>
<script src="https://enbox.co.uk/scripts/jquery.jqplot.1.0.7r1224/plugins/jqplot.categoryAxisRenderer.min.js?_=1&amp;cdv=636227587547168624"></script>
<script src="https://enbox.co.uk/scripts/jquery.jqplot.1.0.7r1224/plugins/jqplot.dateAxisRenderer.min.js?_=1&amp;cdv=636227587547178624"></script>
<script src="https://enbox.co.uk/scripts/jquery.jqplot.1.0.7r1224/plugins/jqplot.pointLabels.min.js?_=1&amp;cdv=636227587547178624"></script>
<script src="https://enbox.co.uk/scripts/jquery.jqplot.1.0.7r1224/plugins/jqplot.canvasTextRenderer.min.js?_=1&amp;cdv=636227587547178624"></script>
<script src="https://enbox.co.uk/scripts/jquery.jqplot.1.0.7r1224/plugins/jqplot.canvasAxisLabelRenderer.min.js?_=1&amp;cdv=636227587547178624"></script>
<script src="https://enbox.co.uk/scripts/jquery.jqplot.1.0.7r1224/plugins/jqplot.canvasAxisMultiColorTickRenderer.min.js?_=1&amp;cdv=636227587547178624"></script>
<script src="https://enbox.co.uk/scripts/jquery.jqplot.1.0.7r1224/plugins/jqplot.cursor.min.js?_=1&amp;cdv=636227587547178624"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div id="chartdiv" ></div>

JavaScript

$.jqplot.DateTickFormatter = function(format, val)
	{		
		format = format || '';
		var d = moment(val);
		var s = d.utc().format(format);
		
		if(d.toDate().getDay() == 0 || d.toDate().getDay() == 6)
		{
			s = new String(s);
			s.__opts = { fillStyle: options && options.weekendTextColor ? options.weekendTextColor : '#55A0AB' };
		}
		
		return s;
	};

Options = {
        title: 'The title',
        seriesDefaults: {
            lineWidth: 1, shadow: false, 
            rendererOptions: { smooth: false },
            markerOptions: { show: true, shadow: false, size: 2 } 
            },  
        cursor: { 
            show: true,
            zoom: true,
        },
        axes: {
        	xaxis: {
          	renderer: $.jqplot.DateAxisRenderer,
					rendererOptions:{
						tickRenderer:$.jqplot.CanvasAxisTickRenderer
					},          
					tickOptions:{					
						formatString:'%d%m %H:%M',
						angle: -90,
						fontSize: '11px'
					},
						tickInterval:'1 hour'
        }
    }
};

var getData = function()
{
var data = [];
for (var i=0; i < 1500; i++) 
{
		var d = new Date();
    d.setTime(d.getTime() + (1000 * 60 * i));
    
    rn = Math.random() * 10;
    data.push( [d, rn] );
}
return data;
}

var plt = $.jqplot('chartdiv', [getData(), getData(), getData(), getData(), getData(), getData(), getData(), getData(), getData(), getData()], Options);