JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<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="area-example" style="height: 250px;"></div>

JavaScript

Morris.Area({
  element: 'area-example',
  data: [
    { timestamp: '2015-02-01 09:09', systolic: 101,  diastolic: 74 },
    { timestamp: '2015-02-03 10:02', systolic: 105,   diastolic: 88 },    
    { timestamp: '2015-02-05 14:35', systolic: 115,  diastolic: 61 },
    { timestamp: '2015-02-06 07:23', systolic: 103,  diastolic: 73 },
    { timestamp: '2015-02-07 09:44', systolic: 94,  diastolic: 50 },
    { timestamp: '2015-02-09 10:31', systolic: 97,  diastolic: 81 },
    { timestamp: '2015-02-11 10:07', systolic: 121,  diastolic: 83 }
  ],
  xkey: 'timestamp',
  ykeys: ['systolic', 'diastolic'],
  ymax: 130,
  ymin: 40,
  labels: ['Systolic', 'Diastolic'],
  xLabels: "day",
  behaveLikeLine: true,
    hideHover: true
});