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

0 votes

I discovered an array's mean, mode, median, and standard deviation. Now I'd like to plot them in a graph. I want to create an array line chart and highlight the mean, mode, median, and standard deviation. I tried something below, but only the x and y axes appeared, with no digits; I'm new to php. I need assistance converting my array to a line chart. Is there anyone who can assist me? Thank you very much.

My code is:

<?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> 
Aug 16, 2022 in HTML by Deepak
• 980 points
820 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In HTML

0 votes
0 answers

How do I create an HTML button that acts like a link?

How can I make a button in ...READ MORE

Jul 8, 2022 in HTML by Tejashwini
• 3,820 points
381 views
0 votes
0 answers

How can I change the line spacing for one paragraph in an HTML email template?

I want to add html commands that ...READ MORE

Jul 24, 2022 in HTML by Ashwini
• 5,430 points
657 views
0 votes
0 answers

How can I set the default value for an HTML <select> element?

I believed that by setting the "value" ...READ MORE

Jul 26, 2022 in HTML by Ashwini
• 5,430 points
637 views
+1 vote
1 answer

How can i create simple register form using html and css?

Html5 contains lots of elements using which ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,840 points
4,833 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

In order to ensure that your image ...READ MORE

answered Feb 8, 2022 in HTML by Rahul
• 9,680 points
1,228 views
0 votes
0 answers

Inputting a default image in case the src attribute of an html <img> is not valid?

Is there any way to render a ...READ MORE

Jul 8, 2022 in HTML by Tejashwini
• 3,820 points
614 views
0 votes
1 answer
0 votes
0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17, 2020 in Web Development by anonymous
• 37,520 points
934 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 1,143 views
0 votes
1 answer

What is data binding in AngularJS?

Data binding is synchronization of data between the ...READ MORE

answered Jan 23, 2020 in Web Development by Niroj
• 82,840 points
1,120 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP