Line Charts — dc-charts

Methods
curve
dashStyle
defined
dotRadius
interpolate
renderArea
renderDataPoints
tension
xyTipsOn

Type
d3.curve
Array.
function
Number
d3.curve
Boolean
Object
Number
Boolean

Default
d3.curveLinear
[]
-
5
d3.curveLinear
false
{fillOpacity: 0.8, strokeOpacity: 0.0, radius: 2}
0
false

Method Descriptions
Render area under the line.
Gets or sets the tension to use for lines drawn, in the range 0 to 1.
Turn on/off mouseover behavior of an individual data point which renders a circle and x/y axis dashed lines back to each respective axis(gnored if the chart brush is on)


barChart01
    .dimension(genderDimension)
    .group(genderGroup)
    .width($(barChart01.anchor()).parent().width())
    .height(300)
    .x(d3.scaleBand())
    .xUnits(dc.units.ordinal);


lineChart01
    .dimension(ageDimension)
    .group(ageGroup)
    .width($(lineChart01.anchor()).parent().width())
    .height(300)
    .x(d3.scaleLinear().domain([15, 70]))
    .brushOn(true)
    .yAxisLabel("Count")
    .xAxisLabel("Age");


var min = ageDimension.bottom(1)[0].age;
var max = ageDimension.top(1)[0].age;

lineChart02
    .dimension(ageDimension)
    .group(ageGroup)
    .width($(lineChart02.anchor()).parent().width())
    .height(300)
    .x(d3.scaleLinear().domain([min, max]))
    .brushOn(false)
    .yAxisLabel("Count")
    .xAxisLabel("Age")
    .dashStyle([12, 4, 4, 4])
    .renderHorizontalGridLines(true)
    .renderVerticalGridLines(true)
    .elasticY(true);


barChart02
    .dimension(genderDimension)
    .group(genderGroup)
    .width($(barChart01.anchor()).parent().width())
    .height(300)
    .x(d3.scaleBand())
    .xUnits(dc.units.ordinal);


lineChart03
    .dimension(ageDimension)
    .group(remove_empty_bins(ageGroup))
    .width($(lineChart03.anchor()).parent().width())
    .height(300)
    .x(d3.scaleLinear().domain([15, 70]))
    .brushOn(false)
    .yAxisLabel("Count")
    .xAxisLabel("Age")
    .dotRadius(20)
    .renderArea(true)
    .elasticX(true);


lineChart04
    .dimension(ageDimension)
    .group(ageGroup)
    .width($(lineChart04.anchor()).parent().width())
    .height(300)
    .x(d3.scaleLinear().domain([15, 70]))
    .brushOn(false)
    .yAxisLabel("Count")
    .xAxisLabel("Age")
    .renderArea(true)
    .renderDataPoints({ radius: 3, fillOpacity: 0.8, strokeOpacity: 0.0 });


lineChart03
    .dimension(ageDimension)
    .group(remove_empty_bins(ageGroup))
    .width($(lineChart03.anchor()).parent().width())
    .height(300)
    .x(d3.scaleLinear().domain([15, 70]))
    .brushOn(false)
    .yAxisLabel("Count")
    .xAxisLabel("Age")
    .dotRadius(20)
    .renderArea(true)
    .elasticX(true);