Best way to clone a chart?

[Herbert Lin]

Hello, I would like to clone a chart to do side by side comparison for different times (x axis is binned in months).
For example, if I am now looking at May, and I would like to see what happened 3 months ago, the data of February from the same data set will be displayed in the chart next to it.

I am aiming to achieve this by using 2 charts that are exactly the same, and then apply different filters / focuses to them.
After giving it some thought, I thought of 2 ways:

1. After the main chart is created and properly set with parameters, create a clone of the main chart.
2. When setting parameters of the main chart, apply those to the clone simultaneously.

Since a hefty amount of parameters are set differently based on different data sets, method 1 is more preferable than method 2 for me, but I'm not sure how to approach this.
Some parameter values can be obtained if no value is set, but I'm not certain whether every parameter can work with this. Most preferably, maybe there is a method that clones charts in dc.js?
Thank you for any advice.

[Gordon Woodhull]

Hi Herbert,

No, there is no clone method. IMO the easiest way to do this is probably to set the options indirectly using .options() - set up the options you need in an object and then apply them to both charts:

var options = {

group: myGroup,

margins: {left: 40, ... },

...

};

chart1.options(options);

chart2.options(options);

Then change just what you need to change in chart2. Or equivalently, set stuff up in a function instead of directly:

function setupChart(chart) {

chart.group(myGroup)

.margins({left: 40, ...})

...

}

setupChart(chart1);

setupChart(chart2);

Just boring software engineering stuff here, nothing fancy.

One thing to worry about here is whether the charts need different filters applied, or just different zoom parameters as in your example. If they need different filters, then you'll need separate instances of crossfilter. Then if they need to respond to the same other charts, then you'll need to do .on('filtered', ...) on those other charts, to apply filters between crossfilter instances. I can expand on that if you really mean that.

Cheers,

Gordon

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/4d8cbbc5-4c07-46ca-a4cf-7ef951fbb37f%40googlegroups.com.

[Herbert Lin]

Thanks for the quick response Gordon, I was on vacation so I didn't try it out until today.

A follow up question for the options part. In a stacked bar chart, there will be many stacks. How do I apply multiple stacks to the chart with .options(), as assigning stack to a new one will replace the previous assignment?

I think I will use .focus() to create different perspectives so there won't be filters.

Gordon Woodhull於 2015年12月31日星期四 UTC+8上午12時28分20秒寫道：