Last active
November 20, 2016 16:57
-
-
Save benpickles/68ba20643549a51b2515 to your computer and use it in GitHub Desktop.
Twitter Analytics-style line chart with Peity
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| height: 90 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment