Peity Example

Reference: http://www.webresourcesdepot.com/tiny-charts-sparklines-with-jquery-peity/

by João Vicente Machado

HTML

<script src="http://benpickles.github.com/peity/jquery.peity.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<hr/>
<div class="row">
  <div class="containerBlock col-md-12 col-sm-12 col-lg-12">
    <div class="col-md-6 col-sm-6 col-lg-6">
      <span class="line" data-peity='{ "height" : 30, "width" : 400 }' >0,1,1,1,1,0</span>
    </div>
    <br>
    <div class="col-md-6 col-sm-6 col-lg-6">
      <span class="line" data-peity='{ "height" : 50, "width" : 300 }' >0,50,50,50,0</span>
    </div>
    <br>
    <div class="col-md-6 col-sm-6 col-lg-6">
      <span class="line" data-peity='{ "height" : 20, "width" : 200, "fill": "lightgrey", "stroke": "black" }' >0,50,50,50,0</span>
    </div>
    <br>
    <div class="col-md-6 col-sm-6 col-lg-6">
      <span id="updatingChart" class="line" data-peity='{ "height" : 30, "width" : 200, "fill": "lightgreen", "stroke": "green" }' >0,50,50,50,0</span>
    </div>
  </div>
</div>
<hr/>

JavaScript

$(".line").peity("line");

var updatingChart = $("#updatingChart").peity("line", { width: 200 });

setInterval(function() {
  var random = Math.round(Math.random() * 10)
  var values = updatingChart.text().split(",")
  values.shift()
  values.push(random)

  updatingChart
    .text(values.join(","))
    .change()
}, 10000)