You should probably look in the browser's debugger to find out what the problem is. Perhaps you didn't remove the hidden loading of the charts/loader.js, under the JS Settings, which is extraneous if you are loading it yourself in the HTML.
This seems to work: https://codepen.io/anon/pen/WJodjq On Fri, Apr 27, 2018 at 11:09 AM spin888 <[email protected]> wrote: > 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 > <https://groups.google.com/d/msgid/google-visualization-api/84e462b5-ef09-4348-b438-3732cade12bd%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> [email protected] <[email protected]> 5CC, Cambridge MA -- 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/CAOtcSJMd8%3DicTS%3DUWNfyqCKup8nML6F%3DVzSyEqQwbQB3OpTeSw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
