How to pass php variables with database values inside a javascript function? [duplicate]

Question

I am having a tough time figuring out how to do this. I've been through several searching in the web and tried some example but couldn't get this right. I am using codeigniter framework, and I want to pass database values from foreach loop in my view file to javascript function in "categories" and "data" portion as a parameter for the graph and not static values. How I may be able to pass database values $row->Time_Period; and $row->Data_Value; from the body of my view file to javascript function portion "categories" and "data"? or is there other approach to handle this? Can someone please help me with this? Thanks a lot. Below are my codes.

Javascript Function

<script type="text/javascript">
$(function () {
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'RDI SYSTEM'
        },

        xAxis: {
            categories: ['2012','2013']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Values'
            }
        },

        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [ {
            name: 'jun',
            data: [3000,2000],
            stack: 'male'
        }]
      });
    });


</script>

View file:

 <?php
  $submit=array('class'=>'btn','name'=>'submit','id'=>'submit','value'=>'Submit');
  $indicator=array('name'=>'indicator','id'=>'indicator','value'=>'','placeholder'=>'Indicator Name');
  $description=array('name'=>'description','id'=>'description','value'=>'','placeholder'=>'Description');
  ?>
  <?php
  $subsector_dropdown=array('0'=>'Select Sub-Sector');
  $classes_dropdown=array('0'=>'Select Class');
  $indicator_dropdown=array('0'=>'Select Indicator');
  ?>
<div class="hero-unit">
  <div class="row-fluid">

  <div class="span2"> <label><strong><h3>No.Of Rows:</h3></strong></label></div>
  <div id="numrows" class="span1">
  <h3 class="numrows"><strong><?php echo $total_rows; ?></strong></h3>
  </div>
  <div class="span7"> <h1><?php echo "List of Infrastructure Data"; ?></h1></div>

  </div>
<div class="row-fluid">
  <div class="span3"><i class="icon-plus"></i>&nbsp;<a href='<?php echo site_url('rdi_controller/insert_infra')?>'><strong>Add Infrastructure Data</strong></a></div>
 <?php
  $indicator_dropdown=array('0'=>'Select Indicators');
  $year_dropdown=array('0'=>'Select Years','1'=>'Select All');
  ?>

  <div class="span4">
      <h2> <?php echo form_open('rdi_controller/infra');?>

       <div class="input-append">
        <?php echo form_dropdown("area_name",$area_name_dropdown,'','id="area_id" style="width:50%;height:130%"'); ?>&nbsp;&nbsp;
        <?php echo form_dropdown("indicator",$indicator_dropdown,'','id="indicator_id" style="width:50%;height:130%"'); ?>&nbsp;&nbsp;
        <?php echo form_dropdown("year",$year_dropdown,'','id="year_id" style="width:30%;height:130%"'); ?>&nbsp;&nbsp;
        <input type="submit" class="btn btn-primary btn-medium" id="submit" name="search" value="Search"><button class="btn btn-primary btn-xlarge" type="button" id="displayAll" onclick="reload()">Display All</button>
        </div>



       <?php echo form_close();?> </h2>
<table class="table table-stripe">
        <tr>
        <td><a href='<?php echo site_url('rdi_controller/Infra_export_to_pdf')?>'> <img src="<?php echo base_url('img/pdf.png'); ?> " width="35" height="35" title="Export to PDF File"/></a><a href='<?php echo site_url('rdi_controller/Infra_export_to_Excel')?>'> <img src="<?php echo base_url('img/spreadsheet.png'); ?>" width="35" height="35" title="Export to Excel File" class="excel"/> </a></td>

        </tr>

      </table>
  </br>

   <table id="tablesorter-demo" class="tablesorter">
   <thead>
   <tr>
      <th><strong>Select</strong></th>
      <th><strong>Sector</strong></th>
      <th><strong>Subsector</strong></th>
      <th><strong>Class</strong></th>
      <th><strong>Indicator</strong></th>
      <th><strong>Data Value</strong></th>
      <th><strong>Unit</strong></th>
      <th><strong>Time Period</strong></th>
      <th><strong>Area Name</strong></th>
      </tr>
   </thead>
<?php foreach($infra as $row){?>

      <tr>
      <td><input type='checkbox' id='chk' name='infra_id[]'  value="<?php echo $row->fusion_id;?>" ></td>
      <td> <?php echo anchor("rdi_controller/infra_update_form/$row->infra_id/",$row->Sector); ?></td>
      <td><?php echo $row->Subsector ;?></td>
      <td><?php echo $row->Classes ;?></td>
      <td><?php echo $row->Indicator ;?></td>
      <td><?php echo $row->Data_Value ;?></td>
      <td><?php echo $row->Unit ;?></td>
      <td><?php echo $row->Time_Period ;?></td>
      <td><?php echo $row->Area_Name ;?></td>

      </tr>
  <?php }?>
  </table>
   <div class='row'>
      <div class='span2 '><strong>Total Rows</strong> </div>
      <div class='span1 ' colspan=6><strong><?php echo $total_rows; ?></strong></div>
  </div>

Output:

Answer 1

This is what I did on how to access php variables including array variables containing database values in javascript function. I also used the implode function to separate array values with comma character. Here is my code

<?php



 $arrVal=implode(",",$infra_data_values);
 $arrYears=implode(",",$infra_time_period);
 $arrIndicator=implode(" and ",$infra_indicator);


?>
  <?php echo '<script type="text/javascript">


  $(function () {

    $(\'#container\').highcharts({

        chart: {
            type: \'column\'
        },

        title: {
            text:[\''.$arrIndicator.'\']
        },

        xAxis: {
            categories: ['. $arrYears . ']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: \'Values\'
            }
        },

        tooltip: {
            formatter: function() {
                return \'<b>\'+ this.x +\'</b><br/>\'+
                    this.series.name +\': \'+ this.y +\'<br/>\'+
                    \'Total: \'+ this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: \'normal\'
            }
        },

        series: [ {
            name: \''.$arrIndicator.'\',
            data: ['. $arrVal . '],
            stack: \'male\'
        }]
    });

});

</script>'; ?>

Putting javascript function wrapped inside echo statement, then putting back slash before the quotes in every statement inside the js function.

Answer 2

Why not use the below approach?

<script type="text/javascript">
var foo = "<?php echo $db['some_var']; ?>";
</script>

Answer 3

The easiest way I know is to store the comma-separated values in a PHP variable, then echo those variables in your JavaScript. This means you are going to have to loop through whatever database query results you are using to set those values. Once those PHP variables are set up, just do this:

xAxis: {
    categories: [<?php echo $categoriesData; ?>]
},

and

series: [ {
    name: 'jun',
    data: [<?php echo $dataData; ?>],
    stack: 'male'
}]