CODEWITHSUNDEEP
javascriptd3.jsdc.js
Yash Nigam
Yash Nigam

Reputation: 117

How to plot different line patterns for different lines in DC.js series chart?

This is the image of the chart that I have generated : Current Series Chart

I have applied the dashStyle function to the linechart object which has applied the same pattern to all the lines. I need to plot a series chart with each line having a different pattern(dashed, dotted, plane line etc). There are a lot of attributes in the "c" object in the chart function. I am not sure which attribute corresponds to data values. The data attribute of the "c" object has something like "_dc/dc.baseMixin/_chart.data()" I am new to javascript and dc js and do not entirely understand what is going on under the hood.

Is there a way to plot different patterns for different lines in line chart?

Here's my current code which was implemented after referring to this example : http://dc-js.github.io/dc.js/examples/range-series.html

 focusChart
.width(920)
.height(380)
.chart(function(c) { console.log(c);return dc.lineChart(c).dashStyle([2,3]).interpolate('cardinal').evadeDomainFilter(true); })
.x(d3.scale.linear().domain([1995,2017]))
.brushOn(false)

.yAxisLabel("Topic Weight")
.xAxisLabel("Year")
.elasticY(true)
.dimension(series1Dimension)
.group(series1Group)
.colorAccessor(function(d){
  return d.key.split(",")[0].slice(5);
})
.colors(TopicColorScale)
focusChart.seriesAccessor(function(d) {return " " + d.key[0];})
.keyAccessor(function(d) {return +d.key[1];})
.valueAccessor(function(d) {return +d.value;})

.legend(dc.legend().x(400).itemHeight(13).gap(1).horizontal(10).legendWidth(540).itemWidth(210));


 focusChart.yAxis().tickFormat(function(d) {return d3.format('d')(d);});


 focusChart.xAxis().tickFormat(function(d) {return d3.format('d')(d);});


focusChart.margins().left += 20;

Any help would be much appreciated!

Upvotes: 2

Views: 463

Answers (1)

Gordon
Gordon

Reputation: 20150

The line

.chart(function(c) { console.log(c);return dc.lineChart(c).dashStyle([2,3]).interpolate('cardinal').evadeDomainFilter(true); })

provides the function that generates subcharts. The parameters to this function appear to be undocumented, but a quick look at the source reveals 

var subChart = _charts[sub.key] || _chartFunction.call(_chart, _chart, chartGroup, sub.key, i);

that the function takes the following parameters:

  1. the composite chart
  2. the chart group where the composite chart is registered
  3. the key for the subchart
  4. the index for the subchart

It's that third argument that you want. It's the key returned by your seriesAccessor, and you can use whatever method you want to set the dashStyle based on that key.

Upvotes: 2

Related Questions