Skip to content
Permalink
Browse files

Improvement Update #2

Several small improvements.
- Updated Readme, actualized information
- If there are multiple Extremes, all are highlighted
- Hour Inputs work now as well as minute inputes
- T2S handles now qqtimer dnf and +2 displays
- Improved the Hover-over-Point text (in the graphs)
  • Loading branch information
tobipch committed Aug 25, 2014
1 parent 1e26b18 commit 28a78c193dbe84cf2226d53e82c81543a91d4328
Showing with 98 additions and 39 deletions.
  1. +24 −7 README.md
  2. +4 −4 index.html
  3. +70 −28 js/script.js
@@ -1,20 +1,37 @@
#Times 2 Graph
#Times 2 Stats

##Link
You can find T2G **[here](http://tobip.ch/times2graph/)**
You can find T2S**[here](http://tobip.ch/times2stats/)**

##How To
Convert your Cubing Times easily to a graph with this nice tool.
Convert your Cubing Times easily to stats and graphs with this nice tool.

Let's say you have some times from [qqtimer](http://www.qqtimer.net) like this:

```
20.22, 18.83, 35.05, 33.84, 35.81, 31.36, 29.53, 26.75, 32.53, 30.75, 29.75, 28.91, 34.64, 28.86, 29.33, 36.48, 29.73, 30.29, 37.25, 27.24, 36.95, 30.09, 33.37, 31.65, 29.36, 30.99, 31.09, 38.36, 31.66, 30.50, 24.55, 38.39, 31.96, 31.82, 32.77, 29.72, 27.49, 32.49, 33.29, 41.32, 34.97, 35.05
20.22, 18.83, 35.05, DNF(33.84), 35.81, 31.36, 29.53, 26.75, 32.53, 30.75+2, 29.75, 28.91, 34.64, 28.86, 29.33, 36.48, 29.73, 30.29, 37.25, 27.24, 36.95, 30.09+2, 33.37, 31.65, 29.36, 30.99, 31.09, 38.36, 31.66, 30.50, 24.55, 38.39, 31.96, 31.82, 32.77, 29.72, 27.49, 32.49, 33.29, 41.32, 34.97, 35.05
```

- Insert these times into the textarea
###Graph
- Select Graphs-Tab if not already done
- Insert your times into the textarea or generate some times by pressing the sample data button
- Choose a graph
- Choose a Selection Range
- Click 'Go Graph!'
- Simply as that, now you have your graph
- Simple as that, now you have your graph

I'm happy about each issue to resolve, so go on and report it, if you find anything failing.
You also have the option to export your graphs as images (png/jpg/svg) or as pdf.


###Stats
- Select Stats-Tab if not already done
- Insert your times into the textarea or generate some times by pressing the sample data button on the Graphs-Tab
- Enjoy the Statistics of your times

##Found a Bug?
If you found a bug, you have 3 options to report it easily.
- Open an github-issue on this project --> (Open issue)[https://github.com/tobipch/Times2Stats/issues/new]
- Report the bug on the speedsolving.com forum --> (Forum Thread) [http://www.speedsolving.com/forum/showthread.php?48579-Times-2-Graph]
- Send me a mail --> tobias.peter@bluewin.ch

I'm happy about every report, so go on :)
@@ -76,19 +76,19 @@ <h1>Times 2 Stats<a href="http://tobip.ch" id="byTDP">(by TDP)</a></h1>
<td><abbr title="Same as number of times" data-toggle="tooltip">Number of Solves</abbr></td>
<td id="stats_numSolves" class="statField"></td>
</tr>
<tr>
<tr id="tr_stats_bestTime">
<td><abbr title="Lowest Time" data-toggle="tooltip">Best Time</abbr></td>
<td id="stats_bestTime" class="statField"></td>
</tr>
<tr>
<tr id="tr_stats_worstTime">
<td><abbr title="Highest Time" data-toggle="tooltip">Worst Time</abbr></td>
<td id="stats_worstTime" class="statField"></td>
</tr>
<tr>
<tr id="tr_stats_numDNF">
<td><abbr title="Sum of all DNF's" data-toggle="tooltip">Number of DNF's</abbr></td>
<td id="stats_numDNF" class="statField"></td>
</tr>
<tr>
<tr id="tr_stats_numPlusTwo">
<td><abbr title="Sum of all +2's" data-toggle="tooltip">Number of +2's</abbr></td>
<td id="stats_numPlusTwo" class="statField"></td>
</tr>
@@ -2,17 +2,17 @@
var chart;
var chartHeight;
var fullscreen = false;
var timeArr;
var timeArr = [];

////Prototype-Functions////
Array.prototype.getTimeArr = function(){
var newArr = [];
for(var i=0;i<this.length;i++){
if(this[i] != 0 && this[i] != "DNF" && !/(\d{1,2}:)?\d{1,2}(.\d{1,2})?\+2/.test(this[i])){
if(this[i] != 0 && this[i] != "DNF" && !/(\d{1,2}:)?\d{1,2}(.\d{1,2})?\+2?/.test(this[i])){
newArr.push(this[i]);
}
else if(/(\d{1,2}:)?\d{1,2}(.\d{1,2})?\+2/.test(this[i])){
newArr.push(parseFloat(this[i].replace("+2",""),10)+2);
else if(/\d{1,}.\d{1,}\+2?/.test(this[i])){
newArr.push(parseFloat(this[i].replace(/\+2?/,""),10)+2);
}
}
return newArr;
@@ -59,7 +59,6 @@ $(document).ready(function(){
getTimeArr();
updateStats();
});

$("#timeInput").on("change keydown paste mouseup",function(){
setTimeout(function(){
getTimeArr();
@@ -73,6 +72,12 @@ $(document).ready(function(){
$("#rangeSelection").fancySelect();
});


/*-------------------------*/
/////////////////////////////
/////ESSENTIAL FUNCTIONS/////
/////////////////////////////
/*-------------------------*/
////Change Theme Function////
function changeTheme(themeName){
var filename = themeName || $("#themeSelection")[0].value;
@@ -96,14 +101,16 @@ function sampleData(){
document.getElementById("timeInput").value = sampleData;
}

////Get Times from Input Area////
function getTimeArr(){
//Get Times and put them in an Array
timeArr = $("#timeInput").val().replace(/\s+/g, '').split(",").map(function(el){
if(el=="DNF") return "DNF";

else if(/(\d{1,2}:)?\d{1,2}(.\d{1,2})?\+2/.test(el)){
if(/dnf/ig.test(el)) return "DNF";

else if(/(\d{1,2}:)?\d{1,2}(.\d{1,2})?\+2?/.test(el)){
if(/\d{1,2}:\d{1,2}.\d{1,2}/.test(el)){
var tempStr = el.replace("+2","");
var tempStr = el.replace(/\+2?/,"");
return minToSec(el)+"+2";
}
else{
@@ -114,17 +121,31 @@ function getTimeArr(){
else if(/\d{1,2}:\d{1,2}.\d{1,2}/.test(el))return parseFloat(minToSec(el));

else {return parseFloat(el)}

});
if(isNaN(timeArr[timeArr.length-1]))timeArr.pop();

//Delete Comma at the end if there is one
if(isNaN(timeArr[timeArr.length-1]) && typeof timeArr[timeArr.length-1]!="string")timeArr.pop();
}

////Convert minutes to seconds////
function minToSec(minInput){
var parts = minInput.split(':'),
if(/(\d{1,2}:){2}(\d{1,2}.)(\d{1,2})/.test(minInput)){
var parts = minInput.split(':'),
hours = +parts[0],
minutes = +parts[1],
seconds = +parts[2];
return (hours * 3600 + minutes * 60 + seconds).toFixed(2);
}
else{
var parts = minInput.split(':'),
minutes = +parts[0],
seconds = +parts[1];
return (minutes * 60 + seconds).toFixed(2);
return (minutes * 60 + seconds).toFixed(2);
}
}

////Format inputted seconds to a nice time display////
function formatTime(seconds){
var hours = Math.floor(seconds/3600);
var minutes = Math.floor((seconds-hours*3600)/60);
@@ -177,10 +198,11 @@ function getNumSolves(){
}

////Get Lowest Time of All////
function getBestTime(){
function getBestTime(raw){
var newTimeArr = timeArr.getTimeArr(true);
if(newTimeArr.length==0)return formatTime(0);
return formatTime(Math.min.apply(null, newTimeArr));
var res = Math.min.apply(null, newTimeArr);
return raw?res:formatTime(res);
}

////Get Highest Time of All////
@@ -203,7 +225,7 @@ function getNumDNF(){
function getNumberPlusTwo(){
var plusTwoCounter = 0;
timeArr.map(function(time){
if(/(\d{1,2}:)?\d{1,2}(.\d{1,2})?\+2/.test(time))plusTwoCounter++;
if(/(\d{1,2}:)?\d{1,2}(.\d{1,2})?\+2?/.test(time))plusTwoCounter++;
});
return plusTwoCounter;
}
@@ -309,8 +331,6 @@ function getAverage(getAvgNum, best){
//Parse every item in array to float
l_timeArr = l_timeArr.map(function(a){return parseFloat(a)});

console.log(l_timeArr);

for(var i_getAvg=0; i_getAvg<(l_timeArr.length-getAvgNum+1);i_getAvg++){
var getAvg_avgArr = new Array();
var getAvg_cutOffNr = Math.ceil(getAvgNum/100*5);
@@ -337,7 +357,7 @@ function getAverage(getAvgNum, best){
if(actualAvg>worstTime)worstTime=parseFloat(actualAvg.toFixed(2));

}
return best?bestTime:worstTime;
return formatTime(best?bestTime:worstTime);
}

/*-------------------------*/
@@ -364,14 +384,17 @@ function generateGraph(timeArr){
var l_timeArr = timeArr.map(function(x){
var x_str = x.toString();
if(x_str=="DNF")return 0.00;
else if(/(\d{1,2}:)?\d{1,2}(.\d{1,2})?\+2/.test(x_str)){
else if(/(\d{1,2}:)?\d{1,2}(.\d{1,2})?\+2?/.test(x_str)){
var rawTime = x_str.replace("+2","");
if(/\d{1,2}:\d{1,2}.\d{1,2}/.test(rawTime)) return parseFloat(minToSec(rawTime),10)+2;
if(/(\d{1,2}:){1,2}(\d{1,2}.)(\d{1,2})/.test(rawTime)) return parseFloat(minToSec(rawTime),10)+2;
else {return parseFloat(rawTime,10)+2}
}
return parseFloat(x,10);
});

//Filter out the 0.00 (DNF) times
l_timeArr = l_timeArr.filter(function(e){if(e!=0.00)return true});

var extremes = {
min: Math.min.apply(null,l_timeArr.getTimeArr()),
max: Math.max.apply(null,l_timeArr.getTimeArr())
@@ -402,11 +425,14 @@ function markPoints(timeArr,extremes){
var min_marker = "";
var max_marker = "";

var min_index = timeArr.indexOf(extremes.min);
var max_index = timeArr.indexOf(extremes.max);

timeArr[min_index] = {marker:{fillColor: '#2ecc71',lineWidth: 10,lineColor: '#27ae60'},y:timeArr[min_index]};
timeArr[max_index] = {marker:{fillColor: '#e74c3c',lineWidth: 10,lineColor: '#c0392b'},y:timeArr[max_index]};
for(var i=0;i<timeArr.length;i++){
if(timeArr[i] == extremes.min){
timeArr[i] = {marker:{fillColor: '#2ecc71',lineWidth: 10,lineColor: '#27ae60'},y:timeArr[i]};
}
else if(timeArr[i] == extremes.max){
timeArr[i] = {marker:{fillColor: '#e74c3c',lineWidth: 10,lineColor: '#c0392b'},y:timeArr[i]};
}
}

return timeArr;
}
@@ -440,7 +466,6 @@ function toggleFullscreen(){
}
}


////The DEFAULT-Chart////
function setDefaultOptions(){
Highcharts.setOptions({
@@ -459,6 +484,10 @@ function setDefaultOptions(){
colors: ["#00CF99", "#B2E097"],

title: {text: ""},

tooltip: {
valueSuffix: " Seconds"
},

subtitle: {text: "Double-Click for Fullscreen"},

@@ -487,7 +516,14 @@ function rangeSelection(timeArr,callback){
for(var i=0; i<(timeArr.length-avgNum+1);i++){
var avgArr = new Array();
for(var l=0;l<avgNum;l++){
avgArr.push(timeArr[i+l]);
if(timeArr[i+l]!="DNF"){
if(/\d{1,}.\d{1,}\+2?/.test(timeArr[i+l])){
avgArr.push(parseFloat(timeArr[i+l])+2);
}
else{
avgArr.push(timeArr[i+l]);
}
}
}

counter++;
@@ -529,6 +565,7 @@ function createLineGraph(timeArr){
},

series:[{
name: "Time",
data: timeArr
}]
});
@@ -554,12 +591,12 @@ function createScatterPlot(timeArr){
},

series:[{
name: "Time",
data: timeArr
}]
});
}


////Create a BARCHART////
function createBarChart(timeArr){
var maxNum = Math.max.apply(null, timeArr);
@@ -601,7 +638,11 @@ function createBarChart(timeArr){
chart: {
type: "column",
},


tooltip: {
valueSuffix: ""
},

xAxis: {
title:{
text: "Time Range"
@@ -616,6 +657,7 @@ function createBarChart(timeArr){
},

series:[{
name: "Number of times in range",
data: timeData
}]
});

0 comments on commit 28a78c1

Please sign in to comment.
You can’t perform that action at this time.