Line Chart with custom Hover effects

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

JavaScript

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

    var _dateFormat = pv.Format.date("%Y-%m-%d");

    new pvc.LineChart({
        canvas: "cccExample",
        width:  500,
        height: 400,
        title:  "Line Chart with custom Hover effects",
        animate:    true,
        clickable:  true,
        selectable: true,
        hoverable:  true,
        legend:     true,
        legendPosition: 'right',
        timeSeries: true,
        axisGrid:   true,
        dotsVisible: true,
        extensionPoints: {
            line_strokeStyle: function(scene) {
                if(this.sign.mayShowActive(scene)) {
                    // Apply no more effects. Keep base color the same.
                    return this.finished(this.delegate());
                }
                return this.delegate();
            },
            line_lineWidth: function(scene) {
                if(this.sign.mayShowActive(scene)) {
                    // Apply no more effects. Set a fixed line width.
                    return this.finished(3);
                }
                return this.delegate();
            }
        }
    })
    .setData(relational_01, {crosstabMode: false })
    .render();
});