I'd like to combine the HTML, CSS, and JS into a single HTML script for the code already created at "Bell Curve Using Google Charts API"
https://codepen.io/josdea/pen/JKXpJb/ It should be as simple as putting the CSS in style and JS in script in the head, right? For some reason, I can't get it to work. Any help would be greatly appreciated. Here's my code <html> <head> <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(drawChart); var data;var options;let chart;var stndDev = 1;var mean = 0;let xMin = -3;let xMax = 3.1;let xLeft = -2;let xRight = 1.25; google.charts.load("current", { packages: ["corechart"] }); google.charts.setOnLoadCallback(prepareChart); function prepareChart() { data = new google.visualization.DataTable(); setChartOptions(); addColumns(); addData(); drawChart();}function setChartOptions() { options = { legend: "none" }; options.hAxis = {}; options.hAxis.minorGridlines = {}; options.hAxis.minorGridlines.count = 5; return options;}function addColumns() { data.addColumn("number", "X Value"); data.addColumn("number", "Y Value"); data.addColumn({ type: "boolean", role: "scope" }); data.addColumn({ type: "string", role: "style" });}function addData() { data.addRows(createArray(xMin, xMax, xLeft, xRight, mean, stndDev));}function createArray(xMin, xMax, xLeft, xRight, mean, stndDev) { let chartData = new Array([]); let index = 0; for (var i = xMin; i <= xMax; i += 0.1) { chartData[index] = new Array(4); chartData[index][0] = i; chartData[index][1] = jStat.normal.pdf(i, mean, stndDev); if (i < xLeft || i > xRight) { chartData[index][2] = false; } chartData[index][3] = "opacity: 1; + color: #8064A2; + stroke-color: black; "; index++; } return chartData;}function drawChart() { chart = new google.visualization.AreaChart( document.getElementById("chart_div") ); chart.draw(data, options);} </script> </head> <body> <style>#chart_div{width: 1200px;height: 600px;margin: 5px;} </style> <h1>Bell Curve with Google Charts API</h1> <div id="chart_div"></div> </body></html> The code currently results in a "Data Table Not Defined" Error. Any help would be greatly appreciated! -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/84e462b5-ef09-4348-b438-3732cade12bd%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
