0

I have an array;

$arr=array(1100,3150,4430,4430,5170,7450,7450,7450,8230);

I want to show them in graph. I want my Y-Axis as my elements of that array and X-Axis as sum up the numbers until that element. (x1,x1+x2,x1+x2+x3,...)

My graph will be;

Y-Axis : 1100,3150,4430,4430,5170,7450,7450,7450,8230
X-Axis : 1100,4250,8680,13110,18280,25730,33180,40630,48860

But I have no idea about how to do that. Is there anyone who can help me with it ? Thanks.

My entire code:

<?php
echo " ".'<br>'.'<br>'; 
    $arr=array(1100,3150,4430,4430,5170,7450,7450,7450,8230);
$arrtotal=0;


for($i=0; $i<=8; $i++)
{
    if ($arr[$i]<100) {
    $arr[$i]=$arr[$i];
 }
    else
    {
        $arr[$i]=$arr[$i]/1000;
        $arr[$i]=(string)$arr[$i];
    }
}

function calculate($arr, $output){

        switch($output){
            case 'mean':
                $count = count($arr)+1;
                $sum = array_sum($arr);
                $total = $sum / $count;
            break;
            case 'median':
                rsort($arr);
                $middle = (count($arr) / 2)+1;
                $total = $arr[$middle-1];
            break;
            case 'mode':
                $v = array_count_values($arr); 
                arsort($v); 
                foreach($v as $k => $v){$total = $k; break;}

            break;

        }
        return $total;
    }

function sd_square($x, $total) { return pow($x - $total,2); }
function sd($arr) {
    return sqrt(array_sum(array_map("sd_square", $arr, array_fill(0,count($arr), (array_sum($arr) / count($arr)) ) ) ) / (count($arr)-1) );
}

echo '  '.'<br>';
echo "Values: ";
echo json_encode($arr).'<br>';
echo 'Mean: '.calculate($arr, 'mean').'<br>';
echo 'Median: '.calculate($arr, 'median').'<br>';
echo 'Mode: '.calculate($arr, 'mode').'<br>';
echo "Standart Derivation: ".sd($arr);
?>


<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var data = <?php echo json_encode($arr, JSON_NUMERIC_CHECK); ?>;
data = data.map(function (row, index) {
    return {
        x: index,
        y: row
    };
});

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Analysis"
    },
    axisY: {
        title: "Variables"
    },
    data: [{
        type: "line",
        dataPoints: data
    }]
});
chart.render();

}

</script>
</head>
<body>

<div id="chartContainer" style="height: 250px; width: 50%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

In this code my X-Axis is (0,1,2,3,4,5,6,7,8) and I don't want that.

I'm sorry if I couldn't explain well, English is not my native language.

3 Answers 3

1

The simplest way is just to loop over the values, adding the current array value to the previous output value to create the new output value. You can then convert that into an array of [x => y] values using array_combine:

$arr=array(1100,3150,4430,4430,5170,7450,7450,7450,8230);
$out = array($arr[0]);
for ($i = 1; $i < count($arr); $i++) {
    $out[$i] = $out[$i-1] + $arr[$i];
}
$arr = array_combine($out, $arr);
print_r($arr);

Output:

Array (
  [1100] => 1100
  [4250] => 3150
  [8680] => 4430
  [13110] => 4430
  [18280] => 5170
  [25730] => 7450
  [33180] => 7450
  [40630] => 7450
  [48860] => 8230
)

Demo on 3v4l.org

Sign up to request clarification or add additional context in comments.

4 Comments

ohh I was doing $arr[$i]+$arr[$i-1]... that was my mistake. Thanks Nick but I have one more question. Now I have 2 arrays, can I show them in same graph ? ($arr is y-axis and $out is x-axis)
@TanayAcan judging by your code, you probably just need $arr = array_combine($out, $arr);. That will give you an array that looks like [1100 => 1100, 4250 => 3150, 8680 => 4430 ...]
I did array_combine but my array became {"1100":1100,"3150":4250,"4430":13110,"5170":18280,"7450":40630,"8230":48860} it skipped repeated numbers but I need them, what can I do ?
@TanayAcan looks like you did array_combine($arr, $out) instead of array_combine($out, $arr)
1

to get that one array into 2 arrays of graph co-ordinates, you can do this:

$x = array();
$y = array();
$running_total = 0;
for($i = 0; $i < count($arr); $i++){
    $y[$i] = $arr[$i];
    $running_total += $arr[$i];
    $x[$i] = $running_total;
}

This will give you two arrays; array $x that contains a list of your X-coordinates, and $y, that gives you a list of your Y-coordinates; and you will still have access to your original $arr array, should you need to do further calculations on it. Based on your question, I think that will get you what you need.

However, if you are saying you want 1 array where the X co-ordinates are the array indexes, and the value is the array value itself, for example $y[3150] = 4250, then that is impossible; because you have duplicates in your original list, you cannot use those values as array indexes without ending up overwriting them.

(At least, not without making each array value an array itself, but that is taking things an order of magnitude above where is probably necessary)

3 Comments

Thank you TheMouseMaster, your answer is really useful for me. I just have one more question. How can I show those $x and $y in the same graph ? I couldn't do it
sadly, I cannot answer that. I am not familiar with the CanvasJS package you are using :(
I understand, no problem you helped a lot. thank you :)
0

Calculating the running total and storing the data as key-value pairs can be achieved with a foreach() and zero function calls.

Although perhaps a little unorthodox, it is valid syntax to use the "addition assignment" operator as the key of the output array. This updates the $previous value and supplies the calculated value as the key.

Code: (Demo)

$arr = [1100,3150,4430,4430,5170,7450,7450,7450,8230];

$result = [];
$previous = 0;
foreach ($arr as $value) {
    $result[$previous += $value] = $value;
}
var_export($result);
// same result as @Nick's answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.