More svg drawing
This commit is contained in:
parent
024f38644f
commit
b0537f718a
@ -112,26 +112,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
|
|
||||||
<!-- <defs> -->
|
|
||||||
<!-- <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> -->
|
|
||||||
<!-- <stop offset="0%" stop-color="#ffffff"/> -->
|
|
||||||
<!-- <stop offset="100%" stop-color="#000000"/> -->
|
|
||||||
<!-- </linearGradient> -->
|
|
||||||
<!-- </defs> -->
|
|
||||||
|
|
||||||
<!-- <symbol id="graph"> -->
|
|
||||||
<!-- <rect x="5" y="0" height="490" width="90" style="stroke: #d3d7cf; fill: #eeeeec"/> -->
|
|
||||||
<!-- <rect x="5" y="0" height="245" width="90" style="fill: #cc0000"/> -->
|
|
||||||
<!-- <rect x="90" y="0" height="490" width="10" style="stroke: #d3d7cf; fill: url(#gradient)"/> -->
|
|
||||||
<!-- <rect x="0" y="490" height="20" width="100" style="fill: #d3d7cf;"/> -->
|
|
||||||
<!-- <line x1="0" y1="245" x2="5" y2="245" style="stroke: #888a85;"/> -->
|
|
||||||
<!-- <text x="55" y="500" dominant-baseline="middle" text-anchor="middle">label</text> -->
|
|
||||||
<!-- </symbol> -->
|
|
||||||
|
|
||||||
<!-- <use xlink:href="#graph" x="0" y="0"/> -->
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<!-- query output -->
|
<!-- query output -->
|
||||||
<div id="output" style="display: none;">
|
<div id="output" style="display: none;">
|
||||||
<!-- semantic tweaker -->
|
<!-- semantic tweaker -->
|
||||||
@ -145,7 +125,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding: 10px;">
|
<div style="padding: 10px;">
|
||||||
<canvas id="grapher" width="800" height="550"></canvas>
|
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="550"></svg>
|
||||||
<div class="text-center" style="display: none;">
|
<div class="text-center" style="display: none;">
|
||||||
<input id="history" style="width: 90%;" type="text" data-slider-reversed="true" data-slider-max="0">
|
<input id="history" style="width: 90%;" type="text" data-slider-reversed="true" data-slider-max="0">
|
||||||
</div>
|
</div>
|
||||||
|
@ -71,7 +71,7 @@
|
|||||||
ctx.maxResults = query.maxResults;
|
ctx.maxResults = query.maxResults;
|
||||||
|
|
||||||
ctx.grapher = new grapher.Grapher({
|
ctx.grapher = new grapher.Grapher({
|
||||||
canvas: Snap('#svg'),
|
canvas: new Snap('#svg'),
|
||||||
columnRange: ctx.searchRange,
|
columnRange: ctx.searchRange,
|
||||||
columnWidth: 150,
|
columnWidth: 150,
|
||||||
useLocalScale: true,
|
useLocalScale: true,
|
||||||
@ -92,9 +92,9 @@
|
|||||||
var useRelativeScale = $('#useRelativeScale').is(':checked');
|
var useRelativeScale = $('#useRelativeScale').is(':checked');
|
||||||
ctx.grapher.setUseRelativeScale(useRelativeScale);
|
ctx.grapher.setUseRelativeScale(useRelativeScale);
|
||||||
});
|
});
|
||||||
// $('#input').fadeOut(function() {
|
$('#input').fadeOut(function() {
|
||||||
// $('#output').fadeIn();
|
$('#output').fadeIn();
|
||||||
// });
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -111,12 +111,14 @@
|
|||||||
|
|
||||||
function Column(params) {
|
function Column(params) {
|
||||||
this.updateShapes = function() {
|
this.updateShapes = function() {
|
||||||
var bigCircle = this.canvas.circle(150, 150, 100);
|
var gradient = this.canvas.gradient('l(0, 0, 0, 1)#000-#fff');
|
||||||
bigCircle.attr({
|
|
||||||
fill: "#bada55",
|
this.canvas.rect(5, 0, 90, 490).attr({'stroke': '#d3d7cf', 'fill': '#eeeeec'});
|
||||||
stroke: "#000",
|
this.canvas.rect(5, 0, 90, 245).attr({'fill': '#cc0000'});
|
||||||
strokeWidth: 5
|
this.canvas.rect(90, 0, 10, 490).attr({'stroke': '#d3d7cf', 'fill': gradient});
|
||||||
});
|
this.canvas.rect(0, 490, 100, 20).attr({'fill': '#d3d7cf'});
|
||||||
|
this.canvas.line(0, 245, 5, 245).attr({'stroke': '#888a85'});
|
||||||
|
this.canvas.text(55, 500, this.name).attr({'dominant-baseline': 'middle', 'text-anchor': 'middle'});
|
||||||
};
|
};
|
||||||
|
|
||||||
this.decimateHints = function(hints, steps, scale) {
|
this.decimateHints = function(hints, steps, scale) {
|
||||||
|
Loading…
Reference in New Issue
Block a user