jlyonsmith/chart.html

## chart.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Post Ex-Dividend Profit on Single Share" />
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>

## chart.js
// Mess with this at https://code.google.com/apis/ajax/playground/?type=visualization#bar_chart

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Day', 'Profit', { role: 'style' }],
    ['1',  -0.5, 'color: red'],
    ['2',  -0.2, 'color: red'],
    ['3',  0.2, 'color: blue'],
    ['4',  0.4, 'color: blue'],
    ['5',  0.9, 'color: blue'],
    ['6',  0.5, 'color: blue'],
    ['7',  0.5, 'color: blue'],
    ['8',  0.2, 'color: blue'],
    ['9',  0.7, 'color: blue'],
    ['10',  0.7, 'color: blue'],
    ['11',  0.7, 'color: blue'],
    ['12',  0.8, 'color: blue']
  ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {title:"Avg Post Ex-Divided Profit on Single Share",
            legend: { position: "none" },
            bar: { groupWidth: '80%' },
            width:500, height:300,
            vAxis: {title: "Profit"},
            hAxis: {title: "Day"},
            orientation: "horizontal"}
      );
}
      google.setOnLoadCallback(drawVisualization);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Post Ex-Dividend Profit on Single Share" />
	<script type="text/javascript" src="//www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load('visualization', '1', {packages: ['corechart']});
	</script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body style="font-family: Arial;border: 0 none;">
	<div id="visualization" style="width: 600px; height: 400px;"></div>
	</body>
	</html>
	// Mess with this at https://code.google.com/apis/ajax/playground/?type=visualization#bar_chart

	function drawVisualization() {
	// Create and populate the data table.
	var data = google.visualization.arrayToDataTable([
	['Day', 'Profit', { role: 'style' }],
	['1', -0.5, 'color: red'],
	['2', -0.2, 'color: red'],
	['3', 0.2, 'color: blue'],
	['4', 0.4, 'color: blue'],
	['5', 0.9, 'color: blue'],
	['6', 0.5, 'color: blue'],
	['7', 0.5, 'color: blue'],
	['8', 0.2, 'color: blue'],
	['9', 0.7, 'color: blue'],
	['10', 0.7, 'color: blue'],
	['11', 0.7, 'color: blue'],
	['12', 0.8, 'color: blue']
	]);

	// Create and draw the visualization.
	new google.visualization.BarChart(document.getElementById('visualization')).
	draw(data,
	{title:"Avg Post Ex-Divided Profit on Single Share",
	legend: { position: "none" },
	bar: { groupWidth: '80%' },
	width:500, height:300,
	vAxis: {title: "Profit"},
	hAxis: {title: "Day"},
	orientation: "horizontal"}
	);
	}
	google.setOnLoadCallback(drawVisualization);