Php / Html - How can I draw a graph of an array?

Question

I found mean, mode, median and standard deviation of an array. Now I want to show them in a graph. I want to draw a line chart of array and point the mean, mode, median and standard deviation. I tried something below just x and y axis appeared not digits on it, I'm kind of new on php. I need help to get my array to line chart. Is there anyone who can help me with it ? Thank you.

My Code:

<?php   
echo "Welcome to my project".'<br>'.'<br>'; 
$arr=array(1100,3150,4430,4430,5170,7450,7450,7450,8230);
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 chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Analysis"
    },
    axisY: {
        title: "Variables"
    },
    data: [{
        type: "line",
        arr: <?php echo json_encode($arr, JSON_NUMERIC_CHECK); ?>
    }]
});
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>

Welcome to SO. First off, put all <script> tags inside the <head> of the HTML, and any with src attributes go before your custom code. — Steven Stark
– Steven Stark, Commented Mar 7, 2019 at 23:47
aren't they inside the <head> tag ? I couldn't understand you, sorry @Steven Stark — Tanay Acan
– Tanay Acan, Commented Mar 8, 2019 at 0:27
no, you have <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> as part of your <body>. Put this directly after <head> but before your custom script tag — Steven Stark
– Steven Stark, Commented Mar 8, 2019 at 0:28
too bad, I was hoping that js wasn't loaded yet was the issue. — Steven Stark
– Steven Stark, Commented Mar 8, 2019 at 0:31
I can see the graph but can't see my digits on it. just x and y axis — Tanay Acan
– Tanay Acan, Commented Mar 8, 2019 at 0:32

WhiteHat · Accepted Answer · 2019-03-08 12:28:30Z

1

first, convert your array data to x / y coordinates...

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

then add to the dataPoints key in data

    data: [{
        type: "line",
        dataPoints: data  // <-- add x / y coordinates here
    }]

e.g.

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();

}

see this php fiddle...

http://phpfiddle.org/main/code/d5t2-gunj

answered Mar 8, 2019 at 12:28

WhiteHat

61.3k7 gold badges54 silver badges140 bronze badges

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

1 Comment

Tanay Acan Over a year ago

Hi WhiteHat, thanks a lot for the answer. I forgot to answer you I'm sorry.

Collectives™ on Stack Overflow

Php / Html - How can I draw a graph of an array?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related