Using PHP variables in JavaScript in Highcharts

Question

Possible Duplicate:
Pass a PHP string to a Javascript variable (and escape newlines)

I need to create a bar chart which takes the data from DB. I downloaded Highcharts for that. But I am not able to call php variables in JavaScript. Any Idea how to do that?

And Any other way of creating charts with Dynamic values.

Thanks in advance.

<script>
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y +' mm';
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
                series: [{
                name: 'Tokyo',
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

            }, {
                name: 'New York',
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

            }, {
                name: 'London',
                data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

            }, {
                name: 'Berlin',
                data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

            }]
        });
    });

});
</script>

-1 for no apparent research. There must be a million duplicate questions on this site alone. — SDC, Jan 24 '13 at 12:16
try ez components http://ezcomponents.org/docs/tutorials/Graph#id2 . You pass php array and get all sorts of graphs — v0d1ch, Jan 24 '13 at 12:17
I downloaded highcharts... and I figured it out that they are generating charts through javascript. I tried using php variables instead of static values. It doesn't work. — Saswata Sundar, Jan 24 '13 at 12:17
-1 the title you used comes up with a page full of the same questions as suggestions. No effort shown at all — piddl0r, Jan 24 '13 at 12:17
You could try PHP open chart project but it uses flash to display the chart. Anyway, why do You have problem using PHP variables in JS? You mean the standalone JS file? — shadyyx, Jan 24 '13 at 12:18
I recommend to read the jQuery tutorial: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery. — Felix Kling, Jan 24 '13 at 12:29

Edwin Alex · Accepted Answer · 2013-01-24T12:43:01.020

5

You can use PHP variables inside scripts. See an example below, make your Php array as a string. Then pass it to series data.

   <?php

        $values= array('49.9', '71.5', '106.4', '129.2', '144.0', '176.0', '135.6', '148.5', 216.4, '194.1', '95.6', '54.4');
        $rainValues = implode(",", $values);
    ?>

Then, you can access the string in script.

 series: [{
            name: 'Tokyo',
            data: [<?php echo $rainValues ?>]

        },

edited Jan 24 '13 at 12:43

answered Jan 24 '13 at 12:18

Edwin Alex

5,118
4
28
50

As you can see the above code, I want to use php variables in data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] section. – Saswata Sundar Jan 24 '13 at 12:34
I have edited my answer. Please check it. – Edwin Alex Jan 24 '13 at 12:43
Thanks Edwin...still not showing it...I will carry on...until i get. Thanks again for your help... – Saswata Sundar Jan 24 '13 at 12:54

score 2 · Answer 2 · answered Jan 24 '13 at 12:26

2

For using any PHP variable in JavaScript you need to echo the PHP value and initialize it to JavaScript variable.

<script type="text/javascript">
       var myjsvar= <?php echo $my_phpvar; ?>
</script>

answered Jan 24 '13 at 12:26

Seeker

1,877
4
32
56

score 0 · Answer 3 · answered Jan 24 '13 at 12:17

0

To use php variables in Javascript, you may want something like this:

<?php
$var = 1;
?>

<script>
    var a = <?=$var?>;
</script>

answered Jan 24 '13 at 12:17

luiges90

4,493
2
28
43

Using PHP variables in JavaScript in Highcharts

3 Answers3