The chart is generated from an JS object (skills) & animates on load
- edit: Add New skill
Last active
October 8, 2015 05:34
-
-
Save anita-owens/38f1aabf4ffdd396ed47 to your computer and use it in GitHub Desktop.
bar Chart
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
| $(function() { | |
| //list of skills | |
| var skills = { | |
| "SQL":{work:50,personal:10}, | |
| "PHP":{work:70,personal:20}, | |
| "JavaScript":{work:20,personal:10}, | |
| "JQuery" :{work:45,personal:35}, | |
| "Wordpress":{personal:30}, | |
| "Tea Making":{work:1,personal:90}, | |
| }; | |
| displayData(skills); | |
| animate(); | |
| //add new skill | |
| $('input:button').click(function(){ | |
| var name = $('#txtSkill').val(), | |
| perc = $('#txtPerc').val(); | |
| if(name && perc){ | |
| skills[name] = {work:perc}; | |
| displayData(skills); | |
| animate(); | |
| var newheight = $('.chart').outerHeight() + 50; | |
| $('.chart').css('height',newheight); | |
| }else{ | |
| animate(); | |
| } | |
| $('input:text').val(''); | |
| }); | |
| }); | |
| //Functions | |
| //display data | |
| function displayData(skills){ | |
| $('.bars').html(''); | |
| $('.skills').html(''); | |
| for (var key in skills){ | |
| var personal = skills[key].personal, | |
| work = skills[key].work; | |
| $('.skills').append("<li><span>"+key+"</span></li>"); | |
| $('.bars').append("<li><div data-percentage='"+skills[key].personal+"' class='bar'>"+personal+"</div><div data-percentage='"+skills[key].work+"' class='bar'>"+work+"</div></li>"); | |
| }; | |
| } | |
| //animate the data | |
| function animate(){ | |
| $('.bar').css('width','0px'); | |
| $(".bars .bar").delay(1000).each(function(i){ | |
| var percentage = $(this).data('percentage'); | |
| $(this).delay(i+"00").animate({'width': percentage + '%'}, 700); | |
| }); | |
| } |
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
| @import url(http://fonts.googleapis.com/css?family=Roboto:400+700); | |
| body { | |
| background: #f9f9f9; | |
| font-family: Roboto; | |
| } | |
| h1{ | |
| text-align:center; | |
| color:#393939; | |
| font-size:3em; | |
| font-weight:100; | |
| margin:0px; | |
| } | |
| .chart { | |
| font-family: Roboto; | |
| border-radius:5px; | |
| position:relative; | |
| min-height: 400px; | |
| margin: 150px auto; | |
| display: block; | |
| border:1px solid #ccc; | |
| border-bottom:2px solid #8B96A3; | |
| background: rgba(255, 255, 255, 9); | |
| box-shadow: 0 0px 2px 0px #ccc; | |
| } | |
| .chart .skills { | |
| position:absolute; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .chart .skills li{ | |
| text-align:right; | |
| font-size:18px; | |
| margin:5px 0px; | |
| color:#333; | |
| } | |
| .chart li{ | |
| list-style: none; | |
| flex: 1; | |
| position:relative; | |
| padding:10px 0px; | |
| } | |
| .chart .bars { | |
| display: flex; | |
| flex-direction: column; | |
| position:absolute; | |
| padding: 0; | |
| margin: 0; | |
| height:100%; | |
| } | |
| .chart .bars .bar{ | |
| width:0px; | |
| background:#47EAD4; | |
| padding:10px 0px; | |
| float:left; | |
| color:#333; | |
| overflow:hidden; | |
| text-align:center; | |
| } | |
| .chart .bars .bar:nth-child(odd),#personal { | |
| background:#223138; | |
| color:#fff; | |
| } | |
| .chart .bars .bar:nth-child(odd):hover{ | |
| background:#0F1E26; | |
| } | |
| .chart .bars .bar:nth-child(even):hover{ | |
| background:#40CFBC; | |
| } | |
| #profession{ | |
| background:#47EAD4; | |
| color:#333; | |
| } | |
| #profession,#personal{ | |
| padding:10px; | |
| display:inline-block; | |
| text-align:center; | |
| } | |
| .header{ | |
| position:fixed; | |
| left:0px; | |
| top:0px; | |
| width:100%; | |
| background:#f9f9f9; | |
| border-bottom:1px solid #DEDEDE; | |
| box-shadow: 0 0px 6px 0px #858585; | |
| } | |
| .footer{ | |
| position:absolute; | |
| bottom:-7%; | |
| right:0px; | |
| color:#333; | |
| } | |
| @media only screen and (max-width: 800px) { | |
| .chart{ | |
| width:100%; | |
| } | |
| .skills{ | |
| width:20%; | |
| } | |
| .bars{ | |
| width: 75%; | |
| left:25%; | |
| } | |
| } | |
| @media only screen and (min-width: 800px) { | |
| .chart{ | |
| width:90%; | |
| } | |
| .skills{ | |
| width: 13%; | |
| } | |
| .bars{ | |
| width: 85%; | |
| left:15%; | |
| } | |
| } | |
| @media only screen and (min-width: 1300px) { | |
| .chart{ | |
| width:70%; | |
| max-width:1000px; | |
| } | |
| .skills{ | |
| width: 13%; | |
| } | |
| .bars{ | |
| width:85%; | |
| left:15%; | |
| } | |
| } | |
| @media only screen and (max-width: 500px) { | |
| .chart{ | |
| width:100%; | |
| } | |
| .skills{ | |
| width:30%; | |
| } | |
| .bars{ | |
| width: 65%; | |
| left:35%; | |
| } | |
| } | |
| p{ | |
| width:90%; | |
| margin:0px auto; | |
| text-align:center; | |
| } | |
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"> | |
| <title>Introduction</title> | |
| <link href="bar_style.css" rel="stylesheet" type="text/css"> | |
| <script type="text/javascript" src="bar_script.js"></script> | |
| </head> | |
| <body> | |
| <div class="chart"> | |
| <div class="skills"></div> | |
| <div class="bars"></div> | |
| <div class='footer'> | |
| Confidence in Skill (%) | |
| </div> | |
| </div> | |
| <p> | |
| <input type = 'text' id='txtSkill' placeholder = 'New Skill'/> | |
| <input type = 'text' id='txtPerc' placeholder = 'New Percentage'/> | |
| <input type = 'button' value='Add'/> | |
| </p> | |
| <div class='header'> | |
| <div id='personal'>Personal</div> | |
| <div id='profession'>Profession</div> | |
| <h1>Skills Chart</h1> | |
| </div> | |
| </body> | |
| </html> |
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
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment