D3 Examples - LineChart

xxxxxxxxxx
 
<!DOCTYPE HTML>
<html>
​
<head>
    <title>ninjaPixel.js Line Chart</title>
</head>
<style>
    .ninja-axis path,
    .ninja-axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
    text {
        font: 12px sans-serif;
        position: absolute;
    }
    .ninja-chartTitle {
        font: 18px sans-serif;
    }
    .yTitle,
    .xTitle {
        font: 16px sans-serif;
    }
​
</style>
​
<body>
    <div id="chart"></div>
    <div id="message"></div>
</body>
<script src="ninjaPixel.bundle.js" charset="utf-8"></script>
<script src="moment.js"></script>
<script>
    function randomTimeseries() {
    var lineChartData = [],
        numberOfLines = 2,
        colours = ['#A75C56', '#E89C84', '#F5C972', '#C3B274'],
        startDate = new moment('1-12-2014', "DD-MM-YYYY");
        
​
    for (var i = 0; i < numberOfLines; i++) {
        var currentValue = 0,
            name = 'Line Series ' + i,
            colour = colours[i];
        timeseries = [];
​
        var thisDate = new moment(startDate);
        for (var i2 = 0; i2 < 50; i2++) {
            timeseries.push({
                x: thisDate.toDate(),
                y: currentValue
            });
            thisDate = new moment(thisDate).add(1, 'days');
            var posNeg = -1;
            if (Math.random() > 0.5) {
                posNeg = 1;
            }
            currentValue += ~~(Math.random() * 10 * posNeg);
        }
​
        lineChartData.push({
            name: name,
            color: colour,
            data: timeseries
        });
    }
​
    return lineChartData;
}
    
    var customTimeFormat = d3.time.format.multi([
      [".%L", function(d) { return d.getMilliseconds(); }],
      [":%S", function(d) { return d.getSeconds(); }],
      ["%I:%M", function(d) { return d.getMinutes(); }],
      ["%I %p", function(d) { return d.getHours(); }],
      ["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
      ["%b %d", function(d) { return d.getDate() != 1; }],
      ["%B", function(d) { return d.getMonth(); }],
      ["%Y", function() { return true; }]
    ]);
    
    var chart = new ninjaPixel.LineChart();
    chart.transitionDuration(2000)
        .margin({
            top: 50,
            bottom: 50,
            left: 60,
            right: 30
        })
        .transitionEase('linear')
        .height(500)
        .title('Random Time-Series data')
        .itemFill(function(d){return d.color;})
        .xAxisTickFormat(customTimeFormat)
        .areaOpacity(0.1)
        .isTimeseries(true);
​
    
​
    function ready() {
        var data = randomTimeseries();
        chart.plot(d3.select("#chart")
            .datum(data));
    }
    
    ready();
    setTimeout(function run() { 
         ready();
        setTimeout(run, 5000); 
    }, 5000);
</script>
​
</html>
​
    