Skip to content

Commit b8f194a

Browse files
pwoidkepwoidke
committed
Added CSS overrides for background-color & width
When creating points, adding the style attribute and setting the 'background-color' property to a color value will set the color of the point. The 'width' property will allow for explicitly setting the width (2 * radius) of the point.
1 parent f7a3ab5 commit b8f194a

4 files changed

Lines changed: 86 additions & 44 deletions

File tree

‎index.html‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99
<body>
1010
<div id="container">
11-
<h1>Scatterplot.js</h1>
11+
<h1>Scatterplot.js <small>(v1.1.1)</small></h1>
1212
<h3>A jQuery plugin for creating 2D <a href="http://en.wikipedia.org/wiki/Scatter_plot" target="_blank">scatter plot</a> graphs and charts.</h3>
1313
<hr/>
1414
<section>
@@ -84,7 +84,7 @@ <h4>HTML:</h4>
8484
&lt;div id="scatterplot"&gt;<br/>
8585
<span class="indent">&lt;span class="point" style="left: 100px; bottom: 100px;"&gt;&lt;/span&gt;</span><br/>
8686
<span class="indent">&lt;span class="point" style="left: 300px; bottom: 250px; background-color: blue;"&gt;&lt;/span&gt;</span><br/>
87-
<span class="indent">&lt;span class="point" style="left: 400px; bottom: 450px;"&gt;&lt;/span&gt;</span><br/>
87+
<span class="indent">&lt;span class="point" style="left: 400px; bottom: 450px; background-color: green; width: 15px;"&gt;&lt;/span&gt;</span><br/>
8888
&lt;/div&gt;
8989
</div>
9090
<h4>Javascript:</h4>
@@ -98,7 +98,7 @@ <h4>Javascript:</h4>
9898
<div id="scatterplotStaticClass">
9999
<span class="pointSC" style="left: 100px; bottom: 100px;"></span>
100100
<span class="pointSC" style="left: 300px; bottom: 250px; background-color: blue;"></span>
101-
<span class="pointSC" style="left: 400px; bottom: 450px;"></span>
101+
<span class="pointSC" style="left: 400px; bottom: 450px; background-color: green; width: 15px;"></span>
102102
</div>
103103
</div>
104104
</article>
@@ -108,8 +108,8 @@ <h4>HTML:</h4>
108108
<div class="code">
109109
&lt;div id="scatterplot"&gt;<br/>
110110
<span class="indent">&lt;span class="point" style="left: 20%; bottom: 20%;"&gt;&lt;/span&gt;</span><br/>
111-
<span class="indent">&lt;span class="point" style="left: 50%; bottom: 50%; background-color: blue;"&gt;&lt;/span&gt;</span><br/>
112-
<span class="indent">&lt;span class="point" style="left: 70%; bottom: 80%;"&gt;&lt;/span&gt;</span><br/>
111+
<span class="indent">&lt;span class="point" style="left: 50%; bottom: 50%; background-color: #f00ff0;"&gt;&lt;/span&gt;</span><br/>
112+
<span class="indent">&lt;span class="point" style="left: 70%; bottom: 80%; background-color: blue; width: 15px;"&gt;&lt;/span&gt;</span><br/>
113113
&lt;/div&gt;
114114
</div>
115115
<h4>Javascript:</h4>
@@ -122,14 +122,15 @@ <h4>Javascript:</h4>
122122
<div class="demo">
123123
<div id="scatterplotResponsiveClass">
124124
<span class="pointRC" style="left: 20%; bottom: 20%;"></span>
125-
<span class="pointRC" style="left: 50%; bottom: 50%; background-color: blue;"></span>
126-
<span class="pointRC" style="left: 70%; bottom: 80%;"></span>
125+
<span class="pointRC" style="left: 50%; bottom: 50%; background-color: #f00ff0;"></span>
126+
<span class="pointRC" style="left: 70%; bottom: 80%; background-color: blue; width: 15px;"></span>
127127
</div>
128128
</div>
129129
</article>
130130
</section>
131131
<section>
132132
<h2>Settings</h2>
133+
<h3>Javascript</h3>
133134
<div class="code">
134135
$('#scatterplot').scatter({<br/>
135136
<span class="indent block block-left">height: 300,</span><span class="indent block block-right comment">// Height of the graph (ex: 500, '50%')</span></span><br/>
@@ -145,6 +146,13 @@ <h2>Settings</h2>
145146
<span class="indent block block-left">yUnits: []</span><span class="indent block block-right comment">// Array of units for Y-axis (will be evenly spaced from bottom-left corner to bottom-right corner) (ex: ["0%", "20%", "40%", "60%", "80%", "100%"], [0, 10, 20, 30, 40, 50])</span></span><br/>
146147
});
147148
</div>
149+
<h3>CSS</h3>
150+
<p>When creating points, the position, background color, and width can be set using inline styling:</p>
151+
<div class="code">
152+
&lt;span id="point" style="left: 100px; bottom: 100px; background-color: red; width: 30px;"&gt;&lt;/span&gt;<br/>
153+
&lt;span id="point" style="left: 50%; bottom: 50%; background-color: #FFFF00; width: 2em;"&gt;&lt;/span&gt;<br/>
154+
&lt;span id="point" style="left: 25%; bottom: 50px; background-color: rgba(255, 255, 0, .5); width: 10%;"&gt;&lt;/span&gt;
155+
</div>
148156
</section>
149157
<section>
150158
<h2>TODOs</h2>

‎js/scatterplot.js‎

Lines changed: 68 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/*********************************************
22
33
Scatterplot.js
4+
Version: 1.1.1
45
Author : Paul Woidke
56
URL : http://www.paulwoidke.com
67
@@ -65,7 +66,7 @@ URL : http://www.paulwoidke.com
6566
backgroundImage: 'linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px)',
6667
backgroundPosition: '-2px -2px, -2px -2px, -1px -1px, -1px -1px'
6768
});
68-
69+
6970
if (settings.responsive) {
7071
chart.css({
7172
backgroundSize: colWidth + '% ' + rowHeight + '%,' + colWidth + '% ' + rowHeight + '%,' + (colWidth / settings.subsections) + '% ' + (rowHeight / settings.subsections) + '%,' + (colWidth / settings.subsections) + '% ' + (rowHeight / settings.subsections) + '%'
@@ -152,12 +153,14 @@ URL : http://www.paulwoidke.com
152153

153154
return this.each(function () {
154155

155-
var point = $(this), left = -1, bottom = -1;
156+
var point = $(this),
157+
left = -1,
158+
bottom = -1;
156159
settings.responsive = point.parent().hasClass('responsive');
157160

158161
left = point.css('left');
159162
bottom = point.css('bottom');
160-
163+
161164
if (settings.xPos < 0) {
162165
settings.xPos = 0;
163166
}
@@ -169,62 +172,92 @@ URL : http://www.paulwoidke.com
169172
}
170173

171174
point.addClass('point');
175+
176+
if (point.width() > 0) {
177+
settings.radius = point.width() / 2;
178+
}
179+
if (point.css('background-color') === settings.color || point.css('background-color') === 'transparent') {
180+
point.css({
181+
backgroundColor: settings.color
182+
});
183+
}
172184
point.css({
173185
width: settings.radius * 2,
174186
height: settings.radius * 2,
175187
borderRadius: settings.radius
176188
});
177189

178-
if (point.css('background-color') === settings.color || point.css('background-color') === 'transparent') {
179-
point.css({ backgroundColor: settings.color });
180-
}
181-
182190
if (settings.responsive) {
183191
if (typeof settings.xPos === 'string' || settings.xPos instanceof String) {
184-
if (settings.xPos.indexOf('%') != -1) {
185-
point.css({ left: ((parseFloat(settings.xPos) / 100) - (settings.radius / point.parent().width())) * 100 + '%' });
192+
if (settings.xPos.indexOf('%') !== -1) {
193+
point.css({
194+
left: ((parseFloat(settings.xPos) / 100) - (settings.radius / point.parent().width())) * 100 + '%'
195+
});
186196
} else {
187-
point.css({ left: settings.xPos });
197+
point.css({
198+
left: settings.xPos
199+
});
188200
}
189201
} else if (typeof left === 'string' || left instanceof String) {
190-
if (left.indexOf('%') != -1) {
191-
point.css({ left: ((parseFloat(left) / 100) - (settings.radius / point.parent().width())) * 100 + '%' });
192-
}
193-
else {
194-
point.css({ left: left });
202+
if (left.indexOf('%') !== -1) {
203+
point.css({
204+
left: ((parseFloat(left) / 100) - (settings.radius / point.parent().width())) * 100 + '%'
205+
});
206+
} else {
207+
point.css({
208+
left: left
209+
});
195210
}
196211
} else {
197-
point.css({ left: settings.xPos });
212+
point.css({
213+
left: settings.xPos
214+
});
198215
}
199216
if (typeof settings.yPos === 'string' || settings.yPos instanceof String) {
200-
if (settings.yPos.indexOf('%') != -1) {
201-
point.css({ bottom: ((parseFloat(settings.yPos) / 100) - (settings.radius / point.parent().width())) * 100 + '%' });
217+
if (settings.yPos.indexOf('%') !== -1) {
218+
point.css({
219+
bottom: ((parseFloat(settings.yPos) / 100) - (settings.radius / point.parent().width())) * 100 + '%'
220+
});
202221
} else {
203-
point.css({ bottom: settings.yPos });
222+
point.css({
223+
bottom: settings.yPos
224+
});
204225
}
205226
} else if (typeof bottom === 'string' || bottom instanceof String) {
206-
if (bottom.indexOf('%') != -1) {
207-
point.css({ bottom: ((parseFloat(bottom) / 100) - (settings.radius / point.parent().width())) * 100 + '%' });
208-
}
209-
else {
210-
point.css({ bottom: bottom });
227+
if (bottom.indexOf('%') !== -1) {
228+
point.css({
229+
bottom: ((parseFloat(bottom) / 100) - (settings.radius / point.parent().width())) * 100 + '%'
230+
});
231+
} else {
232+
point.css({
233+
bottom: bottom
234+
});
211235
}
212236
} else {
213-
point.css({ bottom: settings.yPos });
237+
point.css({
238+
bottom: settings.yPos
239+
});
214240
}
215241
} else {
216-
left = parseInt(left);
217-
bottom = parseInt(bottom);
218-
if (left != -1 && !isNaN(left)) {
219-
point.css({ left: left - settings.radius });
242+
left = parseInt(left, 10);
243+
bottom = parseInt(bottom, 10);
244+
if (left !== -1 && !isNaN(left)) {
245+
point.css({
246+
left: left - settings.radius
247+
});
220248
} else {
221-
point.css({ left: settings.xPos - settings.radius });
222-
}
223-
if (bottom != -1 && !isNaN(bottom)) {
224-
point.css({ bottom: bottom - settings.radius });
249+
point.css({
250+
left: settings.xPos - settings.radius
251+
});
225252
}
226-
else {
227-
point.css({ bottom: settings.yPos - settings.radius });
253+
if (bottom !== -1 && !isNaN(bottom)) {
254+
point.css({
255+
bottom: bottom - settings.radius
256+
});
257+
} else {
258+
point.css({
259+
bottom: settings.yPos - settings.radius
260+
});
228261
}
229262
}
230263
});

0 commit comments

Comments
 (0)