benpickles/.block

## .block
height: 90

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Twitter Analytics with Peity</title>
  <style>
    body {
      margin: 10px;
    }

    .example-twitter-analytics + svg {
      border: 1px solid #eee;
      padding: 5px;
    }
  </style>
</head>
<body>

<span class="example-twitter-analytics" data-baseline="43">
  43,40,55,28,50,78,123,59,39,59,50,55,42,51,59,53,37,55,53,62,48,59,51,57,55,43,76,69
</span>

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://benpickles.github.io/peity/jquery.peity.min.js"></script>

<script>

$('.example-twitter-analytics').peity('line', {
  fill: null,
  stroke: '#ccd6dd',
  strokeWidth: 2,
  height: 60,
  width: 240,
  after: function() {
    // The `after` hook is called on every draw. `this` refers to the Peity
    // chart object. The chart's original element can be referenced wth `$el`
    // which is a jQuery selection.
    var baseline = this.$el.data('baseline')

    // `values` returns the element's values as an array of numbers.
    var values = this.values()

    // `svgElement` is available for your convenience and returns a jQuery
    // selection.
    var line = this.svgElement('line', {
      stroke: '#ccd6dd',
      x1: this.x(0),
      y1: this.y(baseline),
      x2: this.x(values.length - 1),
      y2: this.y(baseline),
    })

    // Create the circle end point.
    var circle = this.svgElement('circle', {
      cx: this.x(values.length - 1),
      cy: this.y(values[values.length - 1]),
      fill: '#a6d388',
      r: 3,
    })

    // Here the Peity-generated chart is being decorated by attaching the newly
    // created elements. `$svg` refers to the `<svg>` element and is a jQuery
    // selection.
    this.$svg
      .prepend(line)
      .append(circle)
  }
})

</script>

</body>
</html>

## thumb.png

      
    Raw
  

              thumb.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Twitter Analytics with Peity</title>
	<style>
	body {
	margin: 10px;
	}

	.example-twitter-analytics + svg {
	border: 1px solid #eee;
	padding: 5px;
	}
	</style>
	</head>
	<body>

	<span class="example-twitter-analytics" data-baseline="43">
	43,40,55,28,50,78,123,59,39,59,50,55,42,51,59,53,37,55,53,62,48,59,51,57,55,43,76,69
	</span>

	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script src="https://benpickles.github.io/peity/jquery.peity.min.js"></script>

	<script>

	$('.example-twitter-analytics').peity('line', {
	fill: null,
	stroke: '#ccd6dd',
	strokeWidth: 2,
	height: 60,
	width: 240,
	after: function() {
	// The `after` hook is called on every draw. `this` refers to the Peity
	// chart object. The chart's original element can be referenced wth `$el`
	// which is a jQuery selection.
	var baseline = this.$el.data('baseline')

	// `values` returns the element's values as an array of numbers.
	var values = this.values()

	// `svgElement` is available for your convenience and returns a jQuery
	// selection.
	var line = this.svgElement('line', {
	stroke: '#ccd6dd',
	x1: this.x(0),
	y1: this.y(baseline),
	x2: this.x(values.length - 1),
	y2: this.y(baseline),
	})

	// Create the circle end point.
	var circle = this.svgElement('circle', {
	cx: this.x(values.length - 1),
	cy: this.y(values[values.length - 1]),
	fill: '#a6d388',
	r: 3,
	})

	// Here the Peity-generated chart is being decorated by attaching the newly
	// created elements. `$svg` refers to the `<svg>` element and is a jQuery
	// selection.
	this.$svg
	.prepend(line)
	.append(circle)
	}
	})

	</script>

	</body>
	</html>