charts.txt

Date: August 10, 2015

# Charts

I recently found out about [Morris.js](http://morrisjs.github.io/morris.js/#getting-started). It makes embedding interactive charts inside blog posts straightforward. View [the source](http://pastebin.com/raw.php?i=U8wRmV3a) for this post.

<div id="myfirstchart" style="height: 250px;width:105%;margin-left:-2.5%"></div>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<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="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<style>.morris-hover{z-index: 10;}</style>
<script>
new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records — each entry in this array corresponds to a point on
  // the chart.
  data: [
    { year: '2008', value: 1 },
    { year: '2009', value: 36 },
    { year: '2010', value: 24 },
    { year: '2011', value: 64 },
    { year: '2012', value: 48 },
    { year: '2013', value: 36 },
    { year: '2014', value: 58 },
    { year: '2015', value: 90 }
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'year',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['value'],
  // Labels for the ykeys — will be displayed when you hover over the
  // chart.
  labels: ['Value']
});
</script>