C3

C3 examples: http://c3js.org/examples.html

C3 documentation: http://c3js.org/reference.html

C3 donut chart

Here's an example of a donut chart:

var donut_chart = c3.generate({
    bindto: "#donut-chart",
    data: {
        columns: [
            ["series1",  1.0],
            ["series2",  1.0],
            ["series3",  1.0],
        ],
        type : 'donut',
        colors: {
            'series1' : '#4daf4a',
            'series2' : '#ff7f00',
            'series3' : '#984ea3',
        }
    },
    donut: {
        title: ""
    },
    oninit: hideDonutLabels,
    size: {
        height: 350
    }
});

If you want to hide or show the labels on the donut chart, you can select text tags in the chart using jQuery:

function hideDonutLabels() {
    /* Before user picks county, hide the donut chart labels */
    $("#donut-chart").find("text").css("visibility","hidden");
}

function showDonutLabels() {
    /* After user picks conty, show the donut chart labels */
    $("#donut-chart").find("text").css("visibility","visible");
}

Note that hideDonutLabels() is called on init. When a county in the map is clicked, showDonutLabels() is called and the text is visible.

C3 area chart

Here is an area chart:

var area_chart = c3.generate({
    bindto: "#area-chart",
    data: {
        columns: [
            ['line1', 0,0,0,0],
            ['line2', 0,0,0,0]
        ],
        types: {
            line1: 'area-spline',
            line2: 'area-spline'
            // 'line', 'spline', 'step', 'area', 'area-spline', 'area-step'
        },
        colors: {
            'line1' : '#ffff33',
            'line2' : '#377eb8',
        },
        groups: [
            ['line1', 
             'line2']
        ]
    },
    size: {
        height: 350
    }
});

Now, there are three functions to define interaction with the map: layerMouseover(), layerMouseout(), and layerMouseclick(). Here we just cover layerMouseclick().

var Nclicks = 0;
function layerMouseclick() {
    showDonutLabels();
    updateChartData(this.feature.properties);

    var county = this.feature.properties.name;
    var value = parseFloat(this.feature.properties.derived_quantity).toFixed(2);

    $("#info-name").text(county);
    $("#info-value").text(value);

    these_layer_ids = Object.keys(this._layers);

    // First, make sure no counties are selectFillColor.
    // Restore any previously selectFillColor counties
    // to their original color.
    map.eachLayer(function(layer) {
        if(layer.options) {
            if( layer['options']['fillColor'] ) {
                if(layer.options['fillColor']===selectFillColor) {
                    //console.log("Returning active fill color back to original fill color.");
                    //console.log("Before: "+layer.options['fillColor']);
                    layer.setStyle(
                        {
                            'fillColor': layer.options['originalFillColor'],
                            'fillOpacity' : normalCountyOpacity,
                            'color': ''
                        }
                    )
                }
            }
        }
    });

    // Now make the county the user clicked selectFillColor.
    // Some counties have multiple pieces,
    // so we need to use var these_layer_ids
    map.eachLayer(function(layer,ii) {
        
        if( layer['options'] ){

            these_layer_ids.forEach( function(this_layer_id) {

                if(layer['_leaflet_id']==this_layer_id) {
                    if(layer['options']['fillColor']){
                        // Get the county's current color.
                        currentFillColor = layer['options']['fillColor'];

                        // Check if county is already selectFillColor.
                        // If not, make it selectFillColor.
                        if( currentFillColor===selectFillColor) {
                            // Shouldn't get here
                            var a=0;

                        } else {
                            // set style to selectFillColor 
                            layer.setStyle({
                                'fillColor' : selectFillColor,
                                'fillOpacity' : selectCountyOpacity,
                                'color': selectStrokeColor
                            });
                        }

                    } else {
                        // Shouldn't get here
                        layer.setStyle({
                            'fillColor' : selectFillColor,
                            'fillOpacity' : selectCountyOpacity,
                            'color': selectStrokeColor
                        });
                    }
                }
            });
        }
    });

    // Last, change the title of the chart
    //console.log(county);
    //$(".c3-chart-arcs-title").text(county);
    $("#county-name").text(county);
};














function updateChartData(properties) {

    // We define arrays above, instead of inline below,
    // in an attempt to get Javascript to respect the 
    // order of the keys.
    // No such luck.

    area_chart.load({
        json: {
            'line1':properties.line['line1'],
            'line2':properties.line['line2']
        }
    });

    donut_chart.load({
        columns: [
            ['series1', properties['bar']['series1']],
            ['series2', properties['bar']['series2']],
            ['series3', properties['bar']['series3']]
        ]
    });

}


// f = feature, l = layer





function enhanceLayer(f,l){

    // add popup
    var out = [];
    if (f.properties){

        // http://leafletjs.com/reference.html#path-options
        l.setStyle({    
            fillColor: "#aaa", //getColor(0), //f.properties['derived_quantity']/10.0),
            originalFillColor: "#aaa", //getColor(0), //f.properties['derived_quantity']/10.0),
            fillOpacity: normalCountyOpacity,
            stroke: true,
            weight: 0
        });
        l.on({
            mouseover: layerMouseover,
            mouseout: layerMouseout,
            click: layerMouseclick
        });
    }
}

var geoj = new L.geoJson.ajax(prefix+"/canew.geojson",{
                                    onEachFeature:enhanceLayer
                            }).addTo(map);


$("#donut-chart").find("text").css("fill","#eee");

$("#area-chart").find("text").css("fill","#eee");
$("#area-chart").find(".c3-axis-y").css("fill","#eee");
$("#area-chart").find(".c3-axis-x").css("fill","#eee");