Bar/Line/Area Combo Chart

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="cccExample" />

JavaScript

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

    function isAreaSeries(series) {
        switch(series) {
            case 'Lisbon':
         // case 'New York':
                return true;
        }
        return false;
    }
    

    new pvc.BarChart({
        canvas: "cccExample",
        width:  600,
        height: 400,
        title: "Bar/Line/Area Combo Chart",
        titleFont: 'bold 14px sans-serif',
        animate:    true,
        selectable: true,
        hoverable:  true,
        legend:     true,
        axisGrid:   true,
        //orthoAxisOffset: 0.1,

        plot2: true,
        plot2Series: ['Paris', 'Lisbon'],
        plot2AreasVisible:  true,
        plot2LinesVisible:  true,
        plot2DotsVisible:   false,
        //plot2ColorAxis:    2, // default
        //plot2OrthoAxis:    2, // try it
        plot2NullInterpolationMode: 'linear',

        // use same colors as main plot, 
        // which uses colorAxis 1,
        // and not a brighter version of colorAxis 1,
        // as is the default for colorAxis 2.
        color2AxisTransform: function(c) { return c; },
        color2AxisLegendDrawLine: true,

        extensionPoints: {
            plot2Area_fillStyle: function(scene) {
                return isAreaSeries(scene.vars.series.value) 
                    // Show area (with default color)
                    ? this.delegate()

                    // Hide the area
                    : null;
            },
            legend2Dot_visible: function(scene) {
                return isAreaSeries(scene.vars.value.value);
            },
            legend2Rule_visible: function(scene) {
                return !isAreaSeries(scene.vars.value.value);
            }
        }
    })
    .setData(relational_01_neg, { crosstabMode: false })
    .render();
});