I'm trying to style and add another 2 x'axis to a Google area chart (a and b in the image). For example, the a axis should be set to 900 and b: 700.
Also trying to extend the chart to the full width of the containing div (960px) but my solution seems to do nothing.
This is the desired effect.
Current js
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['November', 1000, 400],
['December', 1170, 460],
['January', 660, 1120],
['February', 690, 1120],
['March', 780, 1120],
['April', 820, 1120],
['May', 660, 1120],
['June', 1030, 540]
]);
var options = {
title: '',
backgroundColor: 'none',
width:'960',
legend: {position: 'none'},
hAxis: {title: 'Year', titleTextStyle: {color: 'grey'},
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
To get the chart width right, add a chartArea definition to your options object. The chartArea settings are listed in the AreaChart documentation under "Configuration Options":
chartArea: {
left: 40,
top: 10,
width: 900,
height: 350
}
Demo: http://jsfiddle.net/2H7sp/
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['November', 1000, 400],
['December', 1170, 460],
['January', 660, 1120],
['February', 690, 1120],
['March', 780, 1120],
['April', 820, 1120],
['May', 660, 1120],
['June', 1030, 540]
]);
var options = {
title: '',
backgroundColor: 'none',
legend: { position: 'none' },
hAxis: {
title: 'Year',
titleTextStyle: {
color: 'grey'
}
},
chartArea: {
left: 40,
top: 10,
width: 600,
height: 150
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
body { margin: 0; }
#chart_div {
background-color: #f5f5f5;
width: 660px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}
<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>
You'll need to play with the numbers a little bit. chartArea refers to the graphical portion of the chart, excluding the axes, title, and legend. So you need to add padding to your values in order to leave room.
Edit: To get the horizontal lines, you'll need to add two additional series with values of 900 and 700 for each row in the respective columns:
var data = google.visualization.arrayToDataTable([
[ 'Year', 'Sales', 'Expenses', 'a', 'b' ],
[ 'November', 1000, 400, 900, 700 ],
[ 'December', 1170, 460, 900, 700 ],
[ 'January', 660, 1120, 900, 700 ],
...
To get the colors right, specify a definition for the series option that sets the area invisible and the line color black for the two new series.
var options = {
...
series: {
2: { areaOpacity: 0, color: "#000" },
3: { areaOpacity: 0, color: "#000" }
},
...
This is close, but the lines will be solid instead of dashed, and there will be no labels. You can get these effects by adding columns with roles to your data table. You'll not be able to use .arrayToDataTable() for this, but instead will need to use the more verbose syntax:
var data = new google.visualization.DataTable();
data.addColumn("string", "Year");
data.addColumn("number", "Sales");
data.addColumn("number", "Expenses");
data.addColumn("number", "a");
data.addColumn("number", "b");
data.addRows([
['November', 1000, 400, 900, 700],
['December', 1170, 460, 900, 700],
['January', 660, 1120, 900, 700],
...
For dashed lines add a certainty role column following each of your "a" and "b" columns:
data.addColumn({ type: "boolean", role: "certainty" });
To get the "a" and "b" labels add a annotation role columns following each of your certainty columns:
data.addColumn({ type: "string", role: "annotation" });
The certainty column values should all be false. The annotation column values should all be null except for the last row where you want the label to appear. The annotation aligns above the data point instead of to the right where you want it, but that's as good as you can get.
Your data rows with the new columns added will look like this:
data.addRows([
['November', 1000, 400, 900, false, null, 700, false, null],
['December', 1170, 460, 900, false, null, 700, false, null],
...
['May', 660, 1120, 900, false, null, 700, false, null],
['June', 1030, 540, 900, false, "a", 700, false, "b"]
]);
And, here's the end result: http://jsfiddle.net/2H7sp/2/
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn("string","Year");
data.addColumn("number","Sales");
data.addColumn("number","Expenses");
data.addColumn("number","a");
data.addColumn({type:"boolean",role:"certainty"});
data.addColumn({type:"string",role:"annotation"});
data.addColumn("number","b");
data.addColumn({type:"boolean",role:"certainty"});
data.addColumn({type:"string",role:"annotation"});
data.addRows([
['November', 1000, 400, 900, false, null, 700, false, null],
['December', 1170, 460, 900, false, null, 700, false, null],
['January', 660, 1120, 900, false, null, 700, false, null],
['February', 690, 1120, 900, false, null, 700, false, null],
['March', 780, 1120, 900, false, null, 700, false, null],
['April', 820, 1120, 900, false, null, 700, false, null],
['May', 660, 1120, 900, false, null, 700, false, null],
['June', 1030, 540, 900, false, "a", 700, false, "b"]
]);
var options = {
title: '',
backgroundColor: 'none',
legend: { position: 'none' },
hAxis: {
title: 'Year',
titleTextStyle: { color: 'grey' }
},
series:{
2:{areaOpacity:0,color:"#000"},
3:{areaOpacity:0,color:"#000"}
},
chartArea: {
left: 40,
top: 10,
width: 600,
height: 150
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
body { margin: 0; }
#chart_div {
background-color: #f5f5f5;
width: 660px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}
<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>
Related
I have a fast question. It is possible to generate that Char in Google Charts? ... And mayby u knew how to do that (any advice or smth)?
Chart1
This white area below the chart is very important.
it's possible
use AreaChart with isStacked: true and set the bottom area to 'transparent'
since isStacked: true, most likely some data manipulation will be required to get the desired outcome
see following working snippet...
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Bottom', 'Area 1', 'Area 2', 'Area 3'],
['2010', 100, 100, 100, 100],
['2020', 110, 120, 130, 140],
['2025', 120, 160, 180, 200],
['2030', 140, 180, 200, 240],
['2035', 200, 240, 280, 320],
['2040', 260, 300, 320, 380],
['2045', 320, 400, 460, 600],
['2050', 400, 480, 600, 800]
]),
{
areaOpacity: 1.0,
colors: ['transparent', 'cyan', 'yellow', 'magenta'],
lineWidth: 1,
isStacked: true,
series: {
0: {
visibleInLegend: false
}
}
}
);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to develop custom donut component for SAP BusinessObjects Design Studio by using google donut chart. It's like DOM(Document Object Model).
I want to make donut chart responsive because of the compatibility with the other components. To do this, in classic DOM I used bootstrap "col-md-6" div as a container:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2000', 1000, 400],
['2001', 1170, 460],
['2002', 660, 1120],
['2003', 1030, 540],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2008', 1000, 400],
['2009', 1170, 460],
['2010', 660, 1120],
['2011', 1030, 540]
]);
var options = {
backgroundColor: {
fill: 'none'
},
pieHole: 0.4,
pieSliceTextStyle: {
color: 'white',
},
title: 'Company Performance',
chartArea: {
top: 20,
width: "100%",
height: "100%"
},
legend: {
position: 'labeled',
textStyle: {
fontSize: 15,
color: '#000'
}
},
titlePosition: 'out',
titleTextStyle: {
color: '#000',
bold: true,
italic: true,
fontSize: 16,
position: 'centered'
}
};
var chart = new google.visualization.PieChart(document.getElementById('chartDiv'));
chart.draw(data, options);
}
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2000', 1000, 400],
['2001', 1170, 460],
['2002', 660, 1120],
['2003', 1030, 540],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2008', 1000, 400],
['2009', 1170, 460],
['2010', 660, 1120],
['2011', 1030, 540]
]);
var options = {
backgroundColor: {
fill: 'none'
},
pieHole: 0.4,
pieSliceTextStyle: {
color: 'white',
},
title: 'Company Performance',
chartArea: {
top: 20,
width: "100%",
height: "100%"
},
legend: {
position: 'labeled',
textStyle: {
fontSize: 15,
color: '#000'
}
},
titlePosition: 'out',
titleTextStyle: {
color: '#000',
bold: true,
italic: true,
fontSize: 16,
position: 'centered'
}
};
var chart = new google.visualization.PieChart(document.getElementById('chartDiv2'));
chart.draw(data, options);
}
$(window).resize(function() {
drawChart();
drawChart2();
});
.chart {
width: 100%;
min-height: 450px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="clearfix"></div>
<div class="col-md-6">
<div id="chartDiv" class="chart"></div>
</div>
<div class="col-md-6">
<div id="chartDiv2" class="chart"></div>
</div>
</body>
</html>
But in design studio, we need to use this component in the Grid Layout Cell. Because of this wrapping new divs, my design is broke down in design studio side. Another divs u see in the picture, comes from design studio sdk developer mode. But I can access them with js. Just know which div to edit.
Both two photos of my div hierarchy of html design and component design:
normal dom design
design studio
Here is the snippet I'm working with design studio, but you can't run it. me.init() method works like main method.
sap.designstudio.sdk.Component.subclass("com.try.donut.Donut", function() {
var me = this;
var myDiv;
me._width;
me._height;
me.drawChart = function() {
//me.$().width();
var data = google.visualization.arrayToDataTable([
[ 'Year', 'Sales', 'Expenses' ], [ '2000', 1000, 400 ],
[ '2001', 1170, 460 ], [ '2002', 660, 1120 ],
[ '2003', 1030, 540 ], [ '2004', 1000, 400 ],
[ '2005', 1170, 460 ] ]);
var options = {
backgroundColor : {
fill : 'none'
},
pieHole : 0.4,
pieSliceTextStyle : {
color : 'white',
},
title : 'Company Performance',
chartArea : {
top: "30",
bottom: "30",
height: "100%",
width: "100%"
},
legend : {
position : 'labeled',
textStyle : {
color : '#000'
}
},
titlePosition : 'out',
titleTextStyle : {
color : '#000',
bold : true,
italic : true,
fontSize : 16,
position : 'centered'
}
};
var chart = new google.visualization.PieChart(document.getElementById(myDiv.id+'_chart_div'));
chart.draw(data, options);
};
me.redraw = function() {
myDiv = this.$()[0];
var componentDiv = d3.select(myDiv);
componentDiv.selectAll("*").remove();
var wrapperDiv = componentDiv.append("div").attr("class","col-md-6");
wrapperDiv.append("div").attr("class","chart").attr("id",myDiv.id+"_chart_div");
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function(){
me.drawChart();
});
};
$(window).resize(function(){
me.redraw();
});
me.init = function() {
me.redraw();
};
// /////***** SET - GET *****\\\\\\
me.height = function(value) {
if (value === undefined) {
return me._height;
} else {
me._height = value;
return me;
}
};
me.width = function(value) {
if (value === undefined) {
return me._width;
} else {
me._width = value;
return me;
}
};
});
what should i do to new div's attribute to fix this problem?
This is my first day of exploring google charts, but it is not displaying the line chart. It is infact not showing anything.
Here is my code:
<html>
<head>
<style>
<%# include file="demoGraph.css"%>
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Months');
data.addColumn('number', 'Enrolled');
data.addColumn('number', 'Inactive');
data.addColumn('number', 'Guest');
data.addRows([
[Jan, 700, 1200, 800],
[Feb, 1000, 275, 1800],
[Mar, 1250, 220, 1500],
[Apr, 1100, 400, 600],
[May, 1900, 250, 1200],
[Jun, 2000, 360, 1000],
[Jul, 1500, 500, 1000],
[Aug, 1300, 250, 1000],
[Sep, 1700, 500, 1000],
[Oct, 1200, 150, 525],
[Nov, 1000, 250, 625],
[Dec, 1920, 280, 700]
]);
var options = {
title: 'Demo Graph',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material" style="width: 900px; height: 500px"></div>
</body>
</html>
But on the web page its not displaying anything. Well according to them it should show graph, but its not. Could someone point what I'am missing ?
Here is a working example.
In your code the months(Jan, Feb, ..) needs to be enclosed in ", else it will be treated as a variable which was not defined and error will be thrown.
Datatype for the column(month) should be string. Change data.addColumn('number', 'Months'); to data.addColumn('string', 'Months');
<html>
<head>
<style>
<%# include file="demoGraph.css"%>
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Months');
data.addColumn('number', 'Enrolled');
data.addColumn('number', 'Inactive');
data.addColumn('number', 'Guest');
data.addRows([
["Jan", 700, 1200, 800],
["Feb", 1000, 275, 1800],
["Mar", 1250, 220, 1500],
["Apr", 1100, 400, 600],
["May", 1900, 250, 1200],
["Jun", 2000, 360, 1000],
["Jul", 1500, 500, 1000],
["Aug", 1300, 250, 1000],
["Sep", 1700, 500, 1000],
["Oct", 1200, 150, 525],
["Nov", 1000, 250, 625],
["Dec", 1920, 280, 700]
]);
var options = {
title: 'Demo Graph',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material" style="width: 900px; height: 500px"></div>
</body>
</html>
include the query if needed
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
and change data.addColumn('number', 'Months'); to data.addColumn('string', 'Months');
also change
data.addRows([
[Jan, 700, 1200, 800],
[Feb, 1000, 275, 1800],
[Mar, 1250, 220, 1500],
[Apr, 1100, 400, 600],
[May, 1900, 250, 1200],
[Jun, 2000, 360, 1000],
[Jul, 1500, 500, 1000],
[Aug, 1300, 250, 1000],
[Sep, 1700, 500, 1000],
[Oct, 1200, 150, 525],
[Nov, 1000, 250, 625],
[Dec, 1920, 280, 700]
]);
To
data.addRows([
["Jan", 700, 1200, 800],
["Feb", 1000, 275, 1800],
["Mar", 1250, 220, 1500],
["Apr", 1100, 400, 600],
["May", 1900, 250, 1200],
["Jun", 2000, 360, 1000],
["Jul", 1500, 500, 1000],
["Aug", 1300, 250, 1000],
["Sep", 1700, 500, 1000],
["Oct", 1200, 150, 525],
["Nov", 1000, 250, 625],
["Dec", 1920, 280, 700]
]);
here is the HTML
<html>
<head>
<style>
<%# include file="demoGraph.css"%>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Months');
data.addColumn('number', 'Enrolled');
data.addColumn('number', 'Inactive');
data.addColumn('number', 'Guest');
data.addRows([
["Jan", 700, 1200, 800],
["Feb", 1000, 275, 1800],
["Mar", 1250, 220, 1500],
["Apr", 1100, 400, 600],
["May", 1900, 250, 1200],
["Jun", 2000, 360, 1000],
["Jul", 1500, 500, 1000],
["Aug", 1300, 250, 1000],
["Sep", 1700, 500, 1000],
["Oct", 1200, 150, 525],
["Nov", 1000, 250, 625],
["Dec", 1920, 280, 700]
]);
var options = {
title: 'Demo Graph',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material" style="width: 900px; height: 500px"></div>
</body>
</html>
In you example you did not defined the your month variables. Since you defined your first row as number data.addColumn('number', 'Months'); they need to be in a number format.
For Example: https://jsfiddle.net/56jekrec/1/
We are trying to fill only one color in google area chart, with different line color.
If we use
isStacked:true
then it will change chart representation
(change y-axis max coordinate)
we want to fill only one color
(green color below the max border in chart).
fiddle
You mean like this: https://jsfiddle.net/7uyz541m/1/ or this: https://jsfiddle.net/7uyz541m/2/ ?
You can set the areaOpacity to zero to remove the filling of a series.
The difference between the first and second jsfiddle link is the isstacked value.
series: {
0: {
areaOpacity: 0
}
},
To make both areas the "same" color but the line a different color you need to add a dummy column like here: https://jsfiddle.net/7uyz541m/3
Using a ComboChart and two sets of the same data, I believe I was able to achieve the desired result.
Note definitions for each series
The first two are identical using areaOpacity: 1 to prevent color mix
These are also not visibleInLegend
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
['2013', 1000, 400, 400, 1000 ],
['2014', 1170, 460, 460, 1170 ],
['2015', 660, 1120, 1120, 660 ],
['2016', 1030, 540, 540, 1030 ]
]);
var data2 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
['2013', 1000, 400, 400, 1000 ],
['2014', 1170, 460, 460, 1170 ],
['2015', 660, 400, 400, 660 ],
['2016', 1030, 540, 540, 1030 ]
]);
var data3 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
['2013', 400, 1000, 1000, 400 ],
['2014', 460, 1170, 1170, 460 ],
['2015', 400, 660, 660, 400 ],
['2016', 540, 1030, 1030, 540 ]
]);
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
},
series: {
0: {
areaOpacity: 1,
color: '#EF9A9A',
type: 'area',
visibleInLegend: false
},
1: {
areaOpacity: 1,
color: '#EF9A9A',
type: 'area',
visibleInLegend: false
},
2: {
color: '#5C6BC0',
lineWidth: 5,
type: 'line'
},
3: {
color: '#B71C1C',
lineWidth: 5,
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(data1, options);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div2'));
chart.draw(data2, options);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div3'));
chart.draw(data3, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<div id="chart_div2" style="width: 900px; height: 500px;"></div>
<div id="chart_div3" style="width: 900px; height: 500px;"></div>
As per title above, is there anyone know why? My code is as follows, and by the way, I am using the Google Chart Playground to testing out on it, http://code.google.com/apis/ajax/playground/?type=visualization#area_chart. Please advise, thanks!
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Hour', 'Sales', 'Expenses'],
['0:00', 1000, 500],
['1:00', 1170, 604],
['2:00', 660, 302],
['3:00', 1030, 827],
['4:00', 1222, 86]
]);
var options = {
areaOpacity: 0.7,
backgroundColor:{
color: 'none',
fill: 'none',
},
animation:{
easing: 'inAndOut',
},
hAxis: {gridlines: {color: '#000000', count: 3}},
vAxis: {gridlines: {color: '#DCDCDC', count: 5}},
tooltipTextStyle: {color: '#444444', fontName: 'Tahoma', fontSize: 12},
focusTarget: 'category',
series: {
0:{color: '#207795', lineWidth: 4, pointSize: 10},
1:{color: '#464A54', lineWidth: 4, pointSize: 10},
},
legend: 'none',
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
To get vertical gridlines you have to set hAxis gridlines (done) and change x-axis data type to a continuous data type. See Customizing Axes/Terminology and area chart: Configuration Options: hAxis.gridlines description.
Instead of
var data = google.visualization.arrayToDataTable([
['Hour', 'Sales', 'Expenses'],
['0:00', 1000, 500],
['1:00', 1170, 604],
['2:00', 660, 302],
['3:00', 1030, 827],
['4:00', 1222, 86]
]);
you have to provide for example:
var data = google.visualization.arrayToDataTable([
['Hour', 'Sales', 'Expenses'],
[0, 1000, 500],
[1, 1170, 604],
[2, 660, 302],
[3, 1030, 827],
[4, 1222, 86]
]);
Note hour data is not a string any more. And if you change count value of hAxis to 5, you will get vertical line for each hour:
The Code hasn't any error, you have missed chart_div in your markup..
<div id="chart_div"></div>
See Demo
http://jsfiddle.net/rathoreahsan/LE7V3/