JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Gable.js</title>
        <script src="https://raw.github.com/editor/Gable/master/gable.js"></script>
    </head>
    <body>
        <div id='example2'></div>
    </body>
</html>

JavaScript

var data = [
    { 'Food': 'Apple Pie', 'Weight (g)': 158, 'kCal': 405 }
    , [ 'Beer, Light', 355, 95 ]
    , [ 'Carrots, Raw, Whole', 72, 30 ]
    , [ 'Doughnuts, Cake Type, Plain', 50, 210 ]
    , [ 'Enchilada', 230, 235 ]
    , [ 'Froot Loops Cereal', 28.35, 110 ]
    , [ 'Grape Soda', 372, 180 ]
    , [ 'Hamburger, 4oz Patty', 174, 445 ]
];

Gable( 'food_data' ).add( { value: data, meta: { 'title': 'USDA Nutrient Database' } } ).draw( { 'target': 'example2', 'type': 'bar' } );