JSFiddle - React, Tailwind, and code Playground

by Evandro Araújo

HTML

<script src="http://72.35.95.94/jquery/plugins/jqplot/jquery.jqplot.min.js"></script>
<script src="http://72.35.95.94/jquery/plugins/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script src="http://72.35.95.94/jquery/plugins/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script src="http://72.35.95.94/jquery/plugins/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="http://72.35.95.94/jquery/plugins/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" href="http://72.35.95.94/jquery/plugins/jqplot/jquery.jqplot.min.css">
<div id="bar-graph"></div>
<div id="pie-graph"></div>

JavaScript

$(document).ready(function () {
    $.jqplot.config.enablePlugins = true;

    //bar graph
    var totalMarkers = 84;
    var s1 = [32, 28, 18, 6];

    var ticks = ['0-20 kph', '21-40 kph', '41-60 kph', '61+ kph'];

    plot1 = $.jqplot('bar-graph', [s1], {
        animate: !$.jqplot.use_excanvas,
        title: 'Gráficos de velocidade',
        captureRightClick: true,
        seriesColors: ['green', 'yellow', 'orange', 'red'],
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            pointLabels: {
                show: true,
                formatString: '%s (%%)' 
            },
            rendererOptions: {
                varyBarColor: true
            }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
        },
        highlighter: {
            show: false
        }
    });


    //pie graph
    var data = [
        ['Unidades com atividade', 67],
        ['Unidades sem atividade', 17]
    ];

    plot2 = $.jqplot('pie-graph', [data], {
        title: 'Gráfico de uso',
        captureRightClick: true,
        seriesDefaults: {
            renderer: $.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true
            }
        },
        legend: {
            show: true,
            location: 'e'
        }
    });

});