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.