Skip to content

Commit f5aaa38

Browse files
ioggstreamioggstream
committed
Separate js files.
1 parent bfdf565 commit f5aaa38

2 files changed

Lines changed: 111 additions & 113 deletions

File tree

‎assets/js/scutter.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
var _d3;
2+
nv.addGraph(function () {
3+
var init = true;
4+
5+
var chart = nv.models.scatterChart()
6+
.showDistX(true) //showDist, when true, will display those little distribution lines on the axis.
7+
.showDistY(true)
8+
.transitionDuration(350)
9+
.color(d3.scale.category10().range());
10+
11+
var getGraph = false;
12+
function getGraphtPt(graph, x1, y1) {
13+
var a = graph.series.values;
14+
var i = a.length;
15+
16+
while (i--) {
17+
console.log("ax,ay,x1,y1", a[i].x,a[i].y, x1,y1);
18+
if (a[i].x == x1 & a[i].y == y1) {
19+
return a[i];
20+
}
21+
}
22+
return null;
23+
}
24+
25+
chart.tooltipContent(function (key, x, y, graph) {
26+
var s = "unknown";
27+
var pt = getGraphtPt(graph, x, y);
28+
if (pt != null) {
29+
s = pt.key;
30+
}
31+
return '<h3>' + key + ": " + s + '</h3>';
32+
});
33+
34+
function getLabelForAxis(d) {
35+
if(!init) {
36+
return d;
37+
}
38+
if (d <= 1.5) {
39+
return "Sehr gering";
40+
}
41+
if (d <= 2.5) {
42+
return "Gering";
43+
}
44+
if (d <= 3.5) {
45+
return "Mittel";
46+
}
47+
if (d <= 4.5) {
48+
return "Hoch"
49+
}
50+
if (d <= 5) {
51+
return "Sehr Hoch";
52+
}
53+
return "";
54+
}
55+
56+
//Axis settings
57+
chart.xAxis
58+
.tickFormat(function (d) {
59+
return getLabelForAxis(d);
60+
})
61+
.axisLabel("Difficulty of Implementation");
62+
chart.yAxis
63+
.tickFormat(function (d) {
64+
return getLabelForAxis(d);
65+
})
66+
.axisLabel("Value");
67+
68+
chart.scatter.forceX([1, 6]);
69+
chart.scatter.forceY([1, 6]);
70+
71+
//We want to show shapes other than circles.
72+
chart.scatter.onlyCircles(false);
73+
74+
var myData = getData();
75+
var svg = d3.select('#chart svg')
76+
svg.datum(myData)
77+
svg.call(chart);
78+
//svg. call(chart);
79+
nv.utils.windowResize(chart.update);
80+
toggle();
81+
$("#toggleChartLabel").click(function () {
82+
toggle();
83+
});
84+
85+
init = false;
86+
return chart;
87+
});
88+
89+
90+
function toggle() {
91+
if ($("text.labels").size() > 0) {
92+
$("text.labels").remove();
93+
} else {
94+
d3.selectAll(".nv-group path")[0].forEach(function (d) {
95+
var tf = d3.select(d).attr("transform")
96+
t = d3.transform(tf).translate;
97+
98+
t[0] = t[0] + 10;//moving the translate x by 5 pixel.
99+
//console.log(d3.select(d).style("visibility"))//data associated with the point
100+
var point = d3.select(d).data()[0];
101+
d3.select(d.parentNode)
102+
.append("text")
103+
.attr("class", "labels")
104+
.text(point.key)//putting data
105+
.attr("transform", "translate(" + t[0] + "," + t[1] + ")");//setting the changed translate for label
106+
});
107+
}
108+
}
109+

‎scutter.php‎

Lines changed: 2 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<?php
66
include_once "navi.php";
77
?>
8+
<script src="assets/js/scutter.js"></script>
89

910
<?php
1011
include_once "data.php";
@@ -40,93 +41,6 @@ function getJson($dimensions)
4041
}
4142
?>
4243
<script>
43-
var _d3;
44-
nv.addGraph(function () {
45-
var init = true;
46-
47-
var chart = nv.models.scatterChart()
48-
.showDistX(true) //showDist, when true, will display those little distribution lines on the axis.
49-
.showDistY(true)
50-
.transitionDuration(350)
51-
.color(d3.scale.category10().range());
52-
53-
var getGraph = false;
54-
function getGraphtPt(graph, x1, y1) {
55-
var a = graph.series.values;
56-
var i = a.length;
57-
58-
while (i--) {
59-
console.log("ax,ay,x1,y1", a[i].x,a[i].y, x1,y1);
60-
if (a[i].x == x1 & a[i].y == y1) {
61-
return a[i];
62-
}
63-
}
64-
return null;
65-
}
66-
67-
chart.tooltipContent(function (key, x, y, graph) {
68-
var s = "unknown";
69-
var pt = getGraphtPt(graph, x, y);
70-
if (pt != null) {
71-
s = pt.key;
72-
}
73-
return '<h3>' + key + ": " + s + '</h3>';
74-
});
75-
76-
function getLabelForAxis(d) {
77-
if(!init) {
78-
return d;
79-
}
80-
if (d <= 1.5) {
81-
return "Sehr gering";
82-
}
83-
if (d <= 2.5) {
84-
return "Gering";
85-
}
86-
if (d <= 3.5) {
87-
return "Mittel";
88-
}
89-
if (d <= 4.5) {
90-
return "Hoch"
91-
}
92-
if (d <= 5) {
93-
return "Sehr Hoch";
94-
}
95-
return "";
96-
}
97-
98-
//Axis settings
99-
chart.xAxis
100-
.tickFormat(function (d) {
101-
return getLabelForAxis(d);
102-
})
103-
.axisLabel("Difficulty of Implementation");
104-
chart.yAxis
105-
.tickFormat(function (d) {
106-
return getLabelForAxis(d);
107-
})
108-
.axisLabel("Value");
109-
110-
chart.scatter.forceX([1, 6]);
111-
chart.scatter.forceY([1, 6]);
112-
113-
//We want to show shapes other than circles.
114-
chart.scatter.onlyCircles(false);
115-
116-
var myData = getData();
117-
var svg = d3.select('#chart svg')
118-
svg.datum(myData)
119-
svg.call(chart);
120-
//svg. call(chart);
121-
nv.utils.windowResize(chart.update);
122-
toggle();
123-
$("#toggleChartLabel").click(function () {
124-
toggle();
125-
});
126-
init = false;
127-
return chart;
128-
});
129-
13044
/**************************************
13145
* Simple test data generator
13246
*/
@@ -136,27 +50,6 @@ function getData() { //# groups,# points per group
13650
data = <?php echo getJson($dimensions); ?>;
13751
return data;
13852
}
139-
140-
function toggle() {
141-
if ($("text.labels").size() > 0) {
142-
$("text.labels").remove();
143-
} else {
144-
d3.selectAll(".nv-group path")[0].forEach(function (d) {
145-
var tf = d3.select(d).attr("transform")
146-
t = d3.transform(tf).translate;
147-
148-
t[0] = t[0] + 10;//moving the translate x by 5 pixel.
149-
//console.log(d3.select(d).style("visibility"))//data associated with the point
150-
var point = d3.select(d).data()[0];
151-
d3.select(d.parentNode)
152-
.append("text")
153-
.attr("class", "labels")
154-
.text(point.key)//putting data
155-
.attr("transform", "translate(" + t[0] + "," + t[1] + ")");//setting the changed translate for label
156-
});
157-
}
158-
}
159-
16053
</script>
16154
<button id="toggleChartLabel">Toggle Label</button>
16255

@@ -167,11 +60,7 @@ function toggle() {
16760

16861
<button id="">
16962
<?php
170-
if($aggregated == "true") {
171-
echo "Show specific values";
172-
}else {
173-
echo "Show total values";
174-
}
63+
echo ($aggregated == "true") ? "Show specific values" : "Show total values";
17564
?>
17665
</button>
17766
</form>

0 commit comments

Comments
 (0)