MetricsGraphics Test 1

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.5.0/metricsgraphics.min.css">
<script src="//rawgit.com/mozilla/metrics-graphics/master/dist/metricsgraphics.min.js"></script>
<script src="//rawgit.com/ramnathv/dd4fe81d919a905b62d3/raw/8bd1702961798353f7c6700d9d59957aaea29fef/tsdata1.js"></script>
<div id="downloads"></div>
<div class="legend"></div>

CSS

body{
  font-family: "Helvetica";
  font-size: 12px;
}
.legend{
  margin-left: 50px;
}

JavaScript

var mydata =  [{'date':new Date('2014-11-01'),'value':12},
           {'date':new Date('2014-11-02'),'value':18}]

var mydata2 =  [{'date':new Date('2014-11-01'),'value':25},
           {'date':new Date('2014-11-02'),'value':19}]

MG.data_graphic({
    data: data.slice(0, 8),
    xmin: 1,
    xmax: 12,
    min_y_from_data: true,
    width: 600,
    height: 250,
    target: '#downloads',
    x_accessor: 'Season',
    y_accessor: 'xnew',
    show_tooltips: false,
    y_extended_ticks: true,
    xax_format: function(f){
      console.log(f)
      console.log(data[0][f - 1].labs)
      return(data[0][f - 1].labs)   
    },
    legend: d3.range(1949, 1960),
    animate_on_load: true,
    right: 50,
    bottom: 20,
    interpolate: 'linear'
})