title: How can I put the Highchart to the html page
body: <p>Extremely newbie question, I'm very new to html and specifically highcharts stuff. So first things first, Ive made this test.php to make a chart appear.</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.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
  $(function () {
  var chart;
  $(document).ready(function() {
      $.getJSON("data.php", function(json) {
  
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container',
                  type: 'line',
                  marginRight: 130,
                  marginBottom: 25
              },
              title: {
                  text: 'Disease',
                  x: -20 //center
              },
              subtitle: {
                  text: '',
                  x: -20
              },
              xAxis: {
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
              },
              yAxis: {
                  title: {
                      text: 'Patient Count'
                  },
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                  }]
              },
              tooltip: {
                  formatter: function() {
                          return '&lt;b&gt;'+ this.series.name +'&lt;/b&gt;&lt;br/&gt;'+
                          this.x +': '+ this.y;
                  }
              },
              legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'top',
                  x: -10,
                  y: 100,
                  borderWidth: 0
              },
              series: json
          });
      });
  
    });
  
   });
      &lt;/script&gt;
    &lt;/head&gt;
      &lt;body&gt;
    &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
   &lt;div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  
     &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Ran by using apache server, the chart appears. Now I want to make this chart appear in a website of mine. So what I do is put the javascript code to the html page, like so</p>
  
  <pre><code> &lt;html&gt;
   &lt;head&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
   &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;          &lt;/script&gt;
   &lt;script src="js/highcharts.js"&gt;&lt;/script&gt;
   &lt;script src="js/highcharts-more.js"&gt;&lt;/script&gt;
   &lt;script src="js/exporting.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
  
   &lt;title&gt;Test Dash&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
  
   &lt;div style="width:500px"&gt;&lt;/div&gt;
  
   &lt;script type="text/javascript"&gt;
  
   //My highchart script
  
   $(function () {
   var chart;
   $(document).ready(function() {
      $.getJSON("data.php", function(json) {
  
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container',
                  type: 'line',
                  marginRight: 130,
                  marginBottom: 25
              },
              title: {
                  text: 'Disease',
                  x: -20 //center
              },
              subtitle: {
                  text: '',
                  x: -20
              },
              xAxis: {
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
              },
              yAxis: {
                  title: {
                      text: 'Patient Count'
                  },
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                  }]
              },
              tooltip: {
                  formatter: function() {
                          return '&lt;b&gt;'+ this.series.name +'&lt;/b&gt;&lt;br/&gt;'+
                          this.x +': '+ this.y;
                  }
              },
              legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'top',
                  x: -10,
                  y: 100,
                  borderWidth: 0
              },
              series: json
          });
           });
  
       });
  
   });
  
   &lt;/script&gt;
  
  
  
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>But the chart wont appear. I even tried to insert a simple, non SQL using chart to the html page, but still failed.</p>
  
  <pre><code> &lt;html&gt;
   &lt;head&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
   &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/highcharts.js"&gt;&lt;/script&gt;
   &lt;script src="js/highcharts-more.js"&gt;&lt;/script&gt;
   &lt;script src="js/exporting.js"&gt;&lt;/script&gt;
   &lt;script src="js/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
  
   &lt;title&gt;Test Dash&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
  
   &lt;div id="container" style="width:500px"&gt;&lt;/div&gt;
  
   &lt;script src="js/highcharts.js" type="text/javascript"&gt;
  
   //example script from highchart website
  
   $(function () { 
   $('container').highcharts({
      chart: {
          type: 'bar'
      },
      title: {
          text: 'Fruit Consumption'
      },
      xAxis: {
          categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
          title: {
              text: 'Fruit eaten'
          }
      },
      series: [{
          name: 'Jane',
          data: [1, 0, 4]
      }, {
          name: 'John',
          data: [5, 7, 3]
      }]
   });
    });
  
   &lt;/script&gt;
  
  
  
  
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>How can I make those highcharts chart appear on my website? I am terribly sorry if this comes as an idiotic question for you guys. </p>