Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
  <link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
  <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
  <meta charset="utf-8">
  <title>Chartist.js - Aspect ratio containers</title>
</head>
<body>
  <div class="ct-chart ct-golden-section"></div>
</body>
</html>
 
html {
  font-family: Oxigen, Helvetica, Arial;
}
​
.ct-chart .ct-series.ct-series-a .ct-point {
  stroke: #00A0B0;
  stroke-width: 10px;
  stroke-linecap: round;
  animation: width-pulse 2s infinite;
}
​
.ct-chart .ct-series.ct-series-b .ct-point {
  stroke: #CC333F;
  stroke-width: 8px;
  stroke-dasharray: 5px 2px;
}
​
.ct-chart .ct-series.ct-series-c .ct-point {
  stroke: #EB6841;
  stroke-width: 15px;
  stroke-linecap: square;
}
​
.ct-chart .ct-series.ct-series-d .ct-point {
  stroke: #EDC951;
  stroke-width: 15px;
}
 
function times(n) {
  return Array.apply(null, new Array(n));
}
​
function seq(e, i) {
  return i + 1;
}
​
function random() {
  return Math.ceil(Math.random() * 100);
}
​
var seriesCount = 30;
​
var chart = new Chartist.Line('.ct-chart', {
  labels: times(seriesCount).map(seq),
  series: [
    times(seriesCount).map(random),
    times(seriesCount).map(random),
    times(seriesCount).map(random),
    times(seriesCount).map(random)
  ]
}, {
  showLine: false,
  axisX: {
    showLabel: false,
    offset: 0
  },
  axisY: {
    showLabel: false,
    offset: 0
  }
});
​
var seq = 0;
​
chart.on('created', function() {
  seq = 0;
});
​
chart.on('draw', function(data) {
  if(data.type === 'point') {
    seq++;
    
    data.element.animate({
      x1: {
        from: data.x - 50,
        to: data.x,
        begin: seq * 50,
        dur: 800,
        easing: Chartist.Svg.Easing.easeOutQuint
      },
      opacity: {
        from: 0,
        to: 1,
        begin: seq * 50,
        dur: 300,
      }
    });
  }
});
​
setInterval(function() {
  chart.update();
}, 10000);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
gionkunzpro
0viewers