JSFiddle - React, Tailwind, and code Playground

by Nicholas Mastracchio

HTML

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<body>
    <div style="width:800px;">
        <div id="myChartDiv"></div>
        <table id="calc-table">
            <tbody>
                <tr>
                    <td>
                        <input type="text" id="cell_0_0" value="">
                    </td>
                    <td>
                        <input type="text" id="cell_0_1" value="">
                    </td>
                    <td>
                        <input type="text" id="cell_0_2" value="">
                    </td>
                    <td>
                        <input type="text" id="cell_0_3" value="">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

CSS

input {
            width:160px;
        }
        #calc-table {
            margin-left:50px;
        }
        td {
            padding-right:15px;
            padding-left:0px;
        }

JavaScript

var oData = {
     "graphset": [{
         "type": "bar",
             "background-color": "none",
             "plotarea": {
             "margin-bottom": "12%"
         },
             "scale-x": {
             "labels": ["As", "Ba", "Cd", "Cr", "Cu", "Hg", "Mo", "Ni", "Pb", "Sb", "Se", "Zn", "Cl", "F", "SO4", "TDS"],
                 "tick": {
                 "visible": false
             },
                 "item": {
                 "visible": true
             }
         },
             "tooltip": {
             //"text": "Inert: %data-inert"
         },
             "scale-y": {
             "markers": [{
                 // "type": "line",
                 "range": [50]
             }],
             //   "label": {
             //  "text": "Percentage"
             // },
             "values": "0:100:20"
         },
             "series": [{
             "background-color": "#8EC449",
                 "values": [50, 50, 50, 50],
                 "data-inert": [0.5, 20, 0.04, 0.5],
                 "data-non-haz-l-f": [2, 100, 1, 10],
                 "data-haz-l-f": [25, 300, 5, 70],

             //Empty rules to be updated later
             "rules": [{
                 "id": "nodeRule0"
             }, {
                 "id": "nodeRule1"
             }, {
                 "id": "nodeRule2"
             }, {
                 "id": "nodeRule3"
             }, {
                 "id": "nodeRule4"
             }, {
                 "id": "nodeRule5"
             }, {
                 "id": "nodeRule6"
             }, {
                 "id": "nodeRule7"
             }, {
                 "id": "nodeRule8"
             }, {
                 "id": "nodeRule9"
             }, {
                 "id": "nodeRule10"
             }, {
                 "id": "nodeRule11"
             }, {
                 "id": "nodeRule12"
             }, {
                 "id": "nodeRule13"
             }, {
                 "id": "nodeRule14"
             }, {
              ...