JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dimplejs.org/dist/dimple.v1.1.2.min.js"></script>
<div id="chartContainer"></div>

JavaScript

var svg = dimple.newSvg("#chartContainer", 600, 400),
    data = [
        { date : '2013-12-08 12:12', fruit : 'apples', count : 2 },
        { date : '2013-12-08 12:12', fruit : 'oranges', count : 5 },
        { date : '2013-12-09 16:37', fruit : 'apples', count : 1 },
        { date : '2013-12-10 11:05', fruit : 'apples', count : 6 },
        { date : '2013-12-10 11:05', fruit : 'oranges', count : 2 },
        { date : '2013-12-10 20:21', fruit : 'oranges', count : 1 }
    ],
    lastDate = {},
    filledData = [],
    dayLength = 86400000,
    formatter = d3.time.format("%Y-%m-%d %H:%M");

data.sort(
    function(a, b) { 
        return formatter.parse(a.date) - formatter.parse(b.date); 
    });

data.forEach(function (d) {
    var noon = formatter.parse(d.date).setHours(12, 0, 0, 0);
    if (lastDate[d.fruit] === undefined) {
        lastDate[d.fruit] = formatter.parse(data[0].date).setHours(12, 0, 0, 0);
    }
    for (var i = 1; i <= (noon - lastDate[d.fruit]) / dayLength - 1; i++) {
        filledData.push({ date : formatter(new Date(lastDate[d.fruit] + (i * dayLength))), fruit : d.fruit, count : 0 });
    }
    lastDate[d.fruit] = noon;
    filledData.push(d);
}, this);

var chart = new dimple.chart(svg, filledData),
    x = chart.addTimeAxis("x", "date", "%Y-%m-%d %H:%M", "%Y-%m-%d"),
    y = chart.addMeasureAxis("y", "count"),
    s = chart.addSeries("fruit", dimple.plot.line);

s.lineMarkers = true;
chart.draw();