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,


    <meta charset="UTF-8">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" >
    	google.charts.load('current', {'packages':['corechart']});
    	/* Based on */
    	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) 
        	numberCurves= header.length - 1;
        	result  = [header]
        	// Iterating over time
        	for(x=x0; x<=xn; x += h) { 
        		row = [x]
        		for (i=0; i<numberCurves; i++) {
        		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);
    	<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>
    	<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>
    <div id='chart_div' style='width: 100%; height: 400px'></div>

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


  • Thanks for reporting, Brian.

    Good day.

Log in to reply