2

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!

Yash Nigam
  • 117
  • 1
  • 8

1 Answers1

2

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.

Gordon
  • 19,811
  • 4
  • 36
  • 74
  • Thanks a lot! I was able to implement the different dashStyle logic for each line by using the third argument(Key) for the chart function as suggested. You are awesome! Also, I want to ask if there is a way to add different patterns ? Like triangles, big bubbles, vertical dashes etc apart from dashed lines to clearly distinguish each line ?I am plotting 20 lines and dashStyle method has helped me create enough variation in patterns. Just curious to know more. – Yash Nigam Aug 02 '17 at 18:47
  • 1
    It doesn't look like [any browser supports SVG's `marker-pattern` yet](https://stackoverflow.com/questions/41555688/svg-repeating-markers-through-the-line-path). But that question links to [another answer](https://stackoverflow.com/a/41108752/676195) which shows you can place text symbols at % positions along lines. – Gordon Aug 04 '17 at 11:24