JSFiddle - React, Tailwind, and code Playground

by Philip Kobernik

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css">
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.cursor.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.json2.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.logAxisRenderer.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasTextRenderer.js"></script>
<div id="chart1" style="height:200px; width:600px;"></div>

JavaScript

line1 = [["6/22/2009 10:00",425.32], ["6/22/2009 11:00",424.84], ["6/22/2009 12:00",417.23], ["6/22/2009 13:00",390], 
    ["6/22/2009 14:00",393.69], ["6/22/2009 15:00",392.24], ["6/22/2009 16:00",369.78], ["6/22/2009 17:00",330.16], ["6/22/2009 18:00",308.57], 
    ["6/22/2009 19:00",346.45], ["6/22/2009 20:00",371.28], ["6/22/2009 21:00",324.7]];
        
        line2 = [["6/23/2009 10:00",325.32], ["6/23/2009 11:00",324.84], ["6/23/2009 12:00",217.23], ["6/23/2009 13:00",190], 
    ["6/23/2009 14:00",593.69], ["6/23/2009 15:00",292.24], ["6/23/2009 16:00",369.78], ["6/23/2009 17:00",330.16], ["6/23/2009 18:00",308.57], 
    ["6/23/2009 19:00",446.45], ["6/23/2009 20:00",241.28], ["6/23/2009 21:00",624.7]];

    var plot1 = $.jqplot('chart1', [line1,line2], { 
        title: 'XYZ, Inc.', 
        series: [{ 
            label: 'primary series', 
            neighborThreshold: -1,
            xaxis: 'xaxis'
        }, {
            label: 'comparative series',
            xaxis: 'x2axis'
        }], 
        axes: { 
            xaxis: { 
                renderer:$.jqplot.DateAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                  angle: -30
                } 
            },
            x2axis: {
                renderer:$.jqplot.DateAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                  angle: -30
                } 
            },
            yaxis: {  
                renderer: $.jqplot.LogAxisRenderer,
                tickOptions:{ prefix: '$' } 
            } 
        }, 
        cursor:{
            show: true, 
            zoom: true
        } 
    });