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.

You should be able to do that quite easily with [NVD3](http://nvd3.org/ghpages/multiBar.html). — Lars Kotthoff, Jan 09 '14 at 16:34
Thanks, I have switch to HTML5. I think d3 is not good for none standard charts. It is designed to support standard visualizations and it is hard to change its predefined template. At least now I am more comfortable with pure HTML 5 — Reza Rawassizadeh, Jan 10 '14 at 20:12

score 1 · Accepted Answer · answered Oct 18 '14 at 19:59

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!

score 0 · Answer 2 · answered Jan 09 '14 at 17:05

0

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

answered Jan 09 '14 at 17:05

JamesE

3,833
9
44
82

Thanks, I have seen this example and try to understand it. It is too complicated for a beginner to learn. – Reza Rawassizadeh Jan 09 '14 at 22:05

D3 stacked bar chart with time

2 Answers2