Material Idle 0.1

by Margus Martsepp

HTML

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="bronze" class="mineral">
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Bronze</button>
  <div class="mdl-progress mdl-js-progress"></div>
</div>

<div id="mineral2" class="mineral material-icons mdl-badge mdl-badge--overlap mdl-badge--no-background">
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Silver</button>
</div>
<div id="mineral3" class="mineral material-icons mdl-badge mdl-badge--overlap mdl-badge--no-background">
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Gold</button>
</div>

<span class="mdl-chip mdl-chip--contact ">
    <span class="mdl-chip__contact mdl-color--pink mdl-color-text--white">99</span>
    <span class="mdl-chip__text">Contact Chip</span>
</span>

<div id="counter">
  <div class="mdl-progress mdl-js-progress"></div>
  <div class="mdl-progress mdl-js-progress"></div>
  <div class="mdl-progress mdl-js-progress"></div>
  <div class="mdl-progress mdl-js-progress"></div>
  <div class="mdl-progress mdl-js-progress"></div>
  <div class="mdl-progress mdl-js-progress"></div>
  <div class="mdl-progress mdl-js-progress"></div>
  <div class="mdl-progress mdl-js-progress"></div>
  <div class="mdl-progress mdl-js-progress"></div>
  <div class="mdl-progress mdl-js-progress"></div>
</div>
<div style="background-color:gray;height:100px;width:300px;padding:100px;">
<div style="background-color:rgba(0, 0, 0, 0.5); padding:6px;   border-radius: 25px; width:132px;">
<div style="background-color:rgba(0, 0, 0, 0.5); padding:6px;   border-radius: 25px; width:120px;  background: #cd7f32">
   <div>
      Text added.
   </div>
</div>
</div>
</div>

CSS

body {
  padding: 20px;
  background: #fafafa;
  position: relative;
}

.mineral button {
  width: 120px;
}
.mineral div {
  width: 120px;
  background: #cd7f32
}

JavaScript

google.charts.load('current', {'packages':['scatter']});
  google.charts.setOnLoadCallback(drawChart);
  var contador = 0;
  function fill(chart,options){
        var json_prepared = new Array();        
      $.ajax({
        url: 'http://localhost/data.php',
        type: 'POST',
        async: false,
        dataType: 'json'
    })
    .done(function(res) {
        // console.log(res);
        console.log("success");
        for (var i = res.length - 1; i >= 0; i--) {
            var ano = res[i][0];
            var mes = res[i][1];
            var dia = res[i][2];
            var hora = res[i][3];
            var fecha = new Date(ano,mes,dia);
            var elemento  = new Array(fecha,hora);
            json_prepared.push(elemento);
        }
    })
     .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Alertas');
    data.addColumn('number', 'Alertas');
    console.log(json_prepared);
         data.addRows(json_prepared);
        chart.draw(data, google.charts.Scatter.convertOptions(options));
        console.log('actualizado');
  }
  function drawChart () {
    contador++;
    $.ajax({
        url: 'http://localhost/data.php',
        type: 'POST',
        dataType: 'json',
    })
    .done(function(res) {
        var json_prepared = new Array();        
        console.log("success");
        for (var i = res.length - 1; i >= 0; i--) {
            var ano = res[i][0];
            var mes = res[i][1];
            var dia = res[i][2];
            var hora = res[i][3];
            var fecha = new Date(ano,mes,dia);
            var elemento  = new Array(fecha,hora);
            json_prepared.push(elemento);
        }
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Datas');
        console.log(json_prepared);
        ...