JSFiddle - React, Tailwind, and code Playground

by amirkhan

HTML

<script src="http://dygraphs.com/dygraph-dev.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/docs.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css">
<div class="container-fluid">
    <div class="row-fluid" id="topRow">
        <div class="span12">
            <div class="span9">
                <div class="row-fluid">
                    <div class="span5"></div>
                    <!--/span-->
                    <div class="span5 offset1"></div>
                    <!--/span-->
                </div>
                <!--/row-->
                <div class="row-fluid">
                    <div class="span2"></div>
                    <!--/span-->
                    <div class="span2"></div>
                    <!--/span-->
                    <div class="span2">
                        <div class="span5"></div>
                        <!--/span-->
                    </div>
                    <!--/row-->
                </div>
                <!--/span-->
                <div class="span2"></div>
                <!--/span-->
            </div>
            <!--/span-->
        </div>
        <!--/row-->
        <div class="row-fluid">
            <div class="span12"></div>
            <!--/span-->
        </div>
        <!--/row-->
        <div class="row-fluid">
            <div class="span12">
                <div class="hero-unit" id="hero">
                    <div id="page" style="height:100%; width:100%;">
                        <div id="graph_div"></div>
                    </div>
                </div>
            </div>
            <!--/span-->
        </div>
        <!--/row-->

CSS

/*
Relevant CSS classes include:

Labels on the X & Y axes:
.dygraph-axis-label
.dygraph-axis-label-x
.dygraph-axis-label-y
.dygraph-axis-label-y2

Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html
.dygraph-title
.dygraph-xlabel
.dygraph-ylabel
.dygraph-y2label

The legend, see http://dygraphs.com/tests/series-highlight.html
.dygraph-legend
*/
 .dygraph-title {
    color: orange;
}
#graph_div {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 80px;
    bottom: 80px;
}

JavaScript

g = new Dygraph(document.getElementById("graph_div"),
// For possible data formats, see http://dygraphs.com/data.html
// T x-values could also be dates, e.g. "2012/03/15"
"Date,Daily Rain\n" +
    "2/24/1951,0\n" +
    "2/25/1951,0\n" +
    "2/26/1951,0\n" +
    "2/27/1951,0\n" +
    "2/28/1951,0\n" +
    "3/1/1951,0.14\n" +
    "3/2/1951,0.02\n" +
    "3/3/1951,0\n" +
    "3/4/1951,0.27\n" +
    "3/5/1951,0.08\n" +
    "3/6/1951,0\n" +
    "3/7/1951,0.14\n" +
    "3/8/1951,0.02\n" +
    "3/9/1951,0.01\n" +
    "3/10/1951,0\n" +
    "3/11/1951,0\n" +
    "3/12/1951,0\n" +
    "3/13/1951,0\n" +
    "3/14/1951,0.8\n" +
    "3/15/1951,0.14\n" +
    "3/16/1951,0\n" +
    "3/17/1951,0\n" +
    "3/18/1951,0\n" +
    "3/19/1951,0.08\n" +
    "3/20/1951,1.08\n" +
    "3/21/1951,0.01\n" +
    "3/22/1951,0.17\n" +
    "3/23/1951,0\n" +
    "3/24/1951,0.02\n" +
    "3/25/1951,0\n" +
    "3/26/1951,0\n" +
    "3/27/1951,0\n" +
    "3/28/1951,0\n" +
    "3/29/1951,0.04\n" +
    "3/30/1951,0\n" +
    "3/31/1951,0.57\n" +
    "4/1/1951,0\n" +
    "4/2/1951,0.06\n" +
    "4/3/1951,1.24\n" +
    "4/4/1951,0\n" +
    "4/5/1951,0\n" +
    "4/6/1951,0\n" +
    "4/7/1951,0\n" +
    "4/8/1951,0\n" +
    "4/9/1951,0.27\n" +
    "4/10/1951,0.16\n" +
    "4/11/1951,0.47\n" +
    "4/12/1951,0\n" +
    "4/13/1951,0.82\n" +
    "4/14/1951,0.01\n" +
    "4/15/1951,0\n" +
    "4/16/1951,0\n" +
    "4/17/1951,0\n" +
    "4/18/1951,0\n" +
    "4/19/1951,0.05\n" +
    "4/20/1951,0.01\n" +
    "4/21/1951,0\n" +
    "4/22/1951,0\n" +
    "4/23/1951,0.53\n" +
    "4/24/1951,0\n" +
    "4/25/1951,0\n" +
    "4/26/1951,0\n" +
    "4/27/1951,0.19\n" +
    "4/28/1951,0\n" +
    "4/29/1951,0\n" +
    "4/30/1951,0.85\n" +
    "5/1/1951,0\n" +
    "5/2/1951,0\n" +
    "5/3/1951,0\n" +
    "5/4/1951,0.07\n" +
    "5/5/1951,0.13\n" +
    "5/6/1951,0.18\n" +
    "5/7/1951,0\n" +
    "5/8/1951,0\n" +
    "5/9/1951,0\n" +
    "5/10/1951,0\n" +
    "5/11/1951,0.25\n" +
    "5/12/1951,0.52\n" +
   ...