mardi 1 novembre 2016

laravel 5 - pass php varaible to jquery or ajax or javascript

I search many in site but i could not find the answer so i post my question. I think for my question has exist easy asnwer but It's first time i use javascript , jquery and ajax and i don't know what to do :(! I use Laravel 5 I have a blade php Page and in this file i have a while that create many < div >s like this chart.blade.php:

<?php $id=0; ?>
@foreach($results as $row)
...

<?php 
 $i++; 
 $allGrade = findData($row);
 echo "<div id=\"container$id\" style=\"...\"></div>";
?>
...
@endforeach

this file create all of my divs with id container1, container2, container3, ... in some case create 100 divs , in some case 1200 divs and it's not constant!

in these divs i want to use a Bar charts , and i use http://highcharts.com/ . One of my question is what is the best way for doing this work? the top of this blade i use this java script function for highchart.js

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ift.tt/Sw98cH"></script>
<style type="text/css">
    $ {
        demo.css
    }
</style>
<script type="text/javascript">
    $(function () {
        for (var i = 0; i < 5000; i++) {
          // Some Alert ****test here ****
            //I put some alert work correctly




            $('#container' + i).highcharts({
                chart: {
                    type: 'bar'
                }
                , title: {
                    text: 'Historic World Population by Region'
                }
                , subtitle: {
                    text: 'Source: <a href="http://ift.tt/1hiu6or">Wikipedia.org</a>'
                }
                , xAxis: {
                    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
                    , title: {
                        text: null
                    }
                }
                , yAxis: {
                    min: 0
                    , title: {
                        text: 'Population (millions)'
                        , align: 'high'
                    }
                    , labels: {
                        overflow: 'justify'
                    }
                }
                , tooltip: {
                    valueSuffix: ' millions'
                }
                , plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                }
                , legend: {
                    layout: 'vertical'
                    , align: 'right'
                    , verticalAlign: 'top'
                    , x: -40
                    , y: 80
                    , floating: true
                    , borderWidth: 1
                    , backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF')
                    , shadow: true
                }
                , credits: {
                    enabled: false
                }
                , series: [{
                    name: 'Year 1800'
                    , data: [107, 31, 635, 203, 2]
    }, {
                    name: 'Year 1900'
                    , data: [133, 156, 947, 408, 6]
    }, {
                    name: 'Year 2012'
                    , data: [JSON.parse('<?php echo json_encode($allGrades[1]); ?>')]
    }]
            });
        }
    });
</script>
</head>

<body>
<div id="container4" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container1"></div> 
. 
.
.

<script src="http://ift.tt/TQup4m"></script>
<script src="http://ift.tt/1rNirHL"></script>
</body>

</html>

The value of allGrade[1] is 20 , and when I use this alert test in Alert test section as below

   var d = <?php echo json_encode($allGrades); ?>; //Don't forget the extra semicolon!
        //alert(d[1]);

  j++;
  var newJ = JSON.parse('<?php echo json_encode($allGrades); ?>');
  var c1 = newJ[1];
  var c2 =newJ[2];
  alert(c1);
  alert(JSON.parse('<?php echo json_encode($allGrades[1]); ?>'));

alerts work and shows data 20 in alert box!

I Expect for Data Year 2012 when i put c1 or put JSON.parse('') the chart data be 20 , But when i put these two items don't work!



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire