Navigation

    Digital Liberation Forums

    • Register
    • Login
    • Search

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

    Header and Footer Scripts
    2
    3
    20
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Brian von Konsky
      Brian von Konsky last edited by

      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>
      
      1 Reply Last reply Reply Quote
      • Brian von Konsky
        Brian von Konsky last edited by

        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

        1 Reply Last reply Reply Quote
        • anand
          anand last edited by

          Thanks for reporting, Brian.

          Good day.

          1 Reply Last reply Reply Quote
          • First post
            Last post