AJAX/PHP/JavaScript Problem.

Discussion in 'Programming' started by jfontestad, Aug 29, 2012.

0
  1. #1
    I'm trying to load a chart that gets it data from a DB.

    I'm currently using ajax to do this and it works fine if it is displayed in a table, but once I try to display the chart, the chart isn't rendered.

    If I run the script.php alone, the chart is rendered. All text and everything else works fine, just seems as if the javascript that is being loaded via AJAX isn't running for some reason.

    Any help will be greatly appreciated.

    Attached below is my code.


    index.php
    <html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!

	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var year = document.getElementById('year').value;
	var segment = document.getElementById('segment').value;

	var queryString = "?y=" + year + "&s=" + segment;
	ajaxRequest.open("GET", "script.php" + queryString, true);
  
  var ajaxDisplay = document.getElementById("ajaxDiv");
  ajaxDisplay.innerHTML = "<center><img src='ajax-loader.gif' /></center>"
	ajaxRequest.send(null); 
}

//-->
</script>


<center>
<form name='myForm'>
Year: <input type='text' id='year' /> Segment: <input type='text' id='segment' /> <input type='button' onclick='ajaxFunction()' value='&raquo;' />
</form>
<div id='ajaxDiv'>
  Chart will  be displayed here.
</div>
</center>
</body>
</html>
    PHP:
    script.php
    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/modules/exporting.js"></script>

<script type="text/javascript">		
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart_',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: '<?=$seg_name;?> Revenue Comparison',
                x: -20 //center
            },
            subtitle: {
                text: '<?=$from;?> vs. <?=$to;?>',
                x: -20
            },
            xAxis: {
                categories: [<?=$categories;?>]
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });
		</script>    
<div id="chart_" style="width: 850px; height: 350px; margin: 0 auto"></div>
    PHP:
     
    jfontestad, Aug 29, 2012 IP
  2. fastestsms

    fastestsms Greenhorn

    Messages:
    72
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #2
    You should try jQuery to simplify the code man... :)
     
    fastestsms, Aug 30, 2012 IP
  3. hassanahmad2

    hassanahmad2 Active Member

    Messages:
    243
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Try this:
    ajaxRequest.open("GET", "script.php" + encodeURIComponent(queryString), true);
    Code (markup):
     
    hassanahmad2, Aug 31, 2012 IP