anchor.diff:  
   						<!--chat start-->
   						<section class="panel">
  -							<header class="panel-heading"> What are the detailed customer movements in this time period? </header>
  +							<header class="panel-heading"> What are the detailed
  +								customer movements in this time period? </header>
   							<div class="panel-body">
   								<div id="chart4"></div>
   							</div>
  
positive.code: 							console.log(startValueArray);
  							console.log(endValueArray);
  
  							var waterfallChart = c3.generate({
  								data: {
  									columns: [startValueArray, endValueArray],
  									type: 'bar',
  									colors: {
  										data1: '#ffffff'
  									},
  									groups: [
  										['data2', 'data1']
  									],
  									order: null
  								},
  								grid: {
  									y: {
  										lines: [{value:0}]
  									}
  								}, 
  								bindto: '#chart4'
  							  });
                      });
  </script>
  	<!-- header logo: style can be found in header.less -->
  	<header class="header">
  		<a href="index.html" class="logo"> Italy Customer Walk</a>
  
negative.code: 					<!--end col-6 -->
  					<div class="col-md-6">
  						<section class="panel">
  							<header class="panel-heading"> How is customer
  								acquisition trending over time? </header>
  							<div class="panel-body">
  								<div id="chart2"></div>
  							</div>
  