Skip to content

Commit b456a38

Browse files
authored
Merge pull request #62 from ioggstream/ioggstream-61
Fix indexerror in scutter.php
2 parents 6eadacf + 81eb632 commit b456a38

3 files changed

Lines changed: 120 additions & 124 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 "Very low";
40+
}
41+
if (d <= 2.5) {
42+
return "Low";
43+
}
44+
if (d <= 3.5) {
45+
return "Medium";
46+
}
47+
if (d <= 4.5) {
48+
return "High"
49+
}
50+
if (d <= 5) {
51+
return "Very High";
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+

data.php

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959

6060
function getDifficultyOfImplementationWithDependencies($dimensions, $elementImplementation, &$allElements)
6161
{
62+
$aggregated = ($_GET['aggregated'] ?? false) == "true" ? "true" : false;
6263
if ($elementImplementation == null) {
6364
return;
6465
}
@@ -69,7 +70,7 @@ function getDifficultyOfImplementationWithDependencies($dimensions, $elementImpl
6970
$allElements[] = $elementImplementation['difficultyOfImplementation']["time"];
7071
$allElements[] = $elementImplementation['difficultyOfImplementation']["resources"];
7172

72-
if (array_key_exists('dependsOn', $elementImplementation) && $_GET['aggregated'] == "true") {
73+
if (array_key_exists('dependsOn', $elementImplementation) && $aggregated == "true") {
7374
foreach ($elementImplementation['dependsOn'] as $dependency) {
7475
$dependencyElement = getElementByName($dimensions, $dependency);
7576
getDifficultyOfImplementationWithDependencies($dimensions, $dependencyElement, $allElements);
@@ -87,6 +88,7 @@ function getDifficultyOfImplementationWithDependencies($dimensions, $elementImpl
8788

8889
function getDifficultyOfImplementation($dimensions, $elementImplementation)
8990
{
91+
$aggregated = ($_GET['aggregated'] ?? false) == "true" ? "true" : false;
9092
if ($elementImplementation == null) {
9193
return;
9294
}
@@ -96,7 +98,7 @@ function getDifficultyOfImplementation($dimensions, $elementImplementation)
9698
$value = $knowledge + $elementImplementation['difficultyOfImplementation']["time"] * 2 + $elementImplementation['difficultyOfImplementation']["resources"];
9799
$value = $value / 4;
98100

99-
if (array_key_exists('dependsOn', $elementImplementation) && $_GET['aggregated'] == "true") {
101+
if (array_key_exists('dependsOn', $elementImplementation) && $aggregated == "true") {
100102
foreach ($elementImplementation['dependsOn'] as $dependency) {
101103
$dependencyElement = getElementByName($dimensions, $dependency);
102104
$value += getDifficultyOfImplementation($dimensions, $dependencyElement);

scutter.php

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

910
<?php
1011
include_once "data.php";
1112
include_once "functions.php";
1213

14+
$aggregated = ($_GET['aggregated'] ?? false) == "true" ? "true" : false;
15+
1316

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

16156
<form action="?" method="get">
162-
<input name="aggregated" type="hidden"
16357
<?php
164-
if($_GET['aggregated'] == "true") {
165-
echo "value='false'";
166-
}else {
167-
echo "value='true'";
168-
}
169-
?>">
58+
echo "<input name=\"aggregated\" type=\"hidden\" value=\"$aggregated\" />";
59+
?>
17060

171-
</input>
17261
<button id="">
17362
<?php
174-
if($_GET['aggregated'] == "true") {
175-
echo "Show specific values";
176-
}else {
177-
echo "Show total values";
178-
}
63+
echo ($aggregated == "true") ? "Show specific values" : "Show total values";
17964
?>
18065
</button>
18166
</form>

0 commit comments

Comments
 (0)