JSFiddle - React, Tailwind, and code Playground

by erick

HTML

<script src="http://elycharts.com/sites/elycharts.com/repo/dist/elycharts.min.js"></script>
<script src="http://elycharts.com/sites/elycharts.com/repo/lib/raphael.js"></script>
<div id="container">
    <!-- the table with the data, we'll read data from here, and link "hovers" -->
    <table id="chartdata">
        <thead>
            <th>Date</th><th>Visits</th>
        </thead>
        <tbody>
            <tr><th>1 september</th><td>38</td></tr>
            <tr><th>2 september</th><td>25</td></tr>
            <tr><th>3 september</th><td>127</td></tr>
            <tr><th>4 september</th><td>125</td></tr>
            <tr><th>5 september</th><td>154</td></tr>
            <tr><th>6 september</th><td>159</td></tr>
            <tr><th>7 september</th><td>79</td></tr>
            <tr><th>8 september</th><td>47</td></tr>
            <tr><th>9 september</th><td>27</td></tr>
            <tr><th>10 september</th><td>144</td></tr>
        </tbody>
    </table>
    <!-- the div where we are going to plot -->
    <div id="chart" style="width: 470px; height: 200px"></div>
    <div id="clear"></div>
</div>

CSS

/* styles for the data table */
#chartdata { font-family: helvetica, arial; font-size: 10px; color: #888 }
#chartdata tr, #chartdata td, #chartdata th { padding: 1px 3px }
#chartdata td { text-align: right; font-weight: bold; font-size: 11px }
#chartdata tbody tr:hover { background-color: #F6A; color: white }
#chartdata tr.selected { background-color: #48D; color: white }
#chart { float: left; }
#chartdata { float: left; margin: 10px 5px 10px 15px; }
#container { background-color: #444; color: #EEE; width: 600px }
#clear { clear: both }

JavaScript

// Here is the chart initialization code
$(function() {
    // build the chart values from html table content.
    var thevalues = [];
    var thelabels = [];
    var theanchors = [];
    $("#chartdata > tbody > tr").each(function() {
        thevalues.push($(this).find("td").text());
        thelabels.push($(this).find("th").text());
        theanchors.push($(this));
    });

    // build the chart with 1 serie using the above template.
    $("#chart").chart({
        template: "dark_gray",
        values: {
            serie1: thevalues
        },
        labels: thelabels,
        anchors: theanchors
    });
});

// this is a reausable template definition
$.elycharts.templates['dark_gray'] = {
    type: "line",
    margins: [10, 15, 25, 15],
    style: {
        "background-color": "#444"
    },
    defaultSeries: {
        anchor: {
            // add this class to dom elements when the mouse is hover the chart
            addClass: "selected",
            // highlight the chart when the mouse is on the table
            highlight: true,
            // use mouseenter instead of mousehover.
            useMouseEnter: true
        },
        plotProps: {
            "stroke-width": 5
        },
        dot: true,
        // rounded: false,
        dotProps: {
            stroke: "#444",
            size: 1,
            "stroke-width": 2
        },
        startAnimation: { // use an animation to start plotting the chart
            active: true,
            type: "avg",
            // start from the average line.
            speed: 1000,
            // animate in 1 second.
            easing: ">"
        },
        stepAnimation: { // defines an animation for data updates
            speed: 2000,
            delay: 0,
            easing: '<>'
        },
        highlight: {
            scaleSpeed: 200,
            scaleEasing: '>',
            scale: 7 // enlarge the dot on hover
        }
    },
    series: {
        serie1: {
            color: "#48D",
      ...