D3 stacked bar chart with time

Question

I have problem working with d3 and date time. Is there an example that shows stacked bar chart with time dimension ? I would like to visualize users' activities such as riding on a bus, walking, etc. as a bar chart. The existing ones are based on numbers and really complicated to understand. I found this one https://gist.github.com/anotherjavadude/2940908 which seems better, but still not clear for me.

Answer 1

I found Stacked bar-charts on time scale using D3 which seems to fit your needs.

Anyways, I'd rather go with Highcharts and use its stacked bar charts as time series.

On the JSfiddle below you can see exactly how I did it:

http://jsfiddle.net/fwuensche/y1w9nnod/3/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'My energy consumption'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 
                         'Jun', 'Jul', 'Aug', 'Sep', 'Oct']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Consumption [KWh]'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },

        // series data goes here

    });
});

Hope it helps!

Answer 2

Here is a bar chart example based on date: http://bl.ocks.org/mbostock/1134768