Chart Diagramm 1

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

@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:95%;
    max-width:960px;
 } 
  .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;
}
</style>

markieren & kopieren

Widget > Quelltext

Diesen Code per Widget > Quelltext einfügen und anpassen.

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(500).each(function(i){
    var percentage = $(this).data('percentage');
    
    $(this).delay(i+"00").animate({'width': percentage + '%'}, 700);
   
  });
}
</script>

markieren & kopieren

Chart Diagramm 1

CSS-Code

Widget > Quelltext

NEUE BEITRÄGE