JavaScript - Create Graphs/chart

 <script type="text/javascript" charset="utf-8">
        
      var html5rocks = {};
      html5rocks.webdb = {};
      html5rocks.webdb.db = null;
      
      html5rocks.webdb.open = function() {
        var dbSize = 10 * 1024 * 1024; // 10MB
        html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
      }
      
      html5rocks.webdb.createTable = function() {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("ALTER TABLE bmical ADD bmires INTEGER");
          tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 TEXT, weight1 TEXT, bmires TEXT, added_on DATETIME)", []);
        });
      }
      
      html5rocks.webdb.addTodo = function(todoText) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          var weight1 = document.getElementById("weight1").value;
          
        var height2 = todoText / 100
  		var BMI = weight1  / (height2 * height2)
        
        var BMI = BMI;
		var bmires = BMI.toFixed(3);
          
          
          var addedOn = new Date();
          tx.executeSql("INSERT INTO bmical(height1, weight1, bmires, added_on) VALUES (?,?,?,?)",
              [todoText, weight1, bmires, addedOn],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
         });
      }
      
      html5rocks.webdb.onError = function(tx, e) {
        alert("There has been an error: " + e.message);
      }
      
      html5rocks.webdb.onSuccess = function(tx, r) {
        // re-render the data.
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      
      html5rocks.webdb.getAllTodoItems = function(renderFunc) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("SELECT * FROM bmical ORDER BY added_on DESC", [], renderFunc,
              html5rocks.webdb.onError);
        });
      }
      
      html5rocks.webdb.deleteTodo = function(id) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          tx.executeSql("DELETE FROM bmical WHERE ID=?", [id],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
          });
      }
      
      function loadTodoItems(tx, rs) {
        var rowOutput = "";
        var todoItems = document.getElementById("todoItems");
        for (var i=0; i < rs.rows.length; i++) {
          rowOutput += renderTodo(rs.rows.item(i));
        }
      
        todoItems.innerHTML = rowOutput;
      }
      
      
      
      function renderTodo(row) {
        return "<li>On: " + row.added_on + " Height: " + row.height1 + " Weight: " + row.weight1 + " BMI: " + row.bmires + "<a class='delete' href='javascript:void(0);'  onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a></li>";
      }
      
      function init() {
        html5rocks.webdb.open();
        html5rocks.webdb.createTable();
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      function addTodo() {
        var height1 = document.getElementById("height1");
        html5rocks.webdb.addTodo(height1.value);
        height1.value = "";
      }
    </script>

 function drawChart(theDATA)
    {
        var chart = new Highcharts.Chart({
            chart: {renderTo: 'container',defaultSeriesType: 'column'},
            title: {text: 'March 2010 Confirmed User Visit\'s'},
            xAxis: {categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']},
            yAxis: {min: 0,title: {text: 'User Visit\'s'}},
            legend: {layout: 'vertical',backgroundColor: '#FFFFFF',style: {left: '100px',top: '70px',bottom: 'auto'}},
            tooltip: {formatter: function() {return this.y;}},
            plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},
                series: [{name: 'Confirmed Users Visit\'s',
                data: theDATA.split(',')
            }]
        }); 
    }

data: [2,5,4,7,8,9]

theData = "2,5,4,7,8,9"
data: theDATA.split(',')

<span id="loading"><img src="loading.gif" /></span>

<div id="results">which should populate here</div>

<script type="text/javascript">
function loading(){

?

</script>


<input type="button" name="submit" id="submit" onclick="loading();"/>

<script type="text/javascript">
$(document).ready(function() {
    
    $('#submit').click(function(){
     
     //Get the values
     var amount     = $('#amount').val();
     var from       = $('#from').val();
     var to         = $('#to').val();
     
     var params = "amount=" + amount + "&from=" + from + "&to=" + to;
     
     $.ajax({
       type: "POST",
       url: "change.php",
       data: params,
       success: function(data){
            $('#results').html(data).fadeIn("slow");
       }
     });
    });
});
</script>