Pass php variables to morris.js [duplicate]

Question

This question already has answers here:

How do I pass variables and data from PHP to JavaScript? (20 answers)

Closed 8 years ago.

Hi I have a fair experience in javascript and I am stuck in the following situation.
I am developing a PHP page to display some values in a graph. I am using morris.js.

Now as morris.js uses array in following format to display as a graph:

// AREA CHART
            var area = new Morris.Area({
                element: 'revenue-chart',
                resize: true,
                data: [
                    {y: '2011', purchase: 500, sale: 1000, profit: 500},
                    {y: '2012', purchase: 600, sale: 1100, profit: 500},
                    {y: '2013', purchase: 500, sale: 1050, profit: 550}
                ],
                xkey: 'y',
                ykeys: ['profit', 'purchase', 'sale'],
                labels: ['Profit', 'Purchase', 'Sale'],
                lineColors: ['#a0d0e0', '#3c8dbc', '#ac5bc3'],
                hideHover: 'auto'
            });

But I have those values in php variable like:

$year1 = '2011';
$sale1 = '1000';
$purchase1 = '500';
$profit1 = '500';

$year2 = '2012';
$sale2 = '1200';
$purchase2 = '600';
$profit2 = '500';

$year3 = '2013';
$sale3 = '1050';
$purchase3 = '500';
$profit3 = '550';

How can I pass those php values to js. I tried json_encode() but it didn't work form me.

UPDATE: Displaying updated code with Luke Cordingley's answer, still have problem with it.

        <script type="text/javascript">
        window.MyProjectNamespace.phpVars = <?
                $phpVars = array('year' => '2011', 'purchase' => '1000', 'sale' => '600', 'profit' => '400');
                echo json_encode($phpVars);
                ?>
    </script>

    <script type="text/javascript">
        $(function() {

            // AREA CHART
            var area = new Morris.Area({
                element: 'revenue-chart',
                resize: true,
                data: [
                    {y: window.MyProjectNamespace.phpVars.year, purchase: "500", sale: "1000", profit: "500"},
                    {y: "2012", purchase: "600", sale: "1100", profit: "500"},
                    {y: "2013", purchase: "500", sale: "1050", profit: "550"}
                ],
                xkey: 'y',
                ykeys: ['profit', 'purchase', 'sale'],
                labels: ['Profit', 'Purchase', 'Sale'],
                lineColors: ['#a0d0e0', '#3c8dbc', '#000000'],
                hideHover: 'auto'
            });
    });

Answer 1

You need to dynamically generate your javascript or as I prefer, create a JavaScript object that corresponds to my PHP variables. Once you get your PHP vars into JavaScript simply pass them to any JavaScript methods as needed. Here is an example of how to get your PHP variables in JavaScript:

<script type="text/javascript">
    $(function() {
         window.MyProjectNamespace = {};
         window.MyProjectNamespace.phpVars = <?php
            $phpVars = array('year' => '2011', 'purchase' => '1000', 'sale' => '600', 'profit' => '400');
            echo json_encode($phpVars);
            ?>;

        // AREA CHART
        var area = new Morris.Area({
            element: 'revenue-chart',
            resize: true,
            data: [
                {y: window.MyProjectNamespace.phpVars.year, purchase: "500", sale: "1000", profit: "500"},
                {y: "2012", purchase: "600", sale: "1100", profit: "500"},
                {y: "2013", purchase: "500", sale: "1050", profit: "550"}
            ],
            xkey: 'y',
            ykeys: ['profit', 'purchase', 'sale'],
            labels: ['Profit', 'Purchase', 'Sale'],
            lineColors: ['#a0d0e0', '#3c8dbc', '#000000'],
            hideHover: 'auto'
        });
    });
</script>

Answer 2

You should use ajax in your javascript to get variables from server side.

if you use jquery:

 $.ajax({
     type     : "POST",
     url      : "get_my_Variable.php",
     dataType: "json",
     data     : {hello:'i`m'},
     success : function(msg) {
         // here u get your variables
     },
     complete : function(r) {
     },
     error:    function(error) {
     }
 });

in server side:

 if(isset($_POST['hello'])){
    echo json_encode($myVariables);
 }