CODEWITHSUNDEEP
javascriptd3.jsbar-chart
user3837019
user3837019

Reputation: 221

D3 adding interval on X axis

Trying to get intervals on the X axis. The X axis should display the 1st of every month(1st Jan, 1st Feb, etc). Also looking at how to zoom in the chart to show the days (1-31 Jan). So far i've got a brush only to work as i'm still new to creating bar charts in D3.

var brush = d3.svg.brush()
    .x(x)
    .on('brush', bListener);

var gBrush = svg.select('g.brush').call(brush);

gBrush.selectAll('rect')
        .attr('height', height - margin.top - margin.bottom)
        .style("opacity", 0.5)
        .style("fill", ""grey");

Looking to create something like this but as a bar chart in D3, http://www.highcharts.com/demo/line-time-series.

Here's https://jsfiddle.net/noobiecode/wck4ur9d/4/

Any help would be appreciated.

Upvotes: 0

Views: 475

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Partial answer:

How to display the 1st of every month(1st Jan, 1st Feb, etc):

In your xAxis instead of this:

   .ticks(d3.time.days, 1)

do this:

.ticks(d3.time.months)

working fiddle here

Regarding brushing i didn't see any examples, may be you need to write it on your own :(

Upvotes: 1

Related Questions