Master and Details Charts - Synced Series Visibility

by duarteleao

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample1"></div>
<div id="cccExample2"></div>

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

    var masterChart = new pvc.BarChart({
        canvas: "cccExample1",
        width:   600,
        height:  400,    
        title:   "Master Chart",
        animate: false,
        legend: {
            scenes: {
                item: {
                    execute: function() {
                        // Show/hide in this chart
                        var result = this.base();
                        try{
                            // The value of the series dimension is common to 
                            // all datums in this scene (by construction).
                            var series = this.atoms.series.value;

                            // Show/hide datums with same series in the other chart
                            var isVisible     = this.isOn();
                            var detailsDatums = detailsChart.data.datums([{series: series}]);

                            pvc.data.Data.setVisible(detailsDatums, isVisible);

                            // re-render the details chart
                            detailsChart.render(true, true, false);
                        } catch(ex) {
                         alert(ex+'');
                        }
                        return result;
                    }
                }
            }
        }
    })
    .setData(relational_01, { crosstabMode: false })
    .render();

    var detailsChart = new pvc.LineChart({
        canvas: 'cccExample2',
        width:  600,
        height:	250,
        title:  "Details Chart",
        timeSeries: true,
        legend:     true,
        animate:    false,

        // If desired, to disable clicking the legend in the details chart
        legend: {
            scenes: {
                item: {
                    executable: function() { return false; }
                }
            }
        }
    })
    .setData(relational_01, { crosstabMode: false })
    .render();
});