Creating an array to make a graph (Math)

[The Little Guy]

I have the following code:

 

private function buildJSResponse(){
$data = "";
$i = 0;
$arr = array();
while($this->db->row()){
	$arr[] = (int)$this->db->field("average");
}
$this->max = max($arr);
$this->min = min($arr);
$this->mid = round(($this->max + $this->min) / 2);
foreach($arr as $val){
	$nTime = ($val / $this->max) * 100;
	$data .= "data[$i] = ".$nTime.";";
	$i++;
}
return $data;
}

 

It takes an array, finds the max/min and number halfway between the min/max.

The next part I am not sure what to do.

 

I am making a line graph using the canvas, so I am building a javascript array, which will contain the point on the chart. The problem I am having, is location.

Lets say $max = 110, and $min = 95.

the y position on the graph should be 0 for $max, and 100 for $min, then all the other points need to fall into their place as well.

 

$nTime is supposed to do that, but it doesn't any suggestions?

 

The attachment is the result I am getting from my above code.

As you can see the lowest number is 49, so the value with 49 should touch the bottom, which it doesn't.

[The Little Guy]

Anyone?

[SergeiSS]

I understand nothing at all...

 

- You are talking about javascript array (?), in the same time you are showing the PHP code and you are asking in "PHP coding".

- You don't show the code that create that graph - did you create it in JS or in PHP?

- What advice, what about do you like to hear?

[The Little Guy]

Okay, I have a database filled with data (very small sampling of data):

 

mysql> select ping_id, domain_id, loss, average from ping_history where domain_id = 1 order by ping_id desc limit 20;
+---------+-----------+------+---------+
| ping_id | domain_id | loss | average |
+---------+-----------+------+---------+
|    8983 |         1 |    0 | 93ms    |
|    8981 |         1 |    0 | 98ms    |
|    8977 |         1 |    0 | 105ms   |
|    8974 |         1 |    0 | 93ms    |
|    8971 |         1 |    0 | 93ms    |
|    8968 |         1 |    0 | 95ms    |
|    8965 |         1 |    0 | 96ms    |
|    8961 |         1 |    0 | 93ms    |
|    8959 |         1 |    0 | 97ms    |
|    8956 |         1 |    0 | 93ms    |
|    8953 |         1 |    0 | 94ms    |
|    8950 |         1 |    0 | 95ms    |
|    8947 |         1 |    0 | 95ms    |
|    8944 |         1 |    0 | 99ms    |
|    8941 |         1 |    0 | 94ms    |
|    8938 |         1 |    0 | 98ms    |
|    8935 |         1 |    0 | 94ms    |
|    8932 |         1 |    0 | 94ms    |
|    8929 |         1 |    0 | 96ms    |
|    8927 |         1 |    0 | 96ms    |
+---------+-----------+------+---------+
20 rows in set (0.04 sec)

 

From that data, I am using the last column that contains: 94ms, 105ms, etc.

 

I then take that data and build a javascript array using php:

 

<scrip type="text/javascript">
<?php
$stats = Stats();
$domain_id = (int)$_GET['domain_id'];
echo $stats->jsHourlyResponseTimes($domain_id);
?>
</script>

 

jsHourlyResponseTimes() does a query on the database, then passes the data to a second method to build the javascript array (as seen above):

private function buildJSResponse(){
$data = "";
$i = 0;
$arr = array();
while($this->db->row()){
	$arr[] = (int)$this->db->field("average");
}
if(empty($arr))
	return "";
$this->max = max($arr);
$this->min = min($arr);
$this->mid = round(($this->max + $this->min) / 2);
foreach($arr as $val){
	$nTime = (($val / $this->max) * 100);
	$data .= "data[$i] = ".$nTime.";";
	$i++;
}
return $data;
}

 

when it is all complete I get an array that currently looks like this:

 

<script type="text/javascript">
var data = new Array();
data[0] = 100;
data[1] = 87.619047619048;
data[2] = 88.571428571429;
data[3] = 89.52380952381;
data[4] = 88.571428571429;
data[5] = 89.52380952381;
// and so on....
draw(data);
</script>

 

each key is the vertical line to place the point on (spaced depending on the number of results returned), and each value is the y position.

 

So within that data set, say the lowest number is 5 and the highest number is 20. instead of the value being 5, or a percentage I would like it to be 100 (since my graph is 100 px tall). Instead of 20 being 20 or the percentage it should be 0.

 

Using that, I would like results that are like so:

<script type="text/javascript">
var data = new Array();
data[0] = 25.62; // real number is about 8
data[1] = 87.6190; // real number is about 6
data[2] = 100; // real number is 20
data[3] = 0; // real number is 5
data[4] = 13;  // real number is about 6
data[5] = 89.52380952381; // real number is about 18
// and so on....
draw(data);
</script>

 

In each comment the "real number" is the one that came from the database, while the value is where is should be located on the graph.

 

No number should EVER be larger than 100, and no number should EVER be smaller than 0

[Andy-H]

$nTime = ($val / ( $max - $min )) * 100;

[The Little Guy]

Nope, that gives me numbers in the 1k's

 

Here is the page if it helps anyone:

http://stats.weblyize.com/info/phpsnips.com/uptime/responseTimes

[gizmola]

Here's one solution:

$scale = $this->max - $this->min;
$pixels = 100;
foreach($arr as $val){
	$nTime = round(($val - $this->min) * $pixels / $scale); 
	$data .= "data[$i] = ".$nTime.";";
	$i++;
}

[The Little Guy]

Sweet! That look like it is perfect!

 

Thanks so much!