<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }

    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/mc/js/lib/meteorcharts-v0.0.6.min.js"></script>
    <script defer="defer">
      var secondsInYear = 60 * 60 * 24 * 365;
   
      // model configuration (data)
      var model = {
        title: 'Example Chart',
        series: [{
          title: 'Line 1',
          points: [
            {x: secondsInYear * 0, y: 7.0},
            {x: secondsInYear * 1, y: 6.9},
            {x: secondsInYear * 2, y: 9.5},
            {x: secondsInYear * 3, y: 14.5},
            {x: secondsInYear * 4, y: 18.2},
            {x: secondsInYear * 5, y: 21.5},
            {x: secondsInYear * 6, y: 25.2},
            {x: secondsInYear * 7, y: 26.5},
            {x: secondsInYear * 8, y: 23.3},
            {x: secondsInYear * 9, y: 18.3},
            {x: secondsInYear * 10, y: 13.9},
            {x: secondsInYear * 11, y: 9.6}
          ]
        },
        {
          title: 'Line 2',
          points: [
            {x: secondsInYear * 0, y: -0.2},
            {x: secondsInYear * 1, y: 0.8},
            {x: secondsInYear * 2, y: 5.7},
            {x: secondsInYear * 3, y: 11.3},
            {x: secondsInYear * 4, y: 17.0},
            {x: secondsInYear * 5, y: 22.0},
            {x: secondsInYear * 6, y: 24.8},
            {x: secondsInYear * 7, y: 24.1},
            {x: secondsInYear * 8, y: 20.1},
            {x: secondsInYear * 9, y: 14.1},
            {x: secondsInYear * 10, y: 8.6},
            {x: secondsInYear * 11, y: 2.5}
          ]
        }]
      };
   
      // view configuration (styling)
      var view = {
        width: 580,
        height: 300,
        backgroundColor: 'white',
        padding: 10,
        text: {
          fill: '#444'
        },
        series: [
          {
            stroke: '#087003',
            strokeWidth: 4,
         
            // dashed line
            dashArray: [10, 10]            
          },
          {
            stroke: 'blue',
            strokeWidth: 4,
          }
        ]
      };

      // line charts are instantiated with a container DOM element,
      // a model, and a view
      var lineChart = new MeteorCharts.Line({
        container: 'container',
        model: model,
        view: view
      });
    </script>
  </body>
</html>