<a class="button small" onclick="$('#pieChartDemo').pieChart('series', '[150,110,57,30,25,41,60,58]').pieChart('update');">Update</a>
<a class="button small" onclick="$('#pieChartDemo').pieChart('series', '[113,100,50,28,27,44,68,52]').pieChart('render');">Reset</a>
<div class="small-12 columns">
  <div id="pieChartDemo" class="chart pie" data-options="series:[113,100,50,28,27,44,68,52];"></div>
</div>

<div class="small-12 columns">
  <a class="button small" onclick="$('#barChartDemo').barChart('series', '[110,180,57,120,25,71,30,88]').barChart('update');">Update</a>
  <a class="button small" onclick="$('#barChartDemo').barChart('series', '[113,100,50,28,27,44,68,52]').barChart('render');">Reset</a>
  <div id="barChartDemo" class="chart bars" data-options="series:[113,100,50,28,27,44,68,52];gridSteps:4;max:200;"></div>
</div>

<div class="small-12 columns">
  <a class="button small" onclick="$('#lineChartDemo').lineChart('series', '[[153,100,177,70,30,64,125,50],[113,100,50,28,27,44,68,52],[35,12,86,64,35,73,33,261]]').lineChart('update');">Update</a>
  <a class="button small" onclick="$('#lineChartDemo').lineChart('series', '[[113,100,50,28,27,44,68,52],[53,234,77,23,75,34,75,23],[22,134,45,43,62,72,15,53]]').lineChart('render');">Reset</a>
  <a class="button small" onclick="toggleStreamTest(this);">Stream</a>
  <script>
    var streamTestTimer;
    function toggleStreamTest(el){
      if(!$(el).hasClass('active')){
        $(el).addClass('active');
        streamTestTimer = setInterval(function(){
          var min = 30;
          var max = 270;
          var data = [
            Math.floor(Math.random() * (max - min + 1)) + min,
            Math.floor(Math.random() * (max - min + 1)) + min,
            Math.floor(Math.random() * (max - min + 1)) + min
          ];
          $('#lineChartDemo').lineChart('stream', data, '1s');
        }, 1000);
      } else {
        $(el).removeClass('active');
        clearInterval(streamTestTimer);
      }
    }
  </script>
  <div id="lineChartDemo" class="chart line" data-options="series:[[113,100,50,28,27,44,68,52],[53,234,77,23,75,34,75,23],[22,134,45,43,62,72,15,53]];max:300;gridXSteps:4;smooth:true;"></div>
</div>

<div class="small-12 columns">
  <div id="peopleChartDemo" class="chart people" data-options='series:[40, 8];type:baby;rows:3;'></div>
</div>

<div class="small-6 columns">
  <ul class="legend">
    <li class="label">67%</li>
    <li class="label">67%</li>
    <li class="label">67%</li>
    <li class="label">67%</li>
    <li class="label">67%</li>
  </ul>
</div>

<div class="small-6 columns">
  <ul class="legend">
    <li><span class="label">67%</span> <span class="label-text">Something</span></li>
    <li><span class="label">67%</span> <span class="label-text">Something</span></li>
    <li><span class="label">67%</span> <span class="label-text">Something</span></li>
    <li><span class="label">67%</span> <span class="label-text">Something</span></li>
    <li><span class="label">67%</span> <span class="label-text">Something</span></li>
  </ul>
</div>

<a class="button small ui" style="padding-left:53px;"><div id="sparkLineDemo" class="chart line sparkline" data-options="series:[[22,134,45,95,120,82,113,100,50,28]];max:150;"></div> Share</a>

 <div class="row">
   <div class="small-12 large-6 columns">
     <div class="panel burgundy z-shadow-1">
       <div id="cardLineChartDemo" class="chart line" data-options="series:[[153,100,177,90,120,164,125,80],[53,234,77,23,75,34,75,23]];pattern:[0,'circles'];max:300;smooth:true;"></div>
       <div class="divider dark"><h6>Dette er saken</h6></div>
       <div class="copy">
         <p>I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.</p>
       </div>
     </div>
   </div>
 </div>
 <script>
   document.querySelector('#cardLineChartDemo').addEventListener('rendered', function(){
       var lines = db.libs.chart.lines({ size: 10, width: 2, color: 'rgba(245,218,120,1)', background: 'rgba(245,218,120,0.5)' });
       var circles = db.libs.chart.circles({ size: 10, radius: 2, color: 'rgba(255, 255, 255, 1)', background: 'rgba(255, 255, 255, 0.5)' });
       var paths = document.querySelectorAll('#cardLineChartDemo .line path');
       db.libs.chart.pattern(paths[0], lines);
       db.libs.chart.pattern(paths[1], circles);
   });
 </script>

 <div class="row">
   <div class="small-12 large-6 columns">
     <div class="panel blue z-shadow-1">
       <div id="cardBarChartDemo" class="chart bars" data-options="series:[153,100,177,70,30,64,125,50];max:200;gutter:1;callback:barChartPattern;"></div>
       <div class="divider dark"><h6>Dette er saken</h6></div>
       <div class="copy">
         <p>I 2009 ble det offentlig kjent at Landsrådet for Norges Barne og Ungdomsorganisasjoner (LNU) åpnet kontrollsak mot SOS Rasisme i 2009 etter mistanker om medlemsjuks. Siden den gang har LNU avslått alle søknader.</p>
       </div>
     </div>
   </div>
 </div>
 <script>
   function barChartPattern(){
       var lines = db.libs.chart.lines({ size: 5, width: 1, color: 'rgb(35,172,204)', background: 'rgb(245, 218, 120)' });
       var bars = document.querySelectorAll('#cardBarChartDemo .bar');
       for (i = 0; i < bars.length; ++i) {
           db.libs.chart.pattern(bars[i], lines);
       }
   }
 </script>