Line 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);