Here’s a pretty amazing google chart for displaying dates along the x axis and values along the y axis.
It’s got zoom and scroll functions and client side stuff, so I guess no limitations regarding amount of data input.
http://code.google.com/apis/ajax/playgr … _time_line
You can use the same approach as Davids/Jans google maps solution.
http://www.servoymagazine.com/home/2007 … tegra.html
- Create a method globals.showChart() that returns the google code
- place a text globals.htmlarea on a form with DISPLAY_TYPE = HTML_AREA (make the area big enough to show chart like 900x400) and call
function setChart(event) {
globals.htmlarea = globals.showChart()
}
function showChart()
{
var x = "<html>\
<head>\
<script type='text/javascript' src='https://www.google.com/jsapi'></script>\
<script type='text/javascript'>\
google.load('visualization', '1', {'packages':['annotatedtimeline']});\
google.setOnLoadCallback(drawChart);\
f"+"unction drawChart() {\
var data = new google.visualization.DataTable();\
data.addColumn('date', 'Date');\
data.addColumn('number', 'Sold Pencils');\
data.addColumn('string', 'title1');\
data.addColumn('string', 'text1');\
data.addColumn('number', 'Sold Pens');\
data.addColumn('string', 'title2');\
data.addColumn('string', 'text2');\
data.addRows([\
[new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],\
[new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],\
[new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],\
[new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],\
[new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],\
[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]\
]);\
\
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));\
chart.draw(data, {displayAnnotations: true});\
}\
</script>\
</head>\
<body>\
// Note how you must specify the size of the container element explicitly!\
<div id='chart_div' style='width: 700px; height: 240px;'></div>\
\
</body>\
</html>";
return x;
}
[attachment=0]snap__2010_12_15__13_59_44.png[/attachment]
