Created
June 23, 2016 17:44
-
-
Save dsomel21/deaa313c06b5d336b2bb077422847dcd to your computer and use it in GitHub Desktop.
This file contains hidden or 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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div id="ex-step-pies"></div> | |
| <div id="ex-weight-pies"></div> | |
| <div id="ex-run-pies"></div> | |
| <div id="exercise-bar"></div> | |
| <div id="macro"></div> | |
| <script> | |
| 'use strict'; | |
| /* Get Users Steps Taken & Step Goals */ | |
| var steps = 5120; | |
| var steps_goals = 10000 - steps; | |
| var step_counter_data = [steps, steps_goals]; | |
| /* Get weight & weight goal */ | |
| var weight = 160; | |
| var weight_goals = 170 - weight; | |
| var weight_data = [weight, weight_goals]; | |
| /* Get running info & distance goal */ | |
| var run = 1.2; | |
| var run_goals = 5 - run; | |
| var run_data = [weight, weight_goals]; | |
| var bike = 2.7; | |
| var swim = 0.4; | |
| var workout = [bike, swim, run]; | |
| var fat = 71; | |
| var prot = 59; | |
| var carbs = 120; | |
| var macro_nut = [fat, prot, carbs]; | |
| var step_pie_data = [ | |
| { | |
| values: step_counter_data, | |
| labels: ['Steps', 'Remaining'], | |
| hole: .95, | |
| type: 'pie', | |
| hoverinfo: 'value', | |
| textinfo: 'label' | |
| }]; | |
| var weight_pie_data = [ | |
| { | |
| values: weight_data, | |
| labels: ['Weight', 'Goal'], | |
| hole: .95, | |
| type: 'pie', | |
| hoverinfo: 'value', | |
| textinfo: 'label' | |
| }]; | |
| var run_pie_data = [ | |
| { | |
| values: run_data, | |
| labels: ['Distance Run', 'Remaining'], | |
| hole: .95, | |
| type: 'pie', | |
| hoverinfo: 'value', | |
| textinfo: 'label' | |
| }]; | |
| var exercise_bar_data = [ | |
| { | |
| x: workout, | |
| y: ['Biking', 'Swim', 'Run'], | |
| orientation: 'h', | |
| type: 'bar', | |
| marker: { | |
| color: '#1abc9c', | |
| width: 1 | |
| }, | |
| }]; | |
| var macro_data = [ | |
| { | |
| values: macro_nut, | |
| labels: ['Protein', 'Fat', 'Carbs'], | |
| hole: .95, | |
| type: 'pie', | |
| hoverinfo: 'value', | |
| textinfo: 'label' | |
| }]; | |
| var layout = { | |
| height: 600, | |
| width: 750 | |
| }; | |
| Plotly.newPlot('ex-step-pies', step_pie_data, layout); | |
| Plotly.newPlot('ex-weight-pies', weight_pie_data, layout); | |
| Plotly.newPlot('ex-run-pies', run_pie_data, layout); | |
| Plotly.newPlot('macro', macro_data, layout); | |
| Plotly.newPlot('exercise-bar', exercise_bar_data, layout); | |
| // var bar_layout = { | |
| // height: 300, | |
| // width: 325, | |
| // // barmode: 'stack' | |
| // }; | |
| // Plotly.newPlot('exercise-bar', [bar_data], bar_layout); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment