I'm creating a histogram but it is not displaying properly. Can anyone help me to sort it out. Here is my code -

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var pausecontent =[['Location','variance']];
var dataObj=[{"1":1275.5506213987728,
"2":1290.7307725817402,
"3":1302.7705921254517,
"4":1162.4230535715515,
"5":1149.6843381106778,
"6":1162.1262680994546,
"7":1069.311558075748,
"8":1058.0760042458824,
"9":1007.6567717160162,
"10":1029.8077281040871,
"11":1010.439987814117}];
for(var k in dataObj[0]){
pausecontent.push([k,dataObj[0][k].toString()]);
}
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(pausecontent);
var options = {
title: 'Variance',
legend: { position: 'none' },
colors :['green'],
orientation :'vertical',
chartArea: { width: 500 },
hAxis: { ticks: x },
bar: { gap: 0 },
};
var chart = new [enter image description here][1]google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>