I tried the below two codes, I am getting the graph correctly. But the exact hours and minutes are not getting displayed in the Y- axis. Some default hours and minutes are getting considered. I want the actual hours and minutes to get displayed in the Y- axis.
Code 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Chart jQuery Plugin - Multiple Axes</title>
<link rel="stylesheet" type="text/css" href="css/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css"
href="css/jquery.jqRangeSlider.css" />
<link rel="stylesheet" type="text/css"
href="css/jquery-ui-1.8.21.css" />
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery.jqChart.min.js" type="text/javascript"></script>
<script src="js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
<!--[if IE]><script lang="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
var data1 = [['10/13/2012 20:10', 150], ['10/14/2012 19:30', 130], ['10/15/2012 20:10', 70], ['10/16/2012 20:10', 150], ['10/17/2012 19:30', 130]];
var data2 = [['10/13/2012 07:15', 50], ['10/14/2012 09:15', 76], ['10/15/2012 07:15', 50], ['10/16/2012 09:15', 30]];
for (var i = 0; i < data1.length; i++) {
data1[i][0] = new Date(data1[i][0]);
}
for (var i = 0; i < data2.length; i++) {
data2[i][0] = new Date(data2[i][0]);
}
$('#jqChart').jqChart({
title: 'Title',
axes: [
{
type: 'dateTime',
location: 'left',
labels: { stringFormat: 'mm/dd HH:MM' }
},
{
type: 'linear',
location: 'bottom',
minimum: 0,
interval: 50,
maximum: 300
}
],
series: [
{
type: 'verticalLine',
data: data1
},
{
type: 'verticalLine',
data: data2
}
]
});
});
</script>
</head>
<body>
<div>
<div id="jqChart" align="center" style="width: 800px; height: 600px;">
</div>
</div>
</body>
</html>
Code 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Chart jQuery Plugin - Multiple Axes</title>
<link rel="stylesheet" type="text/css" href="css/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css"
href="css/jquery.jqRangeSlider.css" />
<link rel="stylesheet" type="text/css"
href="css/jquery-ui-1.8.21.css" />
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery.jqChart.min.js" type="text/javascript"></script>
<script src="js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
<!--[if IE]><script lang="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
var data1 = [['10/13/2012 20:10', 150], ['10/14/2012 19:30', 130], ['10/15/2012 20:10', 70], ['10/16/2012 20:10', 150], ['10/17/2012 19:30', 130]];
var data2 = [['10/13/2012 07:15', 50], ['10/14/2012 09:15', 76], ['10/15/2012 07:15', 50], ['10/16/2012 09:15', 30]];
for (var i = 0; i < data1.length; i++) {
var year = data1[i][0].substring(6,10);
console.log(year);
var month = data1[i][0].substring(0,2);
console.log(month);
var day = data1[i][0].substring(3,5);
console.log(day);
var hours = data1[i][0].substring(11,13);
console.log(hours);
var minutes = data1[i][0].substring(14);
console.log(minutes);
console.log(new Date(data1[i][0]));
data1[i][0] = new Date(year,month-1,day,hours,minutes,'00','00');
console.log( data1[i][0]);
}
for (var i = 0; i < data2.length; i++) {
var year = data2[i][0].substring(6,10);
var month = data2[i][0].substring(0,2);
var day = data2[i][0].substring(3,5);
var hours = data2[i][0].substring(11,13);
var minutes = data2[i][0].substring(14);
data2[i][0] = new Date(year,month-1,day,hours,minutes,'00','00');
}
$('#jqChart').jqChart({
title: 'Title',
axes: [
{
type: 'dateTime',
location: 'left',
labels: { stringFormat: 'mm/dd HH:mm' }
},
{
type: 'linear',
location: 'bottom',
minimum: 0,
interval: 50,
maximum: 300
}
],
series: [
{
type: 'verticalLine',
data: data1
},
{
type: 'verticalLine',
data: data2
}
]
});
});
</script>
</head>
<body>
<div>
<div id="jqChart" align="center" style="width: 800px; height: 600px;">
</div>
</div>
</body>
</html>
Currently am getting the default Hours and minutes values as 05:10 and 17:10. The graph is getting plotted correctly considering this default hours and minutes.
Please help me in getting the exact hours and minutes in the Y- axis.
Thanks in advance.