+++ /dev/null
-Gallery.register(
- 'annotation-gviz',
- {
- name: 'Annotation Gviz (broken)',
- title: 'Comparison of Gviz and Dygraphs annotated timelines',
- setup : function(parent) {
- parent.innerHTML =
- "<h3>Google AnnotatedTimeline:</h3>" +
- "<div id='gviz_div' style='width: 700px; height: 240px;'></div>" +
- "<h3>Dygraph.GVizChart:</h3>" +
- "<div id='dg_div' style='width: 700px; height: 240px;'></div>";
- },
- run: function() {
- drawChart = function() {
- 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('gviz_div'));
- chart.draw(data, {displayAnnotations: true});
-
- };
- google.setOnLoadCallback(drawChart);
- var f = function() { alert("!"); };
- google.setOnLoadCallback(f);
- var g = new Dygraph.GVizChart(document.getElementById("dg_div"));
- g.draw(data, {displayAnnotations: true, labelsKMB: true});
- }
- });
+++ /dev/null
-Gallery.register(
- 'annotations-native',
- {
- name: 'Annotations with Native format',
- setup: function(parent) {
- parent.innerHTML =
- "<p>This test demonstrates how annotations can be used with " +
- "<a href='http://dygraphs.com/data.html#array'>native-format</a> data.</p>" +
- "<div id='demodiv'></div>";
- },
- run: function() {
- g = new Dygraph(
- document.getElementById("demodiv"),
- [
- [ new Date("2011/11/01"), 100 ],
- [ new Date("2011/11/02"), 200 ],
- [ new Date("2011/11/03"), 300 ],
- [ new Date("2011/11/04"), 100 ],
- [ new Date("2011/11/05"), 200 ],
- [ new Date("2011/11/06"), 300 ],
- [ new Date("2011/11/07"), 200 ],
- [ new Date("2011/11/08"), 100 ]
- ],
- {
- labels: [ 'Date', 'Value' ]
- }
- );
-
- g.setAnnotations([{
- series: 'Value',
- x: Date.parse('2011/11/04'),
- shortText: 'M',
- text: 'Marker'
- }]);
- }
-});
+++ /dev/null
-Gallery.register(
- 'annotations',
- {
- name: 'Annotations',
- title: 'Dynamic Annotations Demo',
- setup: function(parent) {
- parent.innerHTML = [
- "<p>Click any point to add an annotation to it or click 'Add Annotation'.</p>",
- "<button id='add'>Add Annotation></button>",
- "<button id='bottom'>Shove to bottom</button>",
- "<div id='list'></div>",
- "<div id='g_div'></div>",
- "<div id='events'></div>" ].join("\n");
- },
-
- run: function() {
- var eventDiv = document.getElementById("events");
- function nameAnnotation(ann) {
- return "(" + ann.series + ", " + ann.x + ")";
- }
-
- g = new Dygraph(
- document.getElementById("g_div"),
- function() {
- var zp = function(x) { if (x < 10) return "0"+x; else return x; };
- var r = "date,parabola,line,another line,sine wave\n";
- for (var i=1; i<=31; i++) {
- r += "200610" + zp(i);
- r += "," + 10*(i*(31-i));
- r += "," + 10*(8*i);
- r += "," + 10*(250 - 8*i);
- r += "," + 10*(125 + 125 * Math.sin(0.3*i));
- r += "\n";
- }
- return r;
- },
- {
- rollPeriod: 1,
- showRoller: true,
- width: 480,
- height: 320,
- drawCallback: function(g) {
- var ann = g.annotations();
- var html = "";
- for (var i = 0; i < ann.length; i++) {
- var name = nameAnnotation(ann[i]);
- html += "<span id='" + name + "'>"
- html += name + ": " + (ann[i].shortText || '(icon)')
- html += " -> " + ann[i].text + "</span><br/>";
- }
- document.getElementById("list").innerHTML = html;
- }
- }
- );
-
- var last_ann = 0;
- annotations = [];
- for (var x = 10; x < 15; x += 2) {
- annotations.push( {
- series: 'sine wave',
- x: "200610" + x,
- shortText: x,
- text: 'Stock Market Crash ' + x
- } );
- last_ann = x;
- }
- annotations.push( {
- series: 'another line',
- x: "20061013",
- icon: 'images/dollar.png',
- width: 18,
- height: 23,
- tickHeight: 4,
- text: 'Another one',
- cssClass: 'annotation',
- clickHandler: function() {
- eventDiv.innerHTML += "special handler<br/>";
- }
- } );
- g.setAnnotations(annotations);
-
- document.getElementById('add').onclick = function() {
- var x = last_ann + 2;
- var annnotations = g.annotations();
- annotations.push( {
- series: 'line',
- x: "200610" + x,
- shortText: x,
- text: 'Line ' + x,
- tickHeight: 10
- } );
- last_ann = x;
- g.setAnnotations(annotations);
- }
-
- var bottom = document.getElementById('bottom');
-
- bottom.onclick = function() {
- var to_bottom = bottom.textContent == 'Shove to bottom';
-
- var anns = g.annotations();
- for (var i = 0; i < anns.length; i++) {
- anns[i].attachAtBottom = to_bottom;
- }
- g.setAnnotations(anns);
-
- if (to_bottom) {
- bottom.textContent = 'Lift back up';
- } else {
- bottom.textContent = 'Shove to bottom';
- }
- }
-
- var saveBg = '';
- var num = 0;
- g.updateOptions( {
- annotationClickHandler: function(ann, point, dg, event) {
- eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "<br/>";
- },
- annotationDblClickHandler: function(ann, point, dg, event) {
- eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "<br/>";
- },
- annotationMouseOverHandler: function(ann, point, dg, event) {
- document.getElementById(nameAnnotation(ann)).style.fontWeight = 'bold';
- saveBg = ann.div.style.backgroundColor;
- ann.div.style.backgroundColor = '#ddd';
- },
- annotationMouseOutHandler: function(ann, point, dg, event) {
- document.getElementById(nameAnnotation(ann)).style.fontWeight = 'normal';
- ann.div.style.backgroundColor = saveBg;
- },
-
- pointClickCallback: function(event, p) {
- // Check if the point is already annotated.
- if (p.annotation) return;
-
- // If not, add one.
- var ann = {
- series: p.name,
- xval: p.xval,
- shortText: num,
- text: "Annotation #" + num
- };
- var anns = g.annotations();
- anns.push(ann);
- g.setAnnotations(anns);
-
- num++;
- }
- });
- }
- });
--- /dev/null
+Gallery.register(
+ 'annotations-gviz',
+ {
+ name: 'Annotation Gviz (broken)',
+ title: 'Comparison of Gviz and Dygraphs annotated timelines',
+ setup : function(parent) {
+ parent.innerHTML =
+ "<h3>Google AnnotatedTimeline:</h3>" +
+ "<div id='gviz_div' style='width: 700px; height: 240px;'></div>" +
+ "<h3>Dygraph.GVizChart:</h3>" +
+ "<div id='dg_div' style='width: 700px; height: 240px;'></div>";
+ },
+ run: function() {
+ drawChart = function() {
+ 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('gviz_div'));
+ chart.draw(data, {displayAnnotations: true});
+
+ };
+ google.setOnLoadCallback(drawChart);
+ var f = function() { alert("!"); };
+ google.setOnLoadCallback(f);
+ var g = new Dygraph.GVizChart(document.getElementById("dg_div"));
+ g.draw(data, {displayAnnotations: true, labelsKMB: true});
+ }
+ });
--- /dev/null
+Gallery.register(
+ 'annotations-native',
+ {
+ name: 'Annotations with Native format',
+ setup: function(parent) {
+ parent.innerHTML =
+ "<p>This test demonstrates how annotations can be used with " +
+ "<a href='http://dygraphs.com/data.html#array'>native-format</a> data.</p>" +
+ "<div id='demodiv'></div>";
+ },
+ run: function() {
+ g = new Dygraph(
+ document.getElementById("demodiv"),
+ [
+ [ new Date("2011/11/01"), 100 ],
+ [ new Date("2011/11/02"), 200 ],
+ [ new Date("2011/11/03"), 300 ],
+ [ new Date("2011/11/04"), 100 ],
+ [ new Date("2011/11/05"), 200 ],
+ [ new Date("2011/11/06"), 300 ],
+ [ new Date("2011/11/07"), 200 ],
+ [ new Date("2011/11/08"), 100 ]
+ ],
+ {
+ labels: [ 'Date', 'Value' ]
+ }
+ );
+
+ g.setAnnotations([{
+ series: 'Value',
+ x: Date.parse('2011/11/04'),
+ shortText: 'M',
+ text: 'Marker'
+ }]);
+ }
+});
--- /dev/null
+Gallery.register(
+ 'annotations',
+ {
+ name: 'Annotations',
+ title: 'Dynamic Annotations Demo',
+ setup: function(parent) {
+ parent.innerHTML = [
+ "<p>Click any point to add an annotation to it or click 'Add Annotation'.</p>",
+ "<button id='add'>Add Annotation></button>",
+ "<button id='bottom'>Shove to bottom</button>",
+ "<div id='list'></div>",
+ "<div id='g_div'></div>",
+ "<div id='events'></div>" ].join("\n");
+ },
+
+ run: function() {
+ var eventDiv = document.getElementById("events");
+ function nameAnnotation(ann) {
+ return "(" + ann.series + ", " + ann.x + ")";
+ }
+
+ g = new Dygraph(
+ document.getElementById("g_div"),
+ function() {
+ var zp = function(x) { if (x < 10) return "0"+x; else return x; };
+ var r = "date,parabola,line,another line,sine wave\n";
+ for (var i=1; i<=31; i++) {
+ r += "200610" + zp(i);
+ r += "," + 10*(i*(31-i));
+ r += "," + 10*(8*i);
+ r += "," + 10*(250 - 8*i);
+ r += "," + 10*(125 + 125 * Math.sin(0.3*i));
+ r += "\n";
+ }
+ return r;
+ },
+ {
+ rollPeriod: 1,
+ showRoller: true,
+ width: 480,
+ height: 320,
+ drawCallback: function(g) {
+ var ann = g.annotations();
+ var html = "";
+ for (var i = 0; i < ann.length; i++) {
+ var name = nameAnnotation(ann[i]);
+ html += "<span id='" + name + "'>"
+ html += name + ": " + (ann[i].shortText || '(icon)')
+ html += " -> " + ann[i].text + "</span><br/>";
+ }
+ document.getElementById("list").innerHTML = html;
+ }
+ }
+ );
+
+ var last_ann = 0;
+ annotations = [];
+ for (var x = 10; x < 15; x += 2) {
+ annotations.push( {
+ series: 'sine wave',
+ x: "200610" + x,
+ shortText: x,
+ text: 'Stock Market Crash ' + x
+ } );
+ last_ann = x;
+ }
+ annotations.push( {
+ series: 'another line',
+ x: "20061013",
+ icon: 'images/dollar.png',
+ width: 18,
+ height: 23,
+ tickHeight: 4,
+ text: 'Another one',
+ cssClass: 'annotation',
+ clickHandler: function() {
+ eventDiv.innerHTML += "special handler<br/>";
+ }
+ } );
+ g.setAnnotations(annotations);
+
+ document.getElementById('add').onclick = function() {
+ var x = last_ann + 2;
+ var annnotations = g.annotations();
+ annotations.push( {
+ series: 'line',
+ x: "200610" + x,
+ shortText: x,
+ text: 'Line ' + x,
+ tickHeight: 10
+ } );
+ last_ann = x;
+ g.setAnnotations(annotations);
+ }
+
+ var bottom = document.getElementById('bottom');
+
+ bottom.onclick = function() {
+ var to_bottom = bottom.textContent == 'Shove to bottom';
+
+ var anns = g.annotations();
+ for (var i = 0; i < anns.length; i++) {
+ anns[i].attachAtBottom = to_bottom;
+ }
+ g.setAnnotations(anns);
+
+ if (to_bottom) {
+ bottom.textContent = 'Lift back up';
+ } else {
+ bottom.textContent = 'Shove to bottom';
+ }
+ }
+
+ var saveBg = '';
+ var num = 0;
+ g.updateOptions( {
+ annotationClickHandler: function(ann, point, dg, event) {
+ eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "<br/>";
+ },
+ annotationDblClickHandler: function(ann, point, dg, event) {
+ eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "<br/>";
+ },
+ annotationMouseOverHandler: function(ann, point, dg, event) {
+ document.getElementById(nameAnnotation(ann)).style.fontWeight = 'bold';
+ saveBg = ann.div.style.backgroundColor;
+ ann.div.style.backgroundColor = '#ddd';
+ },
+ annotationMouseOutHandler: function(ann, point, dg, event) {
+ document.getElementById(nameAnnotation(ann)).style.fontWeight = 'normal';
+ ann.div.style.backgroundColor = saveBg;
+ },
+
+ pointClickCallback: function(event, p) {
+ // Check if the point is already annotated.
+ if (p.annotation) return;
+
+ // If not, add one.
+ var ann = {
+ series: p.name,
+ xval: p.xval,
+ shortText: num,
+ text: "Annotation #" + num
+ };
+ var anns = g.annotations();
+ anns.push(ann);
+ g.setAnnotations(anns);
+
+ num++;
+ }
+ });
+ }
+ });
<!-- script src='http://www.google.com/jsapi'></script> -->
<!-- gallery entries. Can these be auto-loaded? -->
- <script src="annotation.js"></script>
+ <script src="annotations.js"></script>
<script src="drawing.js"></script>
<script src="dynamic-update.js"></script>
<script src="highlighted-region.js"></script>
<script src="number-format.js"></script>
<script src="no-range.js"></script>
<script src="negative.js"></script>
- <script src="annotation-gviz.js"></script>
- <script src="annotation-native.js"></script>
+ <script src="annotations-gviz.js"></script>
+ <script src="annotations-native.js"></script>
-->
<link rel="stylesheet" type="text/css" href="../common/textarea.css"></link>
<link title="gallery" rel="stylesheet" type="text/css" href="gallery.css"></link>
# Go through the tests and find uses of each option.
for opt in docs:
docs[opt]['tests'] = []
+ docs[opt]['gallery'] = []
# This is helpful for differentiating uses of options like 'width' and 'height'
# from appearances of identically-named options in CSS.
level -= 1
return out
-# Find text followed by a colon. These won't all be options, but those that
-# have the same name as a Dygraph option probably will be.
-prop_re = re.compile(r'\b([a-zA-Z0-9]+) *:')
-tests = debug_tests or glob.glob('tests/*.html')
-for test_file in tests:
- braced_html = find_braces(file(test_file).read())
- if debug_tests:
- print braced_html
-
- ms = re.findall(prop_re, braced_html)
- for opt in ms:
- if debug_tests: print '\n'.join(ms)
- if opt in docs and test_file not in docs[opt]['tests']:
- docs[opt]['tests'].append(test_file)
+def search_files(type, files):
+ # Find text followed by a colon. These won't all be options, but those that
+ # have the same name as a Dygraph option probably will be.
+ prop_re = re.compile(r'\b([a-zA-Z0-9]+) *:')
+ for test_file in files:
+ braced_html = find_braces(file(test_file).read())
+ if debug_tests:
+ print braced_html
+
+ ms = re.findall(prop_re, braced_html)
+ for opt in ms:
+ if debug_tests: print '\n'.join(ms)
+ if opt in docs and test_file not in docs[opt][type]:
+ docs[opt][type].append(test_file)
+
+search_files("tests", glob.glob("tests/*.html"))
+search_files("gallery", glob.glob("gallery/*.js")) #TODO add grep "Gallery.register\("
if debug_tests: sys.exit(0)
print ' <li><a href="#%s">%s</a>\n' % (label, label)
print '</ul>\n</div>\n\n'
-def name(f):
- """Takes 'tests/demo.html' -> 'demo'"""
- return f.replace('tests/', '').replace('.html', '')
-
print """
<div id='content'>
<h2>Options Reference</h2>
</pre>
<p>And, without further ado, here's the complete list of options:</p>
"""
+
+def de_tests(f):
+ """Takes 'tests/demo.html' -> 'demo'"""
+ return f.replace('tests/', '').replace('.html', '')
+
+def de_gallery(f):
+ """Takes 'gallery/demo.js' -> 'demo'"""
+ return f.replace('gallery/', '').replace('.js', '')
+
+def urlify_gallery(f):
+ """Takes 'gallery/demo.js' -> 'demo'"""
+ return f.replace('gallery/', 'gallery/#g/').replace('.js', '')
+
+
for label in sorted(labels):
print '<a name="%s"><h3>%s</h3>\n' % (label, label)
examples_html = '<font color=red>NONE</font>'
else:
examples_html = ' '.join(
- '<a href="%s">%s</a>' % (f, name(f)) for f in tests)
+ '<a href="%s">%s</a>' % (f, de_tests(f)) for f in tests)
+
+ gallery = opt['gallery']
+ if not gallery:
+ gallery_html = '<font color=red>NONE</font>'
+ else:
+ gallery_html = ' '.join(
+ '<a href="%s">%s</a>' % (urlify_gallery(f), de_gallery(f)) for f in gallery)
if 'parameters' in opt:
parameters = opt['parameters']
<i>Type: %(type)s</i><br/>%(parameters)s
<i>Default: %(default)s</i><br/>
Examples: %(examples_html)s<br/>
+ Gallery: %(gallery_html)s<br/>
<br/></div>
""" % { 'name': opt_name,
'type': opt['type'],
'parameters': parameters_html,
'default': opt['default'],
'desc': opt['description'],
- 'examples_html': examples_html}
+ 'examples_html': examples_html,
+ 'gallery_html': gallery_html}
print """
projects / dygraphs.git / commitdiff