JSFiddle - React, Tailwind, and code Playground

by srmor

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.stack.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  </head>
  <body>
    <div id="placeholder" style="width:800px;height:400px;"></div>
      <div id="chartLegend"></div>
  </body>
</html>

CSS

div.legend > table {
  border: 2px red solid;
}

JavaScript

$(document).ready(function ()
{
    DrawChart();
});

function DrawChart()
{
    var shortLinkData = [[0, 11],[1, 15],[2, 25],[3, 124],[4, 13],[5, 56], [6, 11], [7, 15],[8, 25], [9, 24], [10, 13],[11, 18]];
    var fullUrlData = [[0, 11],[1, 15],[2, 25],[3, 124],[4, 13],[5, 56], [6, 11], [7, 15],[8, 25], [9, 24], [10, 13],[11, 18]];

    var ds = new Array();

    var data =
    [
        {
            label: "This link",
            data: shortLinkData,
            bars:
            {
                show: true,
                barWidth: 0.2,
                order: 1,
                lineWidth: 2,
                fill: 1
            },
            color: "#469DD2"
        },
        {
            label: "All links",
            data: fullUrlData,
            bars:
            {
                show: true,
                barWidth: 0.2,
                order: 2,
                lineWidth: 2,
                fill: 1
            },
            color: "#A2D045"
        }
    ];
    
    var ticks = [[0, "Jan"], [1, "Feb"], [2, "Mar"], [3, "Apr"],[4, "May"], [5, "Jun"], [6, "Jul"], [7, "Aug"], [8, "Sep"], [9, "Oct"], [10, "Nov"], [11, "Dec"]];

    var options = {
        xaxis: {
            ticks: ticks,
            tickLength: 0,
            autoscaleMargin: .02
        },
        grid: {
            borderWidth: 1
        },
        legend: {
            noColumns: 2,
            container: $("#chartLegend")
        }
    };

    var plot = $.plot($("#placeholder"), data, options);
}