JSFiddle - React, Tailwind, and code Playground

by giorgitbs

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.pieRenderer.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.donutRenderer.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
<div data-role="page" id="page1" style="text-align:center;">
    <div data-theme="a" data-role="header" data-position="fixed"> <a data-role="button" href="?act=page2" data-icon="arrow-r" data-iconpos="right" data-ajax="false" class="ui-btn-right">
            Next
        </a>
 <a data-role="button" href="?act=page3" data-icon="arrow-l" data-iconpos="left" data-ajax="false" class="ui-btn-left">
            Prev
        </a>

         <h3>
            Stats
        </h3>

    </div>
     <h3>
        Total Unist in Inventory
    </h3>

     <h1>
 94    </h1>

     <h3>
        Top Vehicles Type
    </h3>

    <div id="chartdiv1" style="height:300px;width:400px; margin:auto;"></div>
</div>

JavaScript

$("#page1").on('swiperight', function () {
    alert("swipe");
});

$("#page1").on('swipeleft', function () {
    alert("swipe left");
});

$(document).ready(function () {
    var data = [
        ['SUV', 32],
        ['Sedan', 17],
        ['Pickup Truck', 15],
        ['Minivan', 6],
        ['Hatchback', 6],
        ['Coupe', 2]
    ];

    var plot = jQuery.jqplot('chartdiv1', [data], {
        seriesDefaults: {
            seriesColors: ["#FF0000", "#0000FF", "#00FF00", "#FF00FF", "#FFA500", "#FFFF00"],
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
                // Turn off filling of slices.
                fill: false,
                showDataLabels: true,
                // Add a margin to seperate the slices.
                sliceMargin: 4,
                // stroke the slices with a little thicker line.
                lineWidth: 5
            }
        },
        legend: {
            // This renderer is needed for advance legends.
            renderer: jQuery.jqplot.EnhancedLegendRenderer,
            show: true,
            location: 's',
            placement: 'outside',
            // Breaks the ledgend into horizontal.
            rendererOptions: {
                numberRows: '3',
                numberColumns: '3'
            },
            seriesToggle: true
        },
    });
});