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

Brian von Konsky

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>

Brian von Konsky

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

anand

Thanks for reporting, Brian.

Good day.