Как передать результаты php в диаграммы JavaScript

Question

Я хочу передать результаты php в диаграммы JavaScript.

<script>
<?php foreach ($hourlyreport as $val) {?>
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
  "dataProvider": [ {
    "country": "totalstaff",
    "litres": <?php echo $val->totalstaff;?>
  }, {
    "country": "totaltasks",
    "litres": <?php echo $val->totaltasks;?>
  }, {
    "country": "completed tasks",
    "litres": <?php echo $val->is_completed;?>
  }, {
    "country": "pendingtasks",
    "litres": <?php echo $pending;?>
  }
],
  "valueField": "litres",
  "titleField": "country",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} );
<?php } ?>
</script>

Это мой скрипт, я передаю результаты foreach в эти графики. На стороне клиента HTML-страница имеет следующий код:

<div id="chartdiv">           
</div>

Answer 1

Вы запускаете цикл для всего объекта диаграммы, поэтому попытайтесь создать несколько объектов диаграммы. Вот почему он не работает. Я сделал это в моем проекте.
Попробуйте это, это будет работать для вас

<script>

    var chart = AmCharts.makeChart( "chartdiv", {
            "type": "pie",
            "theme": "light",
            "dataProvider": [
                <?php foreach ($hourlyreport as $val) {?>
                {
                "country": "totalstaff",
                "litres": '<?php echo $val->totalstaff;?>'
            }, {
                "country": "totaltasks",
                "litres": '<?php echo $val->totaltasks;?>'
            }, {
                "country": "completed tasks",
                "litres": '<?php echo $val->is_completed;?>'
            }, {
                "country": "pendingtasks",
                "litres": '<?php echo $pending;?>'
            }
                <?php } ?>
            ],
            "valueField": "litres",
            "titleField": "country",
            "balloon":{
                "fixedPosition":true
            },
            "export": {
                "enabled": true
            }
        } );
     </script>

Answer 2

<?php 
$value='';
foreach ($hourlyreport as $val) { 
$value='{
  "type": "pie",
  "theme": "light",
  "dataProvider": [ {
    "country": "totalstaff",
    "litres": <?php echo $val->totalstaff;?>
  }, {
    "country": "totaltasks",
    "litres": <?php echo $val->totaltasks;?>
  }, {
    "country": "completed tasks",
    "litres": <?php echo $val->is_completed;?>
  }, {
    "country": "pendingtasks",
    "litres": <?php echo $pending;?>
  }
],
  "valueField": "litres",
  "titleField": "country",
   "balloon":{
   "fixedPosition":true
  },
  "export": {
    "enabled": true
  }
} ' ;
  } ?>
<script>
var chart = AmCharts.makeChart( "chartdiv",<?php echo $value;?>);
</script>

OutPut

<script> var chart = AmCharts.makeChart( "chartdiv",{ "type": "pie", "theme": "light", "dataProvider": [ { "country": "totalstaff", "litres": $val->totalstaff; }, { "country": "totaltasks", "litres": $val->totaltasks; }, { "country": "completed tasks", "litres": $val->is_completed; }, { "country": "pendingtasks", "litres": $pending; } ], "valueField": "litres", "titleField": "country", "balloon":{ "fixedPosition":true }, "export": { "enabled": true } } ); </script>