CODEWITHSUNDEEP
d3.jsdc.js
sss
sss

Reputation: 291

Make sure (0,0) is in the line chart

When there is only one point in the line chart I only see the x-axis and y-axis.

But I want to see a line from (0,0) to this point.

I have

charts.push(
  dc.lineChart(compositeBrushchart).dimension(dim) 
    .colors(config.charts[x].color)
    .group((add_origin(grp)),config.charts[x].group) 
    .interpolate(config.interpolate) 
    .renderDataPoints(config.renderdatapoints) 
    .renderArea(config.renderarea) 
    .renderDataPoints({radius: config.charts[x].symbolsize})     
    .dashStyle(config.charts[x].dash.split(","))

Upvotes: 0

Views: 117

Answers (1)

Gordon
Gordon

Reputation: 20120

You can use a fake group to preprocess your data, to add or remove points that come from the crossfilter group.

Each time a chart draws, it will call group.all() to get its data. If you wrap your group in another object, you can modify the data.

In your case, you want to make sure that the point (0,0) is always at the beginning of your data.

Here is a simple implementation, assuming that (0,0) is not already in your data:

function add_origin(group) {
  return {
    all: function() {
      return [{key: 0, value: 0}].concat(group.all());
    }
  };
}

You can wrap your original group as you pass it into your chart:

lineChart
  .group(add_origin(group))

It might get more complicated if your data has any 0 or negative keys in it, but from your comments it sounds like your data is otherwise positive.

line from origin Example fiddle

Upvotes: 1

Related Questions