Connecting php variables with javascript

Question

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>


<?php
$con = mysqli_connect('localhost', 'root', '', 'Materniteti');
$f = "select count(*) as f from neonatologji where gjinia=1"; 
$m = "select count(*) as m from neonatologji where gjinia=2"; 

 $result=$con->query($f);
 $row = $result->fetch_assoc();
$f =  $row["f"];

$resultati=$con->query($m);
 $row1 = $resultati->fetch_assoc();
$m = $row1["m"];



?>

<script type="text/javascript">  

$(document).ready(function () {

    // Build the chart
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Statistikat e gjinise se bebeve'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Vajza',
                y: 22
            }, {
                name: 'Djem',
                y: 6,
                sliced: true,
                selected: true
            }]
        }]
    });
});
</script>

Hello there! Is there a way to connect javascript with php because i need the value that $f saves to be the value instesd of this one y: 22 and the $m to be instead of the y=6. I tried it with json encode but it didnt work or probably i wrote it wrong but I can't fint the mistake. Can someone pls help?

Answer 1

You can save that php values in hidden html input tags like

<input type ="hidden" id="var1" value="<?php echo $f;?>">
<input type ="hidden" id="var2" value="<?php echo $m;?>">

and in javascript we can get the values by

var f = $('#var1').val();
var m = $('#var2').val();

Answer 2

Its quite simple and straight forward to to just echo of variable in php tags.

Something like below.

<script type="text/javascript">  

$(document).ready(function () {

    // Build the chart
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Statistikat e gjinise se bebeve'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Vajza',
                y: '<?php echo $f; ?>'
            }, {
                name: 'Djem',
                y: '<?php echo $m; ?>',
                sliced: true,
                selected: true
            }]
        }]
    });
});
</script>

NOTE : You can access php variable in JS only if your file is of php extension. Else you can declare global vars in js having php value and can access in any JS file.