Enternal Dynamic JavaScript
<p><a href="http://stackoverflow.com/questions/9703222/php-within-html">Reference Question</a></p>

<p>I am trying to have dynamic Javascript and gone thru samples app and <a href="http://www.javascriptkit.com/javatutors/externalphp.shtml" rel="nofollow">tutorials</a>.</p>

<p>My sample program like below works properly as expected:</p>

<p>x.html</p>

<pre><code>&lt;html&gt;
        &lt;head&gt;
                &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
                &lt;title&gt;Highcharts Example&lt;/title&gt;


                &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
                &lt;script type="text/javascript" src="myfile.php"&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
                &lt;p&gt;If you click on me, I will disappear.&lt;/p&gt;
                &lt;p&gt;If you click on me, I will disappear.&lt;/p&gt;
                &lt;p&gt;Click me away!&lt;/p&gt;
                &lt;p&gt;Click me too!&lt;/p&gt;
        &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>While myfile.php code is:</p>

<pre><code>&lt;?php
Header("content-type: application/x-javascript");
$out="$(document).ready(function(){\n";
$out.="$(\"p\").click(function(){\n";
$out.="$(this).hide();\n";
$out.="});\n";
$out.="});\n";
echo $out;
?&gt;
</code></pre>

<p>As I refer in browser x.html file</p>

<p>I am trying to use the same concept for creating HighCharts column drill down charts due to some requirement I need to make the HighChart data as dynamic for constructing dynamic data for the chart.</p>

<p>So I have the x.html file like now</p>

<pre><code>&lt;html&gt;
        &lt;head&gt;
                &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
                &lt;title&gt;Highcharts Example&lt;/title&gt;


                &lt;!-- 1. Add these JavaScript inclusions in the head of your page --&gt;
                &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
                &lt;script type="text/javascript" src="highcharts/js/highcharts.js"&gt;&lt;/script&gt;
                &lt;script type="text/javascript" src="html.php"&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;

                &lt;!-- 3. Add the container --&gt;
                &lt;div id="container" style="width: 800px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
        &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Now my html.php file has:</p>

<p>html.php</p>

<pre><code>&lt;?php
Header("content-type: application/x-javascript");
$out="&lt;script type=\"text/javascript\"&gt;\n";
$out.="var chart;\n";
$out.="$(document).ready(function() {\n";
$out.="\n";
$out.="   var colors = Highcharts.getOptions().colors,\n";
$out.="      categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],\n";
$out.="      name = 'Browser brands',\n";
$out.="      level = 0,\n";
$out.="      data = [{\n";
$out.="            y: 55.11,\n";
$out.="            color: colors[0],\n";
$out.="            drilldown: {\n";
$out.="               level: 1,\n";
$out.="               name: 'MSIE versions',\n";
$out.="               categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],\n";
$out.="               color: colors[0],\n";
$out.="               data: [{\n";
$out.="                   y: 33.06,\n";
$out.="                   drilldown: {\n";
$out.="                       level: 2,\n";
$out.="                       name: 'drilldown next next level',\n";
$out.="                       categories: ['a', 'b', 'c'],\n";
$out.="                       color: colors[0],\n";
$out.="                       data: [{\n";
$out.="                               y: 33.06,\n";
$out.="                               color: colors[0],\n";
$out.="                               drilldown: {\n";
$out.="                                       level: 3,\n";
$out.="                                       name: 'drilldown next next next level',\n";
$out.="                                       categories: ['a', 'b', 'c'],\n";
$out.="                                       data: [23,54,47],\n";
$out.="                                       color: colors[0]\n";
$out.="                                }\n";
$out.="                        },10.85, 7.35],\n";
$out.="                       }\n";
$out.="                        },2.41,7.35,10.85],\n";
$out.="                   }\n";
$out.="         }, {\n";
$out.="             y: 21.63,\n";
$out.="            color: colors[1],\n";
$out.="            drilldown: {\n";
$out.="               name: 'Firefox versions',\n";
$out.="               categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],\n";
$out.="               data: [13.52, 5.43, 1.58, 0.83, 0.20],\n";
$out.="               color: colors[1]\n";
$out.="            }\n";
$out.="         }, {\n";
$out.="            y: 11.94,\n";
$out.="            color: colors[2],\n";
$out.="            drilldown: {\n";
$out.="               name: 'Chrome versions',\n";
$out.="               categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',\n";
$out.="                  'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],\n";
$out.="               data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],\n";
$out.="               color: colors[2]\n";
$out.="            }\n";
$out.="         }, {\n";
$out.="            y: 7.15,\n";
$out.="            color: colors[3],\n";
$out.="            drilldown: {\n";
$out.="               name: 'Safari versions',\n";
$out.="               categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',\n";
$out.="                  'Safari 3.1', 'Safari 41'],\n";
$out.="               data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],\n";
$out.="               color: colors[3]\n";
$out.="            }\n";
$out.="         }, {\n";
$out.="            y: 2.14,\n";
$out.="            color: colors[4],\n";
$out.="            drilldown: {\n";
$out.="               name: 'Opera versions',\n";
$out.="               categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],\n";
$out.="               data: [1.65, 0.37, 0.12],\n";
$out.="               color: colors[4]\n";
$out.="            }\n";
$out.="         }];\n";
$out.="\n";
$out.="   function setChart(name, categories, data, color) {\n";
$out.="      chart.xAxis[0].setCategories(categories);\n";
$out.="      chart.series[0].remove();\n";
$out.="      chart.addSeries({\n";
$out.="         name: name,\n";
$out.="         data: data,\n";
$out.="         color: color || 'white'\n";
$out.="      });\n";
$out.="   }\n";
$out.="\n";
$out.="   chart = new Highcharts.Chart({\n";
$out.="      chart: {\n";
$out.="         renderTo: 'container',\n";
$out.="         type: 'column'\n";
$out.="      },\n";
$out.="      title: {\n";
$out.="         text: 'Browser market share, April, 2011'\n";
$out.="      },\n";
$out.="      subtitle: {\n";
$out.="         text: 'Click the columns to view versions. Click again to view brands.'\n";
$out.="      },\n";
$out.="      xAxis: {\n";
$out.="         categories: categories\n";
$out.="      },\n";
$out.="      yAxis: {\n";
$out.="         title: {\n";
$out.="            text: 'Total percent market share'\n";
$out.="         }\n";
$out.="      },\n";
$out.="      plotOptions: {\n";
$out.="         column: {\n";
$out.="            cursor: 'pointer',\n";
$out.="            point: {\n";
$out.="               events: {\n";
$out.="                  click: function() {\n";
$out.="\n";
$out.="                     var drilldown = this.drilldown;\n";
$out.="                     if (drilldown) { // drill down\n";
$out.="\n";
$out.="                         this.series.chart.setTitle({\n";
$out.="                             text: drilldown.name\n";
$out.="                         });\n";
$out.="\n";
$out.="                        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);\n";
$out.="                     } else { // restore\n";
$out.="                        this.series.chart.setTitle({\n";
$out.="                                text: chart.name\n";
$out.="                         });\n";
$out.="                        setChart(name, categories, data);\n";
$out.="                     }\n";
$out.="                  }\n";
$out.="               }\n";
$out.="            },\n";
$out.="            dataLabels: {\n";
$out.="               enabled: true,\n";
$out.="               color: colors[0],\n";
$out.="               style: {\n";
$out.="                  fontWeight: 'bold'\n";
$out.="               },\n";
$out.="               formatter: function() {\n";
$out.="                  return this.y +'%';\n";
$out.="               }\n";
$out.="            }\n";
$out.="         }\n";
$out.="      },\n";
$out.="      tooltip: {\n";
$out.="         formatter: function() {\n";
$out.="            var point = this.point,\n";
$out.="               s = this.x +':&lt;b&gt;'+ this.y +'% market share&lt;/b&gt;&lt;br/&gt;';\n";
$out.="            if (point.drilldown) {\n";
$out.="               s += 'Click to view '+ point.category +' versions';\n";
$out.="            } else {\n";
$out.="               s += 'Click to return to browser brands';\n";
$out.="            }\n";
$out.="            return s;\n";
$out.="         }\n";
$out.="      },\n";
$out.="      series: [{\n";
$out.="         name: name,\n";
$out.="         data: data,\n";
$out.="         color: 'white'\n";
$out.="      }],\n";
$out.="      exporting: {\n";
$out.="         enabled: false\n";
$out.="      }\n";
$out.="   });\n";
$out.="\n";
$out.="\n";
$out.="});\n";
$out.="&lt;/script&gt;\n";
$out.="\n";
echo $out
?&gt;
</code></pre>

<p>Now loading x.html page in browser is giving me below errors:</p>

<p>1st time:</p>

<pre><code>syntax error:    var colors = Highcharts.getOptions().colors,
</code></pre>

<p>So I move my 'var colors' to outside the Jquery document ready fumction like:</p>

<pre><code>$out="&lt;script type=\"text/javascript\"&gt;\n";
$out.="var chart;\n";
$out.="var colors;\n";
$out.="$(document).ready(function() {\n";
$out.="\n";
$out.="   colors = Highcharts.getOptions().colors,\n";
</code></pre>

<p>But now when I run the x.chtml page I get:</p>

<pre><code>missing } in XML expression :          }]; (Line 77)
</code></pre>

<p>Note that when I put the whole JS as in x.html file it works fine but I tried hard and not sure whats the issue with my code and how can I make it to work</p>

<p>==================================================================================</p>

<p>Adding the original working HTML file:</p>

<p>x.html</p>

<pre><code>&lt;html&gt;
        &lt;head&gt;
                &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
                &lt;title&gt;Highcharts Example&lt;/title&gt;


                &lt;!-- 1. Add these JavaScript inclusions in the head of your page --&gt;
                &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
                &lt;script type="text/javascript" src="highcharts/js/highcharts.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var chart;
$(document).ready(function() {
   var colors = Highcharts.getOptions().colors,
      categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
      name = 'Browser brands',
      data = [{
            y: 55.11,
            color: colors[0],
            drilldown: {
               name: 'MSIE versions',
               categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
               data: [{
                   y: 33.06,
                   drilldown: {
                       name: 'drilldown next level',
                       categories: ['a', 'b', 'c'],
                       data: [23,54,47],
                       color: colors[0]
                   }
               }, 10.85, 7.35, 2.41],
               color: colors[0]
            }
         }, {
             y: 21.63,
            color: colors[1],
            drilldown: {
               name: 'Firefox versions',
               categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
               data: [13.52, 5.43, 1.58, 0.83, 0.20],
               color: colors[1]
            }
         }, {
            y: 11.94,
            color: colors[2],
            drilldown: {
               name: 'Chrome versions',
               categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',
                  'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
               data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
               color: colors[2]
            }
         }, {
            y: 7.15,
            color: colors[3],
            drilldown: {
               name: 'Safari versions',
               categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                  'Safari 3.1', 'Safari 41'],
               data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
               color: colors[3]
            }
         }, {
            y: 2.14,
            color: colors[4],
            drilldown: {
               name: 'Opera versions',
               categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
               data: [1.65, 0.37, 0.12],
               color: colors[4]
            }
         }];

   function setChart(name, categories, data, color) {
      chart.xAxis[0].setCategories(categories);
      chart.series[0].remove();
      chart.addSeries({
         name: name,
         data: data,
         color: color || 'white'
      });
   }

   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         type: 'column'
      },
      title: {
         text: 'Browser market share, April, 2011'
      },
      subtitle: {
         text: 'Click the columns to view versions. Click again to view brands.'
      },
      xAxis: {
         categories: categories
      },
      yAxis: {
         title: {
            text: 'Total percent market share'
         }
      },
      plotOptions: {
         column: {
            cursor: 'pointer',
            point: {
               events: {
                  click: function() {

                     var drilldown = this.drilldown;
                     if (drilldown) { // drill down

                         this.series.chart.setTitle({
                             text: drilldown.name
                         });

                        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                     } else { // restore
                        this.series.chart.setTitle({
                                text: chart.name
                         });
                        setChart(name, categories, data);
                     }
                  }
               }
            },
            dataLabels: {
               enabled: true,
               color: colors[0],
               style: {
                  fontWeight: 'bold'
               },
               formatter: function() {
                  return this.y +'%';
               }
            }
         }
      },
      tooltip: {
         formatter: function() {
            var point = this.point,
               s = this.x +':&lt;b&gt;'+ this.y +'% market share&lt;/b&gt;&lt;br/&gt;';
            if (point.drilldown) {
               s += 'Click to view '+ point.category +' versions';
            } else {
               s += 'Click to return to browser brands';
            }
            return s;
         }
      },
      series: [{
         name: name,
         data: data,
         color: 'white'
      }],
      exporting: {
         enabled: false
      }
   });


});
                &lt;/script&gt;

        &lt;/head&gt;
        &lt;body&gt;

                &lt;!-- 3. Add the container --&gt;
                &lt;div id="container" style="width: 800px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;


        &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>This one works completely fine.</p>

<p>Even after changing the header type to html I get the same two errors:</p>

<p><img src="http://i.stack.imgur.com/FDqUw.png" alt="Firebug error number 1"></p>

<p><img src="http://i.stack.imgur.com/6WeLF.png" alt="Firebug error number 2"></p>

<p>==================================================================================
!!!!SOLVED SOLVED SOLVED!!!!</p>

<p>The issue was that I was having below code in my html.php file: </p>

<pre><code>$out="&lt;script type=\"text/javascript\"&gt;\n"; 
..................................
$out="&lt;/script&gt;\n"; 
</code></pre>

<p>And the script tag again my x.html file to include JS script as in html.php file:</p>

<pre><code>&lt;script type="text/javascript" src="html.php"&gt;&lt;/script&gt;
</code></pre>

<p>So the part of dump by PHP in x.html was like something like below:</p>

<pre><code>&lt;script type="text/javascript" src="html.php"&gt;
   &lt;script type="text/javascript"&gt;
 ....................................
   &lt;/script&gt;
&lt;/script&gt;
</code></pre>

<p>Removing the extra script tag from the PHP code helped me. Which now became something like this in final x.html page:</p>

<pre><code>&lt;script type="text/javascript" src="html.php"&gt;
 ....................................
&lt;/script&gt;
</code></pre>

<p>And it worked. Please let me know if this correct implementation</p>

<p>Anyway thanks folks .. for all your responses</p>
