rarpal/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    ##Custom c3js Stacked Bar Chart
What I have customezed

I have made use of the extendability features of c3js to customize the way the bars on the chart are highlighted.
Here I have redefined the selectPath method to increase the highlight brightness from the default 0.75 to 1.75.
I have some logic when I dont want certain bers to be highlighted. For those I set the brightness to 0.
Further development


I also want to either change the fill pattern or draw borders around the selected bars
I think what would be better is to have the brightness level to be included in the config object, rather than hard-coded here


## index.html
<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" type="text/css">

    <div id="chart"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>

    <script>

        c3.chart.internal.fn.selectPath = function (target, d) {
            var rubid = Number(d.id.substring(d.id.length - 1));
            if (rubid == d.index) {
                var brightness = 0;
            } else {
                var brightness = 1.75;
            }
            var $$ = this;
            $$.config.data_onselected.call($$, d, target.node());
            target.transition().duration(100)
                .style("fill", function () { return $$.d3.rgb($$.color(d)).brighter(brightness); });
        };

        var chart = c3.generate({
            bindto: "#chart",
            data: {
                x: 'x',
                columns: [
                    ['x', 'Healthy', 'Moderate', 'High'],
                    ['inrub0',  500,   30,  20],
                    ['outrub0',   0, -150, -50],
                    ['inrub1' , 150,  200,  30],
                    ['outrub1', -30,    0, -25],
                    ['inrub2' ,  50,   25, 150],
                    ['outrub2', -20,  -30,   0]
                ],
                //rows: [
                //    ['inrub0', 'inrub1', 'inrub2', 'outrub0', 'outrub1', 'outrub2'],
                //    [500, 150, 50, 0, -30, -20],
                //    [30, 200, 25, -150, 0, -30],
                //    [20, 30, 150, -50, -25, 0]
                //],
                type: 'bar',
                //groups: [
                //    ['inrub0', 'inrub1', 'inrub2', 'outrub0', 'outrub1', 'outrub2']
                //],
                groups: [
                    ['inrub0', 'outrub0', 'inrub1', 'outrub1', 'inrub2', 'outrub2']
                ],
                names: {
                    inrub0: '+ Healthy',
                    inrub1: '+ Moderate',
                    inrub2: '+ High',
                    outrub0: '- Healthy',
                    outrub1: '- Moderate',
                    outrub2: '- High'
                },
                selection: {
                    enabled: true
                },
                onclick: function (d, element) {
                    console.log(d);
                    console.log(element);
                    var refid = (d.id.substring(0, 1) == "o" ? "inrub" : "outrub");
                    refid = refid + d.index;
                    var refindex = Number(d.id.substring(d.id.length - 1));
                    chart.select([d.id], [d.index], true);
                    chart.select([refid], [refindex], false);
                }
            },
            axis: {
                x: {
                    type: 'category'
                }
            },
            //color: {
            //    pattern: ['blue', 'green', 'yellow', 'blue', 'green', 'yellow']
            //},
            color: {
                pattern: ['#6da900', '#6da900', '#f2700d', '#f2700d', '#a90000', '#a90000']
            },
            grid: {
                y: {
                  lines: [{value:0}]
                }
            }
        });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>

	</head>
	<body>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" type="text/css">

	<div id="chart"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>

	<script>

	c3.chart.internal.fn.selectPath = function (target, d) {
	var rubid = Number(d.id.substring(d.id.length - 1));
	if (rubid == d.index) {
	var brightness = 0;
	} else {
	var brightness = 1.75;
	}
	var $$ = this;
	$$.config.data_onselected.call($$, d, target.node());
	target.transition().duration(100)
	.style("fill", function () { return $$.d3.rgb($$.color(d)).brighter(brightness); });
	};

	var chart = c3.generate({
	bindto: "#chart",
	data: {
	x: 'x',
	columns: [
	['x', 'Healthy', 'Moderate', 'High'],
	['inrub0', 500, 30, 20],
	['outrub0', 0, -150, -50],
	['inrub1' , 150, 200, 30],
	['outrub1', -30, 0, -25],
	['inrub2' , 50, 25, 150],
	['outrub2', -20, -30, 0]
	],
	//rows: [
	// ['inrub0', 'inrub1', 'inrub2', 'outrub0', 'outrub1', 'outrub2'],
	// [500, 150, 50, 0, -30, -20],
	// [30, 200, 25, -150, 0, -30],
	// [20, 30, 150, -50, -25, 0]
	//],
	type: 'bar',
	//groups: [
	// ['inrub0', 'inrub1', 'inrub2', 'outrub0', 'outrub1', 'outrub2']
	//],
	groups: [
	['inrub0', 'outrub0', 'inrub1', 'outrub1', 'inrub2', 'outrub2']
	],
	names: {
	inrub0: '+ Healthy',
	inrub1: '+ Moderate',
	inrub2: '+ High',
	outrub0: '- Healthy',
	outrub1: '- Moderate',
	outrub2: '- High'
	},
	selection: {
	enabled: true
	},
	onclick: function (d, element) {
	console.log(d);
	console.log(element);
	var refid = (d.id.substring(0, 1) == "o" ? "inrub" : "outrub");
	refid = refid + d.index;
	var refindex = Number(d.id.substring(d.id.length - 1));
	chart.select([d.id], [d.index], true);
	chart.select([refid], [refindex], false);
	}
	},
	axis: {
	x: {
	type: 'category'
	}
	},
	//color: {
	// pattern: ['blue', 'green', 'yellow', 'blue', 'green', 'yellow']
	//},
	color: {
	pattern: ['#6da900', '#6da900', '#f2700d', '#f2700d', '#a90000', '#a90000']
	},
	grid: {
	y: {
	lines: [{value:0}]
	}
	}
	});
	</script>
	</body>
	</html>