Skip to content

Commit f0dd931

Browse files
author
Richard Shine
committed
Have provided a touch over/click for showing a follow legend
on touch enabled devices. Based off danvk#723 by kbaggot.
1 parent 845bb8f commit f0dd931

File tree

3 files changed

+174
-2
lines changed

3 files changed

+174
-2
lines changed

‎src/dygraph-interaction-model.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -590,7 +590,11 @@ DygraphInteraction.endTouch = function(event, g, context) {
590590
if (context.lastTouch !== null) {
591591
// no double-tap, pan or pinch so its a touchover
592592
event.isTouchOver = true;
593-
g.mousemove(event);
593+
g.mouseMoveHandler_(event);
594+
// g.mousemove(event);f
595+
596+
597+
594598
}
595599

596600
context.startTimeForDoubleTapMs = now;

‎src/plugins/legend.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ Legend.prototype.select = function(e) {
105105
if (legendMode === 'follow') {
106106
// create floating legend div
107107
var area = e.dygraph.plotter_.area;
108+
this.legend_div_.style.display = 'block';
108109
var labelsDivWidth = this.legend_div_.offsetWidth;
109110
var yAxisLabelWidth = e.dygraph.getOptionForAxis('axisLabelWidth', 'y');
110111
// determine floating [left, top] coordinates of the legend div
@@ -116,7 +117,7 @@ Legend.prototype.select = function(e) {
116117

117118
// if legend floats to end of the chart area, it flips to the other
118119
// side of the selection point
119-
if ((leftLegend + labelsDivWidth + 1) > area.w) {
120+
if ((leftLegend + labelsDivWidth + 1 ) > area.w) {
120121
leftLegend = leftLegend - 2 * 50 - labelsDivWidth - (yAxisLabelWidth - area.x);
121122
}
122123

‎tests/legend-follow.html‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="../dist/dygraph.css">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Follow Candlestick Legend - Test For Mobile Devices</title>
7+
8+
<script type="text/javascript" src="../dist/dygraph.js"></script>
9+
<style>
10+
#legend {
11+
position: absolute;
12+
display: block;
13+
border: 1px solid #2f2f2f;
14+
background-color: #ffffff;
15+
opacity: 0.9;
16+
min-width: 150px;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<h2>Legend Follow - Candlestick</h2>
22+
<div id="candlechart" class="chart" style="width:100%; height:300px"></div>
23+
<div id="legend"></div>
24+
<script type="text/javascript">
25+
// The Candle chart plotter is adapted from code written by
26+
// Zhenlei Cai (jpenguin@gmail.com)
27+
// https://github.com/danvk/dygraphs/pull/141/files
28+
29+
var BAR_WIDTH = 8;
30+
function candlePlotter(e) {
31+
// This is the officially endorsed way to plot all the series at once.
32+
if (e.seriesIndex !== 0) return;
33+
34+
var setCount = e.seriesCount;
35+
if (setCount != 4) {
36+
throw "Exactly 4 prices each point must be provided for candle chart (open close high low)";
37+
}
38+
39+
var prices = [];
40+
var price;
41+
var sets = e.allSeriesPoints;
42+
for (var p = 0 ; p < sets[0].length; p++) {
43+
price = {
44+
open : sets[0][p].yval,
45+
close : sets[1][p].yval,
46+
high : sets[2][p].yval,
47+
low : sets[3][p].yval,
48+
openY : sets[0][p].y,
49+
closeY : sets[1][p].y,
50+
highY : sets[2][p].y,
51+
lowY : sets[3][p].y
52+
};
53+
prices.push(price);
54+
}
55+
56+
var area = e.plotArea;
57+
var ctx = e.drawingContext;
58+
ctx.strokeStyle = '#202020';
59+
ctx.lineWidth = 0.6;
60+
61+
for (p = 0 ; p < prices.length; p++) {
62+
ctx.beginPath();
63+
64+
price = prices[p];
65+
var topY = area.h * price.highY + area.y;
66+
var bottomY = area.h * price.lowY + area.y;
67+
var centerX = area.x + sets[0][p].x * area.w;
68+
ctx.moveTo(centerX, topY);
69+
ctx.lineTo(centerX, bottomY);
70+
ctx.closePath();
71+
ctx.stroke();
72+
var bodyY;
73+
if (price.open > price.close) {
74+
ctx.fillStyle ='rgba(244,44,44,1.0)';
75+
bodyY = area.h * price.openY + area.y;
76+
}
77+
else {
78+
ctx.fillStyle ='rgba(44,244,44,1.0)';
79+
bodyY = area.h * price.closeY + area.y;
80+
}
81+
var bodyHeight = area.h * Math.abs(price.openY - price.closeY);
82+
ctx.fillRect(centerX - BAR_WIDTH / 2, bodyY, BAR_WIDTH, bodyHeight);
83+
}
84+
85+
}
86+
87+
function legendFormatter(data) {
88+
89+
if (data.x == null) {
90+
return '';
91+
}
92+
93+
var html = this.getLabels()[0] + ': ' + data.xHTML;
94+
data.series.forEach(function(series) {
95+
if (!series.isVisible) return;
96+
var labeledData = series.labelHTML + ': ' + series.yHTML;
97+
if (series.isHighlighted) {
98+
labeledData = '<b>' + labeledData + '</b>';
99+
}
100+
html += '<br>' + series.dashHTML + ' ' + labeledData;
101+
});
102+
return html;
103+
}
104+
105+
106+
var candleData = "Date,Open,Close,High,Low\n" +
107+
"2011-12-06,392.54,390.95,394.63,389.38\n" +
108+
"2011-12-07,389.93,389.09,390.94,386.76\n" +
109+
"2011-12-08,391.45,390.66,395.50,390.23\n" +
110+
"2011-12-09,392.85,393.62,394.04,391.03\n" +
111+
"2011-12-12,391.68,391.84,393.90,389.45\n" +
112+
"2011-12-13,393.00,388.81,395.40,387.10\n" +
113+
"2011-12-14,386.70,380.19,387.38,377.68\n" +
114+
"2011-12-15,383.33,378.94,383.74,378.31\n" +
115+
"2011-12-16,380.36,381.02,384.15,379.57\n" +
116+
"2011-12-19,382.47,382.21,384.85,380.48\n" +
117+
"2011-12-20,387.76,395.95,396.10,387.26\n" +
118+
"2011-12-21,396.69,396.45,397.30,392.01\n" +
119+
"2011-12-22,397.00,398.55,399.13,396.10\n" +
120+
"2011-12-23,399.69,403.33,403.59,399.49\n" +
121+
"2011-12-27,403.10,406.53,409.09,403.02\n" +
122+
"2011-12-28,406.89,402.64,408.25,401.34\n" +
123+
"2011-12-29,403.40,405.12,405.65,400.51\n" +
124+
"2011-12-30,403.51,405.00,406.28,403.49\n" +
125+
"2012-01-03,409.50,411.23,412.50,409.00\n" +
126+
"2012-01-04,410.21,413.44,414.68,409.28\n" +
127+
"2012-01-05,414.95,418.03,418.55,412.67\n" +
128+
"2012-01-06,419.77,422.40,422.75,419.22\n" +
129+
"2012-01-09,425.52,421.73,427.75,421.35\n" +
130+
"2012-01-10,425.91,423.24,426.00,421.50\n" +
131+
"2012-01-11,422.59,422.55,422.85,419.31\n" +
132+
"2012-01-12,422.41,421.39,422.90,418.75\n" +
133+
"2012-01-13,419.53,419.81,420.45,418.66\n" +
134+
"2012-01-17,424.20,424.70,425.99,422.96\n" +
135+
"2012-01-18,426.87,429.11,429.47,426.30\n" +
136+
"2012-01-19,430.03,427.75,431.37,426.51\n" +
137+
"2012-01-20,427.49,420.30,427.50,419.75\n" +
138+
"2012-01-23,422.67,427.41,428.45,422.30\n" +
139+
"2012-01-24,425.10,420.41,425.10,419.55\n" +
140+
"2012-01-25,454.26,446.66,454.45,443.73\n" +
141+
"2012-01-26,448.45,444.63,448.79,443.14\n" +
142+
"2012-01-27,444.37,447.28,448.48,443.77\n" +
143+
"2012-01-30,445.71,453.01,453.90,445.39\n" +
144+
"2012-01-31,455.85,456.48,458.24,453.07\n" +
145+
"2012-02-01,458.49,456.19,458.99,455.55\n" +
146+
"2012-02-02,455.90,455.12,457.17,453.98\n" +
147+
"2012-02-03,457.30,459.68,460.00,455.56\n" +
148+
"2012-02-06,458.38,463.97,464.98,458.20\n" +
149+
"2012-02-07,465.25,468.83,469.75,464.58\n" +
150+
"2012-02-08,470.50,476.68,476.79,469.70\n" +
151+
"2012-02-09,480.95,493.17,496.75,480.56\n" +
152+
"2012-02-10,491.17,493.42,497.62,488.55\n" +
153+
"2012-02-13,499.74,502.60,503.83,497.09\n" +
154+
"2012-02-14,504.70,509.46,509.56,502.00\n" ;
155+
156+
g2 = new Dygraph(
157+
document.getElementById("candlechart"),
158+
candleData,
159+
{
160+
plotter: candlePlotter,
161+
labelsDiv: document.getElementById('legend'),
162+
legendFormatter: legendFormatter,
163+
legend: 'follow',
164+
});
165+
</script>
166+
</body>
167+
</html>

0 commit comments

Comments
 (0)