JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
<div id="barchart" style="height: 250px;"></div>

<div id="barstacked" style="height: 250px;"></div>

JavaScript

$.mockjax({
  url: '/js/data.json',
  responseTime: 750,
  responseText: {
    "bar": {
        "bar1": {
            "x": "1/1/2014",
            "a": "9",
            "b": "6"
        },
        "bar2": {
            "x": "1/2/2014",
            "a": "5",
            "b": "7"
        },
        "bar3": {
            "x": "1/3/2014",
            "a": "8",
            "b": "9"
        },
        "bar4": {
            "x": "2/1/2014",
            "a": "7",
            "b": "9"
        }
    },
    "barstack": {
        "bar1": {
            "x": "1/1/2014",
            "y": "9",
            "z": "6",
            "a": "8"
        },
        "bar2": {
            "x": "1/2/2014",
            "y": "5",
            "z": "7",
            "a": "3"
        },
        "bar3": {
            "x": "1/3/2014",
            "y": "8",
            "z": "9",
            "a": "6"
        },
        "bar4": {
            "x": "2/1/2014",
            "y": "7",
            "z": "9",
            "a": "8"
        }
    }
}
});

(function ($, window, undefined) {
    "use strict";
    $(document).ready(function ($) {
        $.getJSON( "/js/data.json", function( json ) {
        //console.log(Object.keys(json.line).map(function(key) {return json.line[key]}));

        if (typeof Morris != 'undefined') {

            //Bar chart
           Morris.Bar({
                element: 'barchart',
                axes: true,
                data: Object.keys(json.bar).map(function(key) {return json.bar[key]}),
                resize: true,
                xkey: 'x',
                ykeys: ['a', 'b'],
                labels: ['myCalories','myCaloriesBurned'],
                barColors: ['#558C89','#D9853B']
            });

           Morris.Bar({
                element: 'barstacked',
                data: Object.keys(json.barstack).map(function(key) {return json.barstack[key]}),
                resize: true,
                xkey: 'x',
                ykeys: ['y', 'z', 'a'],
               ...