Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Convert length of time to percentages nvd3

Posted on 2014-09-24
13
338 Views
Last Modified: 2014-09-25
I am looking for leads on how to convert time based events from seconds to hours into percentages which can be displayed properly on nvd3 graphs.

The problem currently is that when using a time based scale, the Y axis either dynamic or static, does not show all of the data properly.
For example, there are events which are 2 seconds long while there are others which are a few hours long. When putting both on the same scale, one ends up either being so small that it cannot be seen or so large that it just shows a huge bar on the graph.

Therefore, we need to convert the time based events to percentages so that a Y axis could work. Then users could mouse over each event to get finer details.

I am not the programmer, I am only looking for leads or input on how this could be done by others who may have done something similar.
0
Comment
Question by:projects
  • 5
  • 5
  • 3
13 Comments
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40342134
Can you please show us some test data so we can see what we're working with?  Thanks.
0
 

Author Comment

by:projects
ID: 40342151
Test data such as?
The data is time based events, so when you look at the database, you'll see

start_time
2014-09-11 18:58:12

and

end_time
2014-09-11 18:58:14

As you can see, the above is 2 seconds. The data is just that, but the time can range between seconds to hours.

Using nvd3, we need to show each of these events in a graph but since the range is go great, the data is not showing up very well as explained in my question. The answer seems to be to convert the time based events into percentages so they can be displayed on a graph properly.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40342166
Help me understand how you want to treat the outliers...
What amount of time is the maximum amount of time that would represent 100%?
Do you want a display for amounts of time that are less than 0.5%
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:projects
ID: 40342176
I don't know any of these things, that's why I posted all of the info I have.
What I can tell you is that the range can be from seconds to hours.
That kind of data doesn't display on a graph so I need to find some alternative way to show this data on a graph.
One lead was using a logarithmic scale which lead to the idea of converting the time based output to percentages instead.

In terms of what to use for percentages, I don't know and is why I posted this question, to get some idea of how others may have dealt with something like this.
0
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 250 total points
ID: 40342295
Here is how you might deal with it.  Take all of your data and find the largest timespan.  Let that equal 100%, then divide that timespan into all the other data (and multiply by 100) to get a percentage.

Here is another way to deal with it.  Set an arbitrary upper limit, say 1 hour to represent 100%, then divide that timespan into all the other data (and multiply by 100) to get a percentage.  This will allow for percentages greater than 100.

You could also set a lower limit, etc.  The key is to decide what will give you a meaningful visual display.
0
 
LVL 27

Assisted Solution

by:rrz
rrz earned 250 total points
ID: 40342639
there are events which are 2 seconds long while there are others which are a few hours long
I think you need to use a logarithmic scale. You can use JavaScript's Math.log(y) method.  I created the simplest  demonstration code possible with HTML5 canvas. It assumes that you can convert your data into the number of seconds for each event.
<!DOCTYPE html>
<html>
<head>
    <title>Graph Example</title>
    <script type="text/javascript">
        var dataValue = [ 2, 100, 5000, 36000 ];
		var data = [];
        function init() {
		    for(var i =0; i < dataValue.length; i++){
			   data[i] = 10 * Math.log(dataValue[i]);
			}
            var can = document.getElementById("can");
            var ctx = can.getContext("2d");
            ctx.fillStyle = "black";
            for (i = 0; i < 4; i++) {
                ctx.fillRect(i * 100, 10, 20, data[i]);
            }
        }
    </script>
</head>
<body onload="init()">
        <canvas id="can" height="600" width="600"></canvas>
</body>
</html>

Open in new window

0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40342709
Converting the data from ISO-8601 date/time strings to seconds is easy in PHP.  You might use PHP to create the elements of the dataValue array in rrz's example.
<?php
$alpha = '2014-09-11 18:58:12';
$omega = '2014-09-11 18:58:14';
$diff  = strtotime($omega) - strtotime($alpha);
print_r($diff);

Open in new window

0
 

Author Comment

by:projects
ID: 40343188
time-reports.png
It isn't completed yet but it shows that this was doable. There is a range of 2 seconds to 5 hours on this chart. Amazingly, everything shows just as it should. When the user mouses over any bar, the details show up in an info bubble so this works nicely.

For each duration, we have used the function Math.log
We return a number between 0 and 10
So, our Y axis has a range of 0 to 10

Each bar has more information when you mouse over it for details.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40343689
Looks great.  Would you be willing to share the JavaScript and CSS?  Thanks, ~Ray
0
 
LVL 27

Expert Comment

by:rrz
ID: 40343993
So, our Y axis has a range of 0 to 10
 How does that relate to
There is a range of 2 seconds to 5 hours
?  Why not label it with the actual values?  Look at  
http://en.wikipedia.org/wiki/Semi-log_plot
0
 

Author Comment

by:projects
ID: 40344120
@rrz; There is no actual relation, it's just a representation of time, as a percentage so that it can be displayed as it is. Otherwise, the 5 hour event for example would be nothing but a huge red bar on the screen. Or I'm not understanding your question.

@ray; I'm sure I can share the code but it's not done yet, including the labels.
I'll revisit this question once it's done.

However, once everything is done, gone over, good as can be, it may very well all end up being open source, free to use. I'm not sure how that will work just yet however. Lots to figure out.
0
 
LVL 27

Expert Comment

by:rrz
ID: 40344187
There is no actual relation, it's just a representation of time, as a percentage so that it can be displayed as it is.
But, you posted
For each duration, we have used the function Math.log
 So, what is your Y-axis scale?  I was envisioning something similar to  
http://en.wikipedia.org/wiki/Semi-log_plot#Phase_diagram_of_water   
Note the logarithmic scale for pressure.
0
 

Author Comment

by:projects
ID: 40344679
I don't know yet, we'll work on it later.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question