I am unable to get the Date Values into X axis
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Flotr: Basic Radar Example</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript" src="canvas2image.js"></script>
<script type="text/javascript" src="canvastext.js"></script>
<script type="text/javascript" src="flotr.js"></script>
</head>
<body>
<div id="container" style="width:600px;height:400px;"></div>
<script type="text/javascript">
var jsonData = [{date:'August 19, 2004',open:100.01,high:104.06,low:95.96,close:100.34,volume:22088000},{date:'August 20, 2004',open:101.48,high:109.08,low:100.50,close:108.31,volume:11377000},{date:'August 23, 2004',open:110.76,high:113.48,low:109.05,close:109.40,volume:9090700},{date:'July 19, 2007',open:553.46,high:553.52,low:542.24,close:548.59,volume:6477800},{date:'July 20, 2007',open:511.90,high:523.18,low:509.50,close:520.12,volume:16026500},{date:'July 23, 2007',open:519.01,high:520.00,low:512.15,close:512.51,volume:6227900}];
var priceData = [];
for(var i = 0; i<jsonData.length; i++) {
priceData.push([i, jsonData[i].low]);
}
var f = Flotr.draw(
$('container'),[ priceData],{
xaxis:{
tickFormatter: function(n)
{
var date = jsonData[n].date;
return date;
}
}
}
);
</script>
</body>
</html>
It is throwing an Error as detailed error: jsonData[n] is undefined
From looking at this question I can see that
tickFormatteris passed a timestamp, not an index.jsonData[n]is undefined becausenis not the index you think it is.The linked question also seems to have a good solution too, you should try that.
Flotr x-axis date/time