When including JQERY mobile CSS my actions from D3 do not work
here is my HTML:
<head>
<script type="text/javascript"
src="//chalk1up.net/climb/3rdparty/d3.v3.min.js"></script>
<script type="text/javascript" src="graph_functions.js"></script>
<title>Stats - Chalk1Up Mobile Trainer</title>
<? include 'head1.html'; ?>
<style>
</style>
<? include 'head2.html'; ?>
</head>
<body>
<script type="text/javascript"
src="//chalk1up.net/climb/3rdparty/d3.v3.min.js"></script>
<script type="text/javascript" src="graph_functions.js"></script>
<div data-role="page" id="home" data-theme="a">
<? include 'navbar.php'; ?>
<div data-role="content">
<div id="graph_avg" data-role="fieldcontain">
<label><input type="radio" name="dataset" value="bouldering"
checked> Bouldering</label>
<label><input type="radio" name="dataset" value="ropes">
Ropes</label>
</div>
<? include 'footer.html'; ?>
</div>
</body>
<!--<script type="text/javascript" src="pie.js"></script> -->
<script type="text/javascript" src="pie.js"></script>
Here is my D3 Code to create a Pie Chart:
var dataset = {
bouldering: [53, 28, 19, 24, 300, 22,55,33, 77, 32,
43,55,67,87,99,25,21, 0, 0, 0, 0, 0, 0, 0, 0, 0],
ropes: [5, 0, 10, 0, 0, 15, 0, 1, 9, 10, 11,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
};
var center_text = "Your Average Grade is: ";
var sentence_1 = "Out Of ";
var sentence_2 = " Sends, You Climb ";
var sentence_3 = " of the time!";
var rope = dataset.ropes;
var boulder = dataset.bouldering;
// console.log(emptyset);
var rope_isempty = false;
var boulder_isempty = false;
var index = 0;
var added = 0;
var bouldering_total = 0;
var most_climbed_index = 0;
var rope_total;
var tempmax_boulder = 0;
var evens_odds = 0;
var boulder_grade;
var div_string = "#graph_avg";
var boulder_color;
while(index < dataset.bouldering.length){
console.log(boulder[index]);
bouldering_total += boulder[index];
if (tempmax_boulder < boulder[index]){
tempmax_boulder = boulder[index];
most_climbed_index = index;
}
index ++;
}
//figure out the grade
switch(most_climbed_index){
case 0 : boulder_grade = "V0", boulder_color = "#1f77b4"
break;
case 1 : boulder_grade = "V1", boulder_color = "#aec7e8"
break;
case 2 : boulder_grade = "V2", boulder_color = "#ff7f0e"
break;
case 3 : boulder_grade = "V3", boulder_color = "#ffbb78"
break;
case 4 : boulder_grade = "V4", boulder_color = "#2ca02c"
break;
case 5 : boulder_grade = "V5", boulder_color = "#98df8a"
break;
case 6 : boulder_grade = "V6", boulder_color = "#d62728"
break;
case 7 : boulder_grade = "V7", boulder_color = "#ff9896"
break;
case 8 : boulder_grade = "V8", boulder_color = "#9467bd"
break;
case 9 : boulder_grade = "V9", boulder_color = "#c5b0d5"
break;
case 10 : boulder_grade = "V10", boulder_color = "#8c564b"
break;
case 11 : boulder_grade = "V11", boulder_color = "#c49c94"
break;
case 12 : boulder_grade = "V12", boulder_color = "#e377c2"
break;
case 13 : boulder_grade = "V13", boulder_color = "#f7b6d2"
break;
case 14 : boulder_grade = "V14", boulder_color = "#7f7f7f"
break;
case 15 : boulder_grade = "V15", boulder_color = "#c7c7c7"
break;
default: boulder_grade = "NONE", boulder_color = "#bcbd22"
break;
}
console.log(bouldering_total);
console.log(tempmax_boulder);
console.log(most_climbed_index);
var boulder_percentage = (tempmax_boulder / bouldering_total) * 100;
boulder_percentage = Math.round(boulder_percentage * 100) / 100;
//var boulder_string = "Your Average Grade is: " + boulder_grade;
console.log(boulder_percentage);
var max_boulder_string = tempmax_boulder.toString();
console.log(max_boulder_string);
index = 0;
while(rope_isempty == false && index < rope.length){
added += rope[index];
index += 1;
}
if (added == 0){
rope_isempty = true;
}
index = 0;
added = 0;
// console.log(rope_isempty);
while(boulder_isempty == false && index < boulder.length){
added += boulder[index];
index += 1;
}
if (added == 0){
boulder_isempty = true;
}
// var width = 960,
// height = 500,
// radius = Math.min(width, height) / 2;
var width = setWidthToWindow() - 20,
height = setHeightToWindow(),
radius = Math.min(width, height) / 2;
console.log("Width:" + width);
console.log("Height" + height);
var color = d3.scale.ordinal()
.range(["#33ff33", "#00ff00", "#00cc00", //
V0 - V2
"#ffff00","#cccc00","#999900", //
V3 - V5
"#ff0000","#cc0000","#800000", //
V6 - V8
"#666666","#999999","#ffffff", //
V9 - V11
"#ffffff","#ffffff","#ffffff","#ffffff", //
V12 - V15
"#6666ff","#3333ff","#0000ff","#000099", //
5.6 - 5.9
"#944d94","#751975","#5c005c","#470047", //
5.10's
"#94b8b8","#75a3a3","#5c8a8a","#476b6b", //
5.11's
"#ff7d1a","#ff6f00","#e66400","#cc5900", //
5.12's
"#94b8b8","#7B3F00","#8B5A2B","#926C44", //
5.13's
"#CCB091","#CCB091","#CCB091","#CCB091", //
5.14's
"#CCB091","#CCB091","#CCB091" //
5.15's
]);
var pie = d3.layout.pie()
.sort(null);
//based on origin values
var arc = d3.svg.arc()
.innerRadius(radius - 60)
.outerRadius(radius - 20);
var svg_pie = d3.select(div_string).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2.2 + "," + height / 2 +
")"); //defines where the origin is!
var text_center = drawText(svg_pie, sentence_1, -460, 400, 20,
"steelblue", FONT, TEXT_STROKE_WIDTH);
var path_pie = svg_pie.selectAll("path")
.data(pie(dataset.bouldering))
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc)
.each(function(d) { this._current = d; }); // store the initial values
d3.selectAll("input").on("change", change);
var timeout = setTimeout(function() {
d3.select("input[value=\"ropes\"]").property("checked", true).each(change);
//d3.select("button[id=\"ropes\"]").each(change);
}, 2000);
function change() {
clearTimeout(timeout);
path_pie = path_pie.data(pie(dataset[this.value])); // update the data
path_pie.transition().duration(1200).attrTween("d", arcTween); // redraw
the arcs
evens_odds += 1;
if((evens_odds % 2) == 0 ){
d3.select("#graph_avg").selectAll("text").remove();
var text_lower_1 = drawText(svg_pie, sentence_1, -270, -170, 20,
"steelblue", FONT, TEXT_STROKE_WIDTH);
var text_lower_2 = drawText(svg_pie, bouldering_total, -390, 240, 50,
RED, FONT, TEXT_STROKE_WIDTH);
var text_lower_3 = drawText(svg_pie, sentence_2, -200, 240, 15,
"steelblue", FONT, TEXT_STROKE_WIDTH);
var text_lower_4 = drawText(svg_pie,boulder_grade, 120, 240, 50,
boulder_color, FONT, TEXT_STROKE_WIDTH);
var text_lower_5 = drawText(svg_pie,boulder_percentage + "%", 220,
240, 50, ORANGE, FONT, TEXT_STROKE_WIDTH);
var text_lower_3 = drawText(svg_pie, sentence_3, 380, 240, 20,
"steelblue", FONT, TEXT_STROKE_WIDTH);
var text_center = drawText(svg_pie, center_text, -(width/4.933),
-(height/28.30), 15, "steelblue", FONT, TEXT_STROKE_WIDTH);
var grade = drawText(svg_pie,boulder_grade, -45, 50, 50,
boulder_color, FONT, TEXT_STROKE_WIDTH);
}else{
d3.select("#graph_avg").selectAll("text").remove();
var text_lower_1 = drawText(svg_pie, sentence_1, -170, 175, 15,
"steelblue", FONT, TEXT_STROKE_WIDTH);
var text_lower_2 = drawText(svg_pie, 1010, -170, 220, 40, RED, FONT,
TEXT_STROKE_WIDTH);
var text_lower_3 = drawText(svg_pie, sentence_2, -170, 240, 15,
"steelblue", FONT, TEXT_STROKE_WIDTH);
var text_lower_4 = drawText(svg_pie,"5.9", -(width/8.22), 220, 50,
boulder_color, FONT, TEXT_STROKE_WIDTH);
var text_lower_5 = drawText(svg_pie,"13.2%", 220, 240, 50, ORANGE,
FONT, TEXT_STROKE_WIDTH);
var text_lower_3 = drawText(svg_pie, sentence_3, 380, 240, 20,
"steelblue", FONT, TEXT_STROKE_WIDTH);
var text_center = drawText(svg_pie, center_text, -(width/4.933),
-(height/28.30), 15, "steelblue", FONT, TEXT_STROKE_WIDTH);
var grade = drawText(svg_pie, "5.9", -(width/8.22), height/11.32, 50,
boulder_color, FONT, TEXT_STROKE_WIDTH);
}
}
// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
For Some reason when I remove this line from the HTML:
<? include 'head1.html'; ?>
The
<label><input type="radio" name="dataset" value="bouldering"
checked> Bouldering</label>
<label><input type="radio" name="dataset" value="ropes">
Ropes</label>
"buttons" actually work, but if I include the JQUERY mobile CSS library,
Nothing happens when i click the buttons that are displayed.
From what I gather the head1.html contains a line to include the JQeury
Mobile CSS file which makes those lables look all nice and pretty, but it
seems to remove the ability to allow me to either d3.select them or I am
not allowing my function to change it correctly. Any ideas on how to
overwrite the CSS or to change my D3 code to select correctly?
No comments:
Post a Comment