Old school D3 from simpler times

All examples By author By category About

ocarneiro

Full window Github gist

[morris] line chart using morris js

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
<div id="myfirstchart" style="height: 250px;"></div>
<script>
  var quantidades = [1, 30, 45, 67, 98];
  var rotulos = [6, 7, 8, 9, 10];
  //var rotulos = ['2016-08-16T06:00:00', '2016-08-16T07:00:00','2016-08-16T08:00:00','2016-08-16T09:00:00','2016-08-16T10:00:00'];

var toDate = function(hora) {
    var dataAtual = new Date().toString();
    //console.log(dataAtual);
    var ndata = (new Date('2016-08-16')).getTime();
    ndata = ndata + hora * 3600 * 1000;
    dataAtual = dataAtual.substring(0,11);
    return ndata;
  }
  
  console.log(new Date(toDate(6))); 
  
  var morrisData = {};
  
  morrisData[Symbol.iterator] = function* () {
    for (var i = 0; i < quantidades.length; i++) {
      yield {hora: toDate(rotulos[i]), qtde: quantidades[i]}
    }
  }
  
  new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [...morrisData],
  // The name of the data record attribute that contains x-values.
  xkey: 'hora',
  xLabels: 'hour',
  xLabelsFormat: function(x) { return x.toString() + 'h'},
  // A list of names of data record attributes that contain y-values.
  ykeys: ['qtde'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['quantidade']
});
  
  //console.log(new Date());
</script>
</body>

https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js

https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js