D3 Examples - FitBit Sleep data part

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="nv.d3.min.js"></script>
​
    <style>
        text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
        }
        html, body, #chart1, svg {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="chart1"></div>
​
<script>
var chart;
var main_data;
​
    var formatDate = d3.time.format("%H:%M:%S");
​
    d3.csv("sleep_hr_1min2016-05-18.csv", type, function(error, data){
        main_data = [
        {
            key: '20 May',
            values: [],
            color: "orange"
        }
        ];
        data.forEach(function(d){
            d.value = d.value;
            d.time = d.time;
            main_data[0].values.push({x: d.time, y:d.value});
        });
    })
​
​
    d3.csv("sleep_hr_1min2016-05-19.csv", type, function(error, data){
        data_entry = {
            key: '21 May',
            values: [],
            color: "steelblue"
        };
        data.forEach(function(d){
            d.value = d.value;
            d.time = d.time;
            data_entry.values.push({x: d.time, y:d.value});
        });
        main_data.push(data_entry);
    })
​
     d3.csv("sleep_hr_1min2016-05-20.csv", type, function(error, data){
        data_entry = {
            key: '19 May',
            values: [],
            color: "green"
        };
        data.forEach(function(d){
            d.value = d.value;
            d.time = d.time;
            data_entry.values.push({x: d.time, y:d.value});
        });
        main_data.push(data_entry);
    })
​
     d3.csv("sleep_hr_1min2016-05-21.csv", type, function(error, data){
        data_entry = {
            key: '22 May',
            values: [],
            color: "lightgreen"
        };
        data.forEach(function(d){
            d.value = d.value;
            d.time = d.time;
            data_entry.values.push({x: d.time, y:d.value});
        });
        main_data.push(data_entry);
    })
​
    d3.csv("sleep_hr_1min2016-05-22.csv", type, function(error, data){
        data_entry = {
            key: '23 May',
            values: [],
            color: "lightblue"
        };
        data.forEach(function(d){
            d.value = d.value;
            d.time = d.time;
            data_entry.values.push({x: d.time, y:d.value});
        });
        main_data.push(data_entry);
    })
​
    d3.csv("sleep_hr_1min2016-05-23.csv", type, function(error, data){
        data_entry = {
            key: '24 May',
            values: [],
            color: "skyblue"
        };
        data.forEach(function(d){
            d.value = d.value;
            d.time = d.time;
            data_entry.values.push({x: d.time, y:d.value});
        });
        main_data.push(data_entry);
    })
​
    d3.csv("sleep_hr_1min2016-05-24.csv", type, function(error, data){
        data_entry = {
            key: '18 May',
            values: [],
            color: "#2ca02c"
        };
        data.forEach(function(d){
            d.value = d.value;
            d.time = d.time;
            data_entry.values.push({x: d.time, y:d.value});
        });
        main_data.push(data_entry);
    })
​
​
    
​
        nv.addGraph(function(){
            chart = nv.models.lineChart()
            .options({
                transitionDuration: 300,
                useInteractiveGuideline: true
            });
​
            chart.xAxis
            .axisLabel("Time (h:m:s)")
            .tickFormat(function(d){
                return formatDate(new Date(d));
            })
            .staggerLabels(true)
        ;
​
        chart.yAxis
            .axisLabel('Heartrate (bpm)')
            .tickFormat(function(d) {
                return d3.format(',f')(d);
            })
        ;
    
        d3.select('#chart1').append('svg')
            .datum(main_data)
            .call(chart);
        // nv.utils.windowResize(chart.update);
        return chart;
        })
​
​
​
function type(d) {
  d.time = formatDate.parse(d.time);
  d.value = +d.value;
  return d;
}
</script>
</body>
</html>
    