Script for Google Chart not loading in head of local page.



  • Hi All

    I've having difficulty with a Google Chart using the Header and Footer Scripts wordpress plugin. It's a relatively simple script, and correctly functions without error in a standalone html file.

    I pasted the script portion of the code into the Insert Script to <head> area at the bottom of the wordpress edit page, and the HTML part into a custom HTML code block.

    Any help will be appreciated..

    Best regards,

    Brian

    <html>
    <head>
    <meta charset="UTF-8">
    <title>SIR</title>
    
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
    <script type="text/javascript" >
    	google.charts.load('current', {'packages':['corechart']});
    	google.charts.setOnLoadCallback(drawSIR);
    
    	/* Based on https://www.geeksforgeeks.org/euler-method-solving-differential-equation */
    	function deriv(x, y, args) 
    	{ 
    		S = y[0]
    		I = y[1]
    		R = y[2]
    
    		beta  = args[0]
    		gamma = args[1]
    
    		dSdt = -beta * S * I / N
    		dIdt = beta  * S * I / N - gamma * I
    		dRdt = gamma * I
        	return [dSdt, dIdt, dRdt]
    	} 
      
    	// Function for Euler formula 
    	function  euler(x0, y0, xn, args, h, header) 
    	{ 
        	y=y0 
        	numberCurves= header.length - 1;
        	result  = [header]
      
        	// Iterating over time
        	for(x=x0; x<=xn; x += h) { 
        		row = [x]
        		for (i=0; i<numberCurves; i++) {
        			row.push(y[i])
        		}
        		result.push(row)
        		dydt = deriv(x, y, args)
        		for (i=0; i<numberCurves; i++) {
        			y[i] = y[i] + h * dydt[i]
        		}
            }
    
            return result
        } 
    
    	// Driver program 
    	function drawSIR() 
    	{ 
    
    		// Total population
    		N = 1000
    
    	    // Start and end time.
    		T0 = 0 
    		Tn = 160
    
    		// Initial number of infected individuals
    		I0 = 1
    
    		// Initial number of removed individuals
    		R0 = 0
    
    		// S0 is everyone else who is initially suusceptible
    		S0 = N - I0 - R0
    
    		// Initial condition vector
    		y0 = [S0, I0, R0]
    
    		// Step size for Euler integration
    		h = 1.0
    
    		// Coefficients for the coupled system of differential equations
    		beta  = document.getElementById('beta_slider').value /100
    		gamma = document.getElementById('gamma_slider').value /100
    
    		// Update the label showing the current slider values
    		document.getElementById('beta_value').innerHTML  = beta
    		document.getElementById('gamma_value').innerHTML = gamma
    
    		args  = [beta, gamma]
    
    		// Inegrate teh SIR equations over time
    		result = euler(T0, y0, Tn, args, h, ['Time', 'Susceptible', 'Infected', 'Removed'])
    
    		// Draw the Google Chart for the data
    		var data = new google.visualization.arrayToDataTable(result)
        	var options = {
            	hAxis: {title: 'Time (days)'},
            	vAxis: {title: 'Number'}
            	}
    
        	var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    		chart.draw(data, options);
    
    	} 
    
    </script>
    
    </head>
    <body>
    <div>
    	<p>
    	<label for='beta_slider'>beta</label>
    	<input id="beta_slider"  type="range" min="0" max="100" value="20" oninput="drawSIR()" onchange="drawSIR()">
    	<label id='beta_value' >0.2</label>
    	</p>
    
    	<p>
    	<label for='gamma_slider'> gamma <label>
    	<input id="gamma_slider"  type="range" min="0" max="100" value="14" oninput="drawSIR()" onchange="drawSIR()" >
    	<label id='gamma_value''>0.7</label>
    	</p>
    </div>
    
    <div id='chart_div' style='width: 100%; height: 400px'></div>
    
    </body>
    </html>
    


  • UPDATE! OOPS! I didn't copy the last line of the HTML part with the DIV where all the magic happens! All good now.

    Brian



  • Thanks for reporting, Brian.

    Good day.


Log in to reply