JSFiddle - React, Tailwind, and code Playground

by Glutamat

HTML

<script src="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css">
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.highlighter.min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.trendline.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<div id="chart"></div>

JavaScript

var n = {
    "23.10.2013": 1,
    "24.10.2013": 11,
    "25.10.2013": 2,
    "04.11.2013": 37,
    "06.11.2013": 6,
    "07.11.2013": 10,
    "08.11.2013": 41,
    "11.11.2013": 2,
    "12.11.2013": 105,
    "13.11.2013": 9,
    "14.11.2013": 1,
    "18.11.2013": 38,
    "19.11.2013": 14,
    "20.11.2013": 46,
    "21.11.2013": 43,
    "22.11.2013": 38,
    "23.11.2013": 29,
    "24.11.2013": 48,
    "25.11.2013": 75,
    "26.11.2013": 76,
    "29.11.2013": 6,
    "30.11.2013": 7,
    "01.12.2013": 6,
    "02.12.2013": 49,
    "03.12.2013": 5,
    "04.12.2013": 110,
    "05.12.2013": 7,
    "06.12.2013": 84,
    "07.12.2013": 46,
    "08.12.2013": 21,
    "09.12.2013": 66,
    "10.12.2013": 15
}, s = {
    "23.10.2013": 0,
    "24.10.2013": 4,
    "25.10.2013": 2,
    "04.11.2013": 45,
    "06.11.2013": 5,
    "07.11.2013": 19,
    "08.11.2013": 40,
    "11.11.2013": 5,
    "12.11.2013": 87,
    "13.11.2013": 1,
    "14.11.2013": 1,
    "18.11.2013": 37,
    "19.11.2013": 26,
    "20.11.2013": 37,
    "21.11.2013": 25,
    "22.11.2013": 29,
    "23.11.2013": 32,
    "24.11.2013": 55,
    "25.11.2013": 86,
    "26.11.2013": 36,
    "29.11.2013": 7,
    "30.11.2013": 14,
    "01.12.2013": 10,
    "02.12.2013": 50,
    "03.12.2013": 5,
    "04.12.2013": 101,
    "05.12.2013": 10,
    "06.12.2013": 66,
    "07.12.2013": 38,
    "08.12.2013": 61,
    "09.12.2013": 60,
    "10.12.2013": 43
},
    c = [],
    e = [],
    avg = [];

function sum(a, b) {
    return a + b [1]
}

for (var d in n) {
    var dt = d.split(".");
    dt = [dt[2], dt[1], dt[0]].join("-") + " 12:00";
    c.push([dt, n[d]]);
    e.push([dt, s[d]]);
}

avg = [c.reduce(sum, 0), e.reduce(sum, 0)];

jQuery.jqplot.DateTickFormatter = function (format, date) {
    var d = new Date(),
        weeks = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
    d.setTime(date);
    return weeks[d.getDay()] + " " + d.getDate() + "." + d.getMonth();
}

$.jqplot('chart', [c, e], {
    title: '...',
    axes: {
       ...